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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了五大連池免費建站歡迎大家使用！

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

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

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

3. 做題深化知識點

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

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

初始化的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)，并更新他

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

詳細(xì)解讀過程：用圖告訴你響應(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é)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文標(biāo)題：vue如何實現(xiàn)數(shù)據(jù)控制視圖
網(wǎng)站地址：http://jinyejixie.com/article8/jjgdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、營銷型網(wǎng)站建設(shè)、企業(yè)建站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)