详解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那边也需要加这行。