vue双向绑定原理

vue深入式响应原理，当我们在data中声明变量对象，Vue 将遍历此对象所有的 property（如下面的list），并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

<div v-for="(item,index) in list":key="index"@click="changeSingle(item,index)">{{item.name}}，今年{{item.age}}岁，{{item.single}}单身</div>

data () {return {list: []//声明一个数组}},mounted () {this.setSingle()},methods: {//设置初始值setSingle () {this.list = [{ name: '小帅', age: '17' },{ name: '大漂亮', age: '16' },{ name: '阿伟', age: '18' },{ name: '金姐', age: '22' }]this.list.forEach(element => {element.single = '是'})},//点击事件 改变状态值changeSingle (item, index) {item.single = '不是'console.log('月老牵线，告别单身~')}}

当我们修改基本类型的数据时，视图上会即时更新。但是，当我们修改引用数据类型时，由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。这个限制是由于引用数据类型（数组和对象）的数据存储层级可能包含多层，当我们没有在声明引用数据类型时就声明其属性值，它不会监听深层级的属性。
此时月老都牵线了 但是小帅的状态没变 （摊手）

救救小帅吧~

方法一 增加一个基本类型的变量

偶然发现，在触发增删改引用数据类型的属性值，同时修改一个基本数据类型的值，并且该基本类型必须渲染在视图上，才会触发引用数据类型数据在视图上的更新。
代码如下
HTML代码：

<div v-for="(item,index) in list":key="index"@click="changeSingle(item,index)">{{item.name}}，今年{{item.age}}岁，{{item.single}}单身</div><div>{{flag}}</div>

js代码：

data () {return {person: {},list: [],flag: true}},mounted () {this.setSingle()},methods: {setSingle () {this.list = [{ name: '小帅', age: '17' },{ name: '大漂亮', age: '16' },{ name: '阿伟', age: '18' },{ name: '金姐', age: '22' }]this.list.forEach(element => {element.single = '是'})},changeSingle (item, index) {this.flag = !this.flagitem.single = '不是'console.log('月老牵线,' + item.name + '告别单身~')}}
}

方法二 使用整体对象替换

直接给list整体赋一个值

changeSingle (item, index) {this.list = [{ name: '小帅', age: '17', single: '不是' },{ name: '大漂亮', age: '16' },{ name: '阿伟', age: '18' },{ name: '金姐', age: '22' }]console.log('月老牵线,' + item.name + '告别单身~')}

方法三 使用vue文档提供的方法

$forceUpdate()，在增删改数据后实行强制更新。

changeSingle (item, index) {item.single = '不是'this.$forceUpdate()console.log('月老牵线,' + item.name + '告别单身~')}

好的，恭喜小帅告别单身~（✿✿ヽ(°▽°)ノ✿）