vue的数据劫持以及操做数组的坑

TL;DR

• 给data添加新属性的时候vm.$set(vm.info,'newKey','newValue')
• data上面属性值是数组的时候，须要用数组的方法操做数组，而不能经过index或者length属性去操做数组，由于监听不到属性操做的动做。

安装和初使用vue

vue是构建用户界面的渐进式框架。所谓的渐进式：vue + components + vue-router + vuex + vue-cli能够根据须要选择相应的功能。

来串命令mkdir vue-apply;cd vue-apply;npm init -y;npm i vue。

来一个html文件以下，浏览器瞄下~，浏览器控制台vm.msg=0再看下

<div id="app">{{msg}}</div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> let vm = new Vue({ el:'#app', // template加上以后会替换掉#app这个标签 // template:'<h1>en</h1>', data:{msg:'msg'} }) vm.msg = 'msg' </script>
复制代码

说说mvvm mvc

mvc实际上是model view Model传统全部逻辑在controller,难以维护。用户输入 => 控制器 => 数据改变，若是数据变了须要获取dom，操做属性，再渲染到视图上。
mvvm实际上是model view viewModel数据变化驱动视图。数据变了，不须要你获取dom，而后改变dom的内容。这边数据变了，vm负责监听，视图那边自动发生变化。最明显的是不须要document.querySelector之类的了。

vm的实质

上面说了vm负责让数据变了，视图能自动发生变化。这么神奇魔术背后的原理是Object.defineProperty。其实就是属性的读取和设置操做都进行了监听，当有这样的操做的时候，进行某种动做。来一个demo玩下。

// 对obj上面的属性进行读取和设置监听
let obj = {
        name:'huahua',
        age:18
    }
    function observer(obj){
        if(typeof obj === 'object'){
            for (const key in obj) {
                defineReactive(obj,key,obj[key])
            }
        }
    }
    // get的return的值才是最终你读取到的值。因此设的值是为读取准备的。
    // set传的参数是设置的值，注意这里不要有obj.name = newVal 这样又触发set监听，会死循环的。
    function defineReactive(obj,key,value){
        Object.defineProperty(obj,key,{
            get:function(){
                console.log('你在读取')
                // happy的话这边能够value++，这样你发现读取的值始终比设置的大一个，由于return就是读取到的值
                return value
            },
            set:function(newVal){
                console.log('数据更新了')
                value = newVal
            }

        })
    }
    observer(obj)
    obj.age = 2
    console.log(obj.age)

复制代码

在浏览器执行的时候，控制台随手也能够obj.name="hua1"相似的操做，发现都监听到了。可是若是更深一步，obj.name={firstname:'hua',lastname:'piaoliang'};obj.name.lastname='o'就不能监听到属性修改了。由于并无将新的赋值对象监听其属性。因此函数须要改进。 须要在defineReactive的第一行加上observer(value)。设置值的时候若是是对象的话，也须要将这个对象数据劫持。同理，set那边也须要加这行。

function defineReactive(obj,key,value){
       // 注意这里！！！！！！！
       observer(value)
        Object.defineProperty(obj,key,{
            get:function(){
                return value
            },
            set:function(newVal){
                // 注意这里！！！！！！！
                observer(newVal)
                console.log('数据更新了')
                value = newVal
            }

        })
    }

复制代码

继续，若是obj.name=[1,2,3];obj.name.push(4)发现又没有通知了，这是由于Object.defineProperty不支持监听数组变化。因此须要重写数组上面的方法。话说，最近看了个文章，理论上也能够监听数组，可是性能消耗和收益不成正比，因此，vue就没去实现了。

// 把数组上大部分方法重写了，这里不一一列举。可是若是你 [1,2].length--，这是捕捉不到的
    let arr = ['push','slice','split']
    arr.forEach(method=>{
        let oldPush = Array.property[method]
        Array.property[method] = function(value){
            console.log('数据更新')
            oldPush.call(this,value)
        }
    })
复制代码

vue使用的时候注意的坑

正如上面的解释，vue2.0的底层约莫是这个逻辑，因此使用须要注意的点：

• 由于是一开始就数据劫持了。因此后来若是新绑定属性，是没有数据劫持的。若是须要调用 vm.$set(vm.info,'newKey','newValue')，vm是vue的实例。

• 当属性值是数组，数组变化的时候，跟踪不到变化。由于数组虽然是对象，可是Object.defineProperty不支持数组，因此vue改写了数组的全部方法，当调用数组方法的时候，就调动变更事件。可是不能经过属性或者索引控制数组，好比length，index。

• 总结：data上，绑定全部属性避免后期加新属性。若是是数组，只能经过数组方法修改数组。以下例子，控制台vm.arr--发现视图并不会变化，vm.arr.push(4)就能变化

<div id="app">{{msg}}{{arr}}</div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script> let vm = new Vue({ el:'#app', // template加上以后会替换掉#app这个标签 // template:'<h1>en</h1>', data:{msg:'msg',arr:[1,2,3]} }) vm.msg = 'msg' </script>
复制代码