Vue對象的Object的變化偵測

------------恢復內容開始------------

1、什么是變化偵測

Vue.js會自動通過狀態生成Dom，並輸出到頁面上進行顯示，這過程稱為渲染，當狀態發生變化時vue能立刻感知到哪些狀態改變了，並進行更新

2.如何追蹤狀態變化

js里面偵測對象的變化有兩種，一種是Object.defineProperty和Es6的proxy

 

 function defineReactive(data,key,val) {
     Object.defineProperty(data,key,{
         enumerable:true,//可枚舉
         configurable:true,
         get:()=>{
             console.log('isGet')
             return val
         },
         set:(newVal)=>{
             console.log(newVal,val) 
             if(val===newVal){
                 return
             }
             console.log('isSet')
             val=newVal
         }
     })
 }
 let obj={}
 defineReactive(obj,'dog','good')
 obj.dog //good
 obj.dog = 'good1' //good

每次從obj的key中讀取數據時，get函數被出發，當往obj的key中設置數據時，set被觸發

3，依賴收集

<template>
   <h1>{{name}}</h1>
</template>　　
當模板使用數據時，當數據發生變化，會將通知發送到組件中，內部組件通過虛擬Dom重新渲染

及首先將數據name的地方收集起來，當屬性發生變化是，將收集的依賴循環觸發，在getter中收集依賴，在setter中觸發依賴

 

 

 

 

 

 

------------恢復內容結束------------