VUE生命周期

$set 的深入理解
众所周知，Vue 双向数据绑定的原理是通过遍历data属性，利用Object.definePrototype将其转化成setter/getter,但是由于现代js的限制以及object.observe的限制，vue无法检测到对象属性的添加或删除。具体场景如下

• 
  <li v-for=’(item,key) in list’ :key=“item.id” @click=“clicks(item)” :class=“item.checked===‘0’?‘red’:‘blue’”>{{item.name}}
  

以上代码预计实现的效果是 点击对应的 li 颜色 发生变化。但是，实际点击的时候并没有用，将item 输出，checked确实发生变化
原因在于—Vue 不能检测到对象属性的添加或删除
在这里 再啰嗦一下Vue的生命周期都干了些什么事
beforeCreate 数据还没有挂载，只是一个空壳，无法访问数据和dom，一般不做操作
//console.log(this.list) //undefind
created 绑定事件，挂载数据 并且在这里更新data 不会触发update函数

beforeMount 将模板编译为虚拟dom，放到render中准备渲染 在这里更新data 不会触发update函数
mounted 渲染出真实dom 可操作真实dom

//如果组件中有更新，就会触发beforeUpdate
beforeUpdate 重新生成dom树 根据diff（本质是调用patch函数）算法，对比上一次dom树
updated 数据更新完成 render完成

beforeDestroy 一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等
destroyed 组件的数据绑定、监听…去掉后只剩下dom空壳
如上因为检测不到属性的变化，自然不会触发update函数，所以视图也没有更新

这个时候就需要$set,出现了，用法如下

//只要将clicks 修改成
clicks(item){
//item.checked = “0”;
this.KaTeX parse error: Expected 'EOF', got '}' at position 26: …checked','0'); }̲ 错误写法：this.set(key,value)（ps: 可能是vue1.0的写法）
————————————————
版权声明：本文为CSDN博主「Markov Zheng」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/marko_zheng/article/details/90409065