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

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

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

我這邊提供三個(gè)方向，從這三個(gè)方向，你都可以看到watcher的使用，然后watcher的使用過(guò)程中，會(huì)摻雜到observer以及dep，然后以點(diǎn)帶面，對(duì)整體進(jìn)行梳理

初始化的render流程去看

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

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

可以透過(guò)這個(gè)傳參，梳理出整一個(gè)

• 從watch的角度去看
• 從computed的角度去看

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

這個(gè)問(wèn)題其實(shí)可以分兩個(gè)方面去看：

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

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

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

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

Object.defineProperty
proxy

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

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

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

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

這里僅用一個(gè)簡(jiǎn)單的例子和圖，來(lái)明確一下整個(gè)流程

<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é)果：

訂閱更新流程圖：

。

做題深化知識(shí)點(diǎn)

題目如下：

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

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

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

對(duì)于第一和第二在這里就不花篇幅去說(shuō)明。

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

我們?cè)谧鰳I(yè)務(wù)的時(shí)候經(jīng)常會(huì)遇到這樣的情況，我舉一個(gè)簡(jiǎn)單的例子：

<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的時(shí)候，并沒(méi)有觸發(fā)視圖的更新。因?yàn)槲覀冊(cè)诟淖僶bj的值的時(shí)候，并沒(méi)有去觸發(fā)Dep(obj)。

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

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

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

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

那如何去改變:

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

總結(jié)

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