vue数据劫持 ajax,Vue视图更新原理 - 数据劫持，最小量更新和DIFF算法

什么是数据劫持

加入有一个js文件内容如下：

var obj = {

x: 100,

y: 200,

}

Object.defineProperties(obj, {

x: {

set(){

console.log("You gonna update x, the vision will be changed.")

}

}

})

复制代码

当node运行这个js文件的时候不会有任何效果呈现。

但当在这个文件中加入一个变化的东西：

var obj = {

x: 100,

y: 200,

}

Object.defineProperties(obj,{

x: {

set(){

console.log("You gonna update x, the vision will be changed.")

}

}

})

obj.x ++

复制代码

console.log()里的话就会被打印出来。

基本原理是这个Object.defineProperties()函数能在数据更新的过程中捕获数据.

Object.defineProperties()这个函数是原生js。

最小量更新

写一个组件如下，实验一下Vue是否会在页面某个数据变化时在底层更新页面的其他数据。

手动在后台将下面的数字改成“哈哈”后点击x+1的按钮改变上面的数字，后台的“哈哈”保持不变。

这就是Vue特有的最小量更新算法，也叫DIFF算法。

当改变某个量时，Vue会检索template中的三个东西：

① 单个双打括号中是否有这个量；

② 指令中是否有这个量；

③ methods, computed和watch中是否有这个量。

只要符合以上其中一条，这个量都会得到更新。

关于单个双括号中是否有这个量，由于上图都是单个量在单个双括号内所以不能很好的说明这一点。以下再写一个有联动量的双括号：

这时点任何一个按钮“哈哈”都会更新为x+y的和。

下面进一步解释这个最少量更新算法的结算机制：

以上说明Vue视图更新遵循最小量更新原则，没有变化的视图Vue就不会让该视图所属的元素发生变化。

上面说到当改变某个量时Vue会检索单个双大括号中是否有这个量，在这个过程中Vue会进行求值，如果求得的值和原来的值是一样的，则不会发生更新。

【注意】由于Vue的这一机制，在使用时尽量避免混进对DOM的操作改而操作数据，否则容易触发这一机制导致更新无效。

React中也有DIFF算法，效率比Vue高，因为React没有指令系统，其所有数据都是立即求值而不像Vue会先进行一番数据检索。React的更新原理是将更新的DOM存入虚拟DOM中与旧的DOM进行DIFF再进行最少量更新，Vue则比React多了一步词法分析。

最小量更新的重要角色 - key

在使用v-for指令时常常会与key属性连用，否则某些情况下会出现编辑器报错，一般key属性的属性值为循环的item或者index，属性值为item代表的是每一项循环的item本身，属性值为index则代表的是每一项的顺序。

当涉及视图更新时，有没有key属性以及不同的属性值将会引发截然不同的结果。

没有key属性时更新不会触发beforeDestroy()，即原来的节点没有下树只是节点中的内容更新了。

有key属性并且属性值为item时更新则会触发beforeDestroy()，证明“α”的节点下树(消亡)了，新的“”的节点被创建并上树。

有key属性并且属性值为index时更新又不会触发beforeDestroy()了，即没有节点上下树。

所以当v-for循环涉及子组件循环时，key的属性值最好用item而不是index，否则会导致一些程序误判，当涉及一些AJAX等数据交互时也会阻断了组件与服务器之间的信息交换。使key的属性值为item的好处是能正确触发子组件的生命周期。