vue如何實現數據控制視圖

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

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

1. 這塊內容該從哪邊入手

2. 數據變化是如何驅動視圖層更新的

3. 做題深化知識點

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

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

初始化的render流程去看

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

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

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

• 從watch的角度去看

• 從computed的角度去看

數據變化是如何驅動視圖層更新的

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

如何知道數據變化了

如何知道某一塊視圖和數據有關，并更新他 如何知道數據變化了

答案：數據劫持

數據劫持的兩種方式

Object.defineProperty
proxy

Vue3.0中的數據劫持是用proxy來實現的，目前閱讀的源碼中，都是以 Object.defineProperty 這種方式來實現的。

如何知道某一塊視圖和數據有關，并更新他

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

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

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

<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
  }
 }
})

依賴收集流程圖

依賴收集的最終結果：

訂閱更新流程圖：

。

做題深化知識點

題目如下：

1、簡述Vue的響應式原理

2、計算屬性和watch的區別

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

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

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

我們在做業務的時候經常會遇到這樣的情況，我舉一個簡單的例子：

<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>

依賴收集流程：

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

產生問題的本質原因：

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)
}

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