IT教程 ·

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]
          }
        }
    });

如今我们转变个中的元素值

Vue中你大概认为是bug的状况原来是如许的 IT教程 第1张

  • 如图所见,我们转变数组中某个元素的值,并未发明页面转变
    Vue中你大概认为是bug的状况原来是如许的 IT教程 第2张

解答疑问

  • 起首我们晓得作为data的属性,Vue都邑经由过程for in 来遍历该对象的一切属性及子属性,然后针对每一个属性举行reactive式的数据挟制。
  • 然则当遍历数组或对象属性时,假如黑白对象数据类型,就如下图
  • Vue中你大概认为是bug的状况原来是如许的 IT教程 第3张
  • 我们能够看到在Vue中 关于reactive操纵,非对象数据类型是不论的,因而,我们变动vm.arr[0] = 98没有结果

想办法处理

听说有个函数能够让Vue晓得你在增添属性,并完成相应式。Vue.set(obj.key.value);

哇,有结果!!

我们再来转变他看看是否能双向数据绑定

Vue中你大概认为是bug的状况原来是如许的 IT教程 第4张

哦! No!看看源码

Vue中你大概认为是bug的状况原来是如许的 IT教程 第5张
看到了吗? 基础(原始)数据类型还给个正告!!

Vue中你大概认为是bug的状况原来是如许的 IT教程 第6张
往下实行,假如是数组直接完毕了,并不做reactive操纵哦

总结

之前讲解了Vue做数据挟制是基于Object.defineProperty的,然则他只能做set和get,而没法看管到属性的增添或许削减,这点却是能够用Vue.set(obj.key.value)处理!而数组+基础数据类型不可! 固然话说回来,实在营业中,直接用数组操纵基础数据类型的场景还真不多!

VFP的数据策略:高级篇

参与评论