一、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>
