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的数据策略：高级篇