一、vue如何追踪变化
当你把一个普通的JS对象传给vue实例的data选项时，
vue将遍历此对象的所有属性，
并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。
Object.defineProperty是ES5中一个无法识别的特性，
这也就是为什么vue不支持IE8以及更低版本的浏览器。
二、为什么使用Vue.set()
因为受现代JS的限制，vue不能检测到对象属性的添加或删除。(重要！！！)
由于vue会在初始化实例时对属性执行 getter/setter 转化过程，
所以属性必须在data对象上存在才能让vue转换它，这样它才能是响应的。
vue不允许在已经创建的实例上动态添加新的根级响应式属性，（注意！！！）
不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上。
三、 更新数据（Array）失败
this.list[0] = '王五';
当我们修改数据之后， 【this.list[0] = '王五';】
视图上并没有发生变化，
实际上这个修改并不能生效，因为Vue不能检测到以下变动的数组:
1==> 当你利用索引直接设置一个项时，例如: this.list[index] = newValue
2==> 修改数组的length属性,例如: this.list.length = 0
所以在上例中通过this.list[0] = '王五' 是无法触发数据响应的，
<template>
<div class="about">
<template>
<div>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
<button @click="handleChangeName">修改名称</button>
</div>
</template>
</div>
</template>
<script>
//别忘记引入vue
import Vue from 'vue'
export default {
data() {
return {
list: ['张三', '李四']，
personArr: [{name:'张三',age:20}，{name:'李四',age:30}]，
}
},
methods: {
// 修改用户名称
handleChangeName() {
// 这样更改会失败
// this.list[0] = '王五'
// 这样更改ok的
Vue.set(this.list,0,'王五')
//如果你更改的是数数组的某一项
let obj1={name:'李四',age:30，sex:'男'}
Vue.set(this.personArr,0,obj1)
//如果你只是想添加一个key值的话；
obj2['xueli']='大专';
Vue.set(this.personArr,0,obj2)
}
}
}
</script>
作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！
万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！
支付宝
微信
本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。