Vue day2

Vue中的style
:style{}
可以用对象的方式写样式，对象里面是js环境，属性破折号用驼峰命名法
:style="{width:100+54+px,height:44*2+px,backgroundColor:istrue?red:blue}"
Vue（MVVM）原理
es5新增的api
Object.defineProperty()
查看兼容型网站：Can I use
不兼容ie8，

Object.defineProperty(obj, "age", {
      get: function () {
        return chushi;
      },
      set: function (val) {
        
        chushi = val;
      },
    });

这个方法有好多参数，第一个是传入的对象，第二个是属性，get可以拦截获取对象指定属性值返回你定义的数据，set是设置的时候返回你定义的数据
参考：此方法详解

每次new一个Vue对象时候，其会遍历data里面的所有属性，每个属性都会通过defineProperty()，生成一个getter和setter，这样之后，我们每个属性都是可以被追踪的，每一个组件（实例）就有一个watcher，监测getter和setter一旦其触发，便会用render函数 生成虚拟dom，

虚拟dom
以js对象结构表示真实dom树，在更新真实dom树之前，用diff算法与之前存在内存中的虚拟dom进行逐级，唯一键进行比较，得出性能最快，操作dom最小的算法操作真实dom树，操作完之后，这次生成的虚拟dom便会替换上次存在内存中的虚拟dom
所以vfor要加上：key="" 此key是独一无二的

MVVM的问题
1.一个数据没有在data中初始化定义，而是后面动态添加，vue是监测不到其状态的改变，所有数据改变视图不会自动刷新
解决方案：使用到的数据一定要在data中初始化
定义不同类型的数据时候，初始化值有一定要求：
num：0如果是下标-1
object :null或者 {}
arr []
string ''
2.数组的某些操作不会被defineProperty()捕获，视图不会响应渲染自动刷新,
第一个操作：
arr[index]=value,
解决方案：
vue中提供了一个解决办法：
其在实例中定义了个全局方法：
this.$set（数组，下标，值）
第二个操作
arr.length=value
解决方案：
使用arr.splice解决
arr.splice（开始下标，删除个数，[...增加的元素]）