------------恢复内容开始------------
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中触发依赖
------------恢复内容结束------------