携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

vue2中数据双向绑定的原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，具体为：通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

应用场景

由于vue会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在data对象上存在才能让vue转换它，这样它才能是响应的。但是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新.比如我们对data中的对象属性和数组属性进行一些修改时，无法响应式更新渲染到页面，例：

let addList = [{
'sc':'上海市','airport':'上海浦东国际机场'},
{'sc':'北京市','airport':'北京首都国际机场'}]
// 为每条数据新增一个distance属性
 addList.forEach(item=> item.distance = '20.70')

虽然打印出的数据有这个属性，但是我们并不能取到，仔细看可以发现这条属性并没有 getter/setter

这时就需要用vue.set方法来实现

具体用法:

全局:Vue.set(object, key, value)
vue实例:this.$set(object, key, value)

三个值分别为，需要新增属性的对象，属性名，属性值

let addList = [{
'sc':'上海市','airport':'上海浦东国际机场'},
{'sc':'北京市','airport':'北京首都国际机场'}]
// 为每条数据新增一个distance属性
 addList.forEach(item=> this.$set(item,'distance','20.70'))

注意:$set是vue专门针对对象和数组的问题的，对于单纯属性操作问题，vue官方是建议在开始时根据需要在data里面直接声明

vue复习之set方法使用

前言

应用场景

具体用法: