vue如何實現(xiàn)數(shù)據(jù)控制視圖

這篇文章將為大家詳細講解有關(guān)vue如何實現(xiàn)數(shù)據(jù)控制視圖，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

這篇主要講的就是vue很重要的一塊知識點，雙向數(shù)據(jù)綁定是如何實現(xiàn)的。一開始看這一塊的內(nèi)容的時候比較迷茫，迷茫在以下幾個點：

1. 這塊內(nèi)容該從哪邊入手

2. 數(shù)據(jù)變化是如何驅(qū)動視圖層更新的

3. 做題深化知識點

從哪邊著手去看響應(yīng)式原理

我這邊提供三個方向，從這三個方向，你都可以看到watcher的使用，然后watcher的使用過程中，會摻雜到observer以及dep，然后以點帶面，對整體進行梳理

初始化的render流程去看

在lifecycle這個文件中的mountComponent這個方法里，創(chuàng)建了一個watcher。代碼如下：

new Watcher(vm, updateComponent, noop, {
 before () {
  if (vm._isMounted && !vm._isDestroyed) {
  callHook(vm, 'beforeUpdate')
  }
 }
}, true /* isRenderWatcher */)

可以透過這個傳參，梳理出整一個

• 從watch的角度去看

• 從computed的角度去看

數(shù)據(jù)變化是如何驅(qū)動視圖層更新的

這個問題其實可以分兩個方面去看：

如何知道數(shù)據(jù)變化了

如何知道某一塊視圖和數(shù)據(jù)有關(guān)，并更新他 如何知道數(shù)據(jù)變化了

答案：數(shù)據(jù)劫持

數(shù)據(jù)劫持的兩種方式

Object.defineProperty
proxy

Vue3.0中的數(shù)據(jù)劫持是用proxy來實現(xiàn)的，目前閱讀的源碼中，都是以 Object.defineProperty 這種方式來實現(xiàn)的。

如何知道某一塊視圖和數(shù)據(jù)有關(guān)，并更新他

答案：依賴收集以及訂閱更新

詳細解讀過程：用圖告訴你響應(yīng)式原理

這里僅用一個簡單的例子和圖，來明確一下整個流程

<div id="app">
 {{ message }}
 {{ message1 }}
 <input type="text" v-model="message">
 <div @click="changeMessage">改變message</div>  
</div>

var app = new Vue({
 el: '#app',
 data: {
  message: '1',
  message1: '2',
 },
 methods: {
  changeMessage() {
   this.message = '2'
  }
 },
 watch: {
  message: function(val) {
   this.message1 = val
  }
 }
})

依賴收集流程圖

依賴收集的最終結(jié)果：

訂閱更新流程圖：

。

做題深化知識點

題目如下：

1、簡述Vue的響應(yīng)式原理

2、計算屬性和watch的區(qū)別

3、Vue中給data中的對象屬性添加一個新的屬性時會發(fā)生什么，如何解決？

對于第一和第二在這里就不花篇幅去說明。

Vue中給data中的對象屬性添加一個新的屬性時會發(fā)生什么，如何解決？

我們在做業(yè)務(wù)的時候經(jīng)常會遇到這樣的情況，我舉一個簡單的例子：

<template>
 <div>
 <ul>
  <li v-for="value in obj" :key="value">
  {{value}}
  </li>
 </ul>
 <button @click="addObjB">添加obj.b</button>
 </div>
</template>
<script>
export default {
 data () {
 return {
  obj: {
  a: 'obj.a'
  }
 }
 },
 methods: {
 addObjB () {
  this.obj.b = 'obj.b'
  console.log(this.obj)
 }
 }
}
</script>
<style></style>

依賴收集流程：

從中我們可以發(fā)現(xiàn)，renderWatch是有收集 Dep(obj) 和 Dep(Obj.a) 的，但是當(dāng)我們改變Obj的時候，并沒有觸發(fā)視圖的更新。因為我們在改變obj的值的時候，并沒有去觸發(fā)Dep(obj)。

產(chǎn)生問題的本質(zhì)原因：

1、vue會在state.js文件的initData的方法中，將data屬性中的每一個key都變成響應(yīng)式屬性。

2、視圖在渲染過程中，會將renderWatcher收集到用到的值的dep中，方便依賴更新（不懂的在回過去看一下依賴收集流程）

3、當(dāng)你額外添加一個屬性的時候，該屬性并不是響應(yīng)式屬性。

那如何去改變:

addObjB () {
 // this.obj.b = 'obj.b'
 this.$set(this.obj, 'b', 'obj.b')
 console.log(this.obj)
}

關(guān)于“vue如何實現(xiàn)數(shù)據(jù)控制視圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。