在 vue 开发中，我们可能遇到过以下问题
js 更新数据后页面未跟随改变输入框赋值后无法进行编辑以上现象的原因是数据对象没有 setter 和 getter 方法，无法实现双向绑定，下面是解决方法
比如，有如下数据
var vm = new Vue({ el: '#app', data: { list: [ 'a', 'b', 'c' ] } })html页面
<div id="app"> <div v-for="item of list">{{item}}</div> </div>假设，我们要往list中增加数据“d”，直接这样写是不行的 vm.list[3] = 'd' ；同理，我们若要将“b”改为“bb”，这么写也是不行的 vm.list[1] = 'bb' 。但我们同时发现数据是变化了的，只是页面没有更新而已。
那我们要怎么才能实现数据改变页面也跟着变化的效果呢？
（1）更改引用
vm.list = ['a','b','c','d']
（2）使用数组的变异方式
pop，删除并返回数组的最后一个元素push，向数组的末尾添加一个或多个元素，并返回新的长度shift，删除并返回数组的第一个元素unshift，向数组的开头添加一个或多个元素，并返回新的长度splice，删除元素，并向数组添加新元素sort，对数组的元素进行排序reverse，颠倒数组中元素的顺序以上7中方式都可以实现数据与页面的双向更新，这里我们只需执行 vm.list.push('d')
（3）vue中的set方法
vm.$set(vm.list, 3, 'd')
参数：数据，索引，元素项
如下
var vm = new Vue({ el: '#app', data: { userInfo: { name: 'cai', age: '22' } } })html页面
<div id="app"> <div v-for="(item, key, index) of userInfo">{{item}}</div> </div>假如我们要在 userInfo 中增加键值对，且实现数据与页面的双向更新，有两种方法
（1）更改引用
vm.userInfo = {name: 'cai', age: '22', gender: 'male'}
（2） set方法
vm.$set(vm.userInfo, 'gender', 'male')
参数：数据，key，value
注意：若我们想要通过Object.assign() 方法来添加属性应这样写
this.userInfo = Object.assign({}, this.userInfo, { gender: 'male' })这里是创建了一个新对象，此写法具有响应式，而下面这种写法不具有响应式
this.userInfo = Object.assign(this.userInfo, { gender: 'male' })
