Vue中你大概认为是bug的状况原来是如许的
MySQL索引那些事
媒介
我们晓得Vue框架脚本双向数据绑定功用,在我们使用方便的同时,另有一些细节问题我们并不晓得,接下来一同讨论一些吧
双向数据绑定
- js变量转变影响页面
- 页面转变影响js变量
Vue2是怎样做到数据绑定的
Object.defineProperty(obj,key,{
set:function (newV) {
val = newV;
// 关照一切用到这个属性的DOM更新
dep.notifyAll();
},
get:function () {
if (Dep.currentSub) {
// 对这个属性,新定阅一个元素
dep.subscribe();
}
return val;
}
});
- 以上须要说的就是: Vue中data函数返回的对象,会经由层层遍历,末了将一切的对象经由过程以上要领,把其属性举行看管。
- 经由过程xxx.xxx = 'xxx' 就会触发set函数
- 经由过程xxx.xxx 就会触发get函数
关于数组与基础数据类型的奇葩征象
我们声明好数组,个中安排基础数据类型
let vm = new Vue({
el:'#app',
template:`
<div>
<p v-for="n in arr" >
{{n}}
</p>
</div>`,
data(){
return {
arr:[1,2,3]
}
}
});
如今我们转变个中的元素值
解答疑问
- 起首我们晓得作为data的属性,Vue都邑经由过程for in 来遍历该对象的一切属性及子属性,然后针对每一个属性举行reactive式的数据挟制。
- 然则当遍历数组或对象属性时,假如黑白对象数据类型,就如下图
- 我们能够看到在Vue中 关于reactive操纵,非对象数据类型是不论的,因而,我们变动vm.arr[0] = 98没有结果
想办法处理
听说有个函数能够让Vue晓得你在增添属性,并完成相应式。Vue.set(obj.key.value);
哇,有结果!!
我们再来转变他看看是否能双向数据绑定
哦! No!看看源码
往下实行,假如是数组直接完毕了,并不做reactive操纵哦
总结
之前讲解了Vue做数据挟制是基于Object.defineProperty的,然则他只能做set和get,而没法看管到属性的增添或许削减,这点却是能够用Vue.set(obj.key.value)处理!而数组+基础数据类型不可! 固然话说回来,实在营业中,直接用数组操纵基础数据类型的场景还真不多!
VFP的数据策略:高级篇