vue中数据与页面间双向绑定需要注意的点

在 vue 开发中，我们可能遇到过以下问题

• js 更新数据后页面未跟随改变
• 输入框赋值后无法进行编辑

以上现象的原因是数据对象没有 setter 和 getter 方法，无法实现双向绑定，下面是解决方法

1.更新数组类型的数据

比如，有如下数据

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')

参数：数据，索引，元素项

2.更新对象类型的数据 

如下

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' })