JS框架vue2中可以将数据与视图进行绑定，修改data对象的属性值将引起对应视图的改变。Vue2的数据视图绑定是通过JS特性这一语法实现，其使用中存在数据丢失的这一bug。我会详细介绍一下几种数据丢失情况。

<div id="#app">{{num[0]}}</div>

let data = {
    msg: '数据丢失',
    nums: [1, 2, 3]      
}
let app = new Vue({
    el: '#app',
    data 
})

 上述的代码片段可以正常获取到数组0项值1，修改数组第0项值希望能对视图进行更新：

//   数据丢失情况1
 data.nums[0] = 110；

修改结束后视图没有发生任何变化，但打印app变量（即Vue实例）可见nums[0]的值确实变成了110。这是因为data对象中不能监控引用类型的子项。

解决方法有两个：

1、重新赋值给数组     data.nums = [110]

2、更新data对象中基本类型属性的值并成功更新在视图上，因为在更新视图时会重新获取data中的值，即会帮助获取nums最新的值。(不推荐，因为必须更新基本属性的值和视图)

 

数据丢失情况2

同一基本一样，数组新增子项且Vue实例更新成功，视图却无法更新。

解决方法也一样。

 

数据丢失情况3

除了数组外，自然还有普通的对象会存在数据丢失情况。对象的属性值被更新，视图无法更新生效。解决方法也是和数组一样。

 

数据丢失情况4

<div id="#app">{{num}}</div>

let data = {}
let app = {
    el: '#app',
    data    
}
app.num = 100;
// 注意是app.num而不是app.data.num。data对象只是一个中转站，Vue实例中并不存在data

Vue实例中存在num属性，但是num属性无法在视图中显示出来。解决方法为，Vue规定我们如果想要在视图中使用，我们就需要在data对象中初始化它。

let data = {num: ''}

 　

官方提供给我们一种更可靠的修改属性值的方法，可以用于解决前三种数据丢失的情况。

Vue实例的$set方法，第一个参数可以是Vue实例对象，也可以是其他对象；第二个参数是对象的属性名称，第三个参数是属性值。

那么修改第一种情况中的数组第一个子项就可以为

app.$set(app.nums, 0, 110);

　　

 作者：xzjeff，为个人学习笔记。