vue實現(xiàn)數(shù)據(jù)控制視圖的原理解析

更新時間：2020年01月07日 09:36:26 作者：laihuamin

這篇文章主要介紹了vue如何實現(xiàn)的數(shù)據(jù)控制視圖的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

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

這塊內(nèi)容該從哪邊入手
數(shù)據(jù)變化是如何驅(qū)動視圖層更新的
做題深化知識點

從哪邊著手去看響應式原理

我這邊提供三個方向，從這三個方向，你都可以看到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ù)有關，并更新他如何知道數(shù)據(jù)變化了

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

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

Object.defineProperty
proxy

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

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

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

詳細解讀過程：用圖告訴你響應式原理

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

<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的響應式原理

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

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

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

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

我們在做業(yè)務的時候經(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) 的，但是當我們改變Obj的時候，并沒有觸發(fā)視圖的更新。因為我們在改變obj的值的時候，并沒有去觸發(fā)Dep(obj)。

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

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

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

3、當你額外添加一個屬性的時候，該屬性并不是響應式屬性。

那如何去改變:

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

總結(jié)

這篇文章是年度總結(jié)的開篇，后續(xù)會繼續(xù)總結(jié)初始化部分、render部分和patch部分。希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: