Vue2 中的数据劫持简写示例

Vue2 中的数据劫持是通过 Object.defineProperty() 来实现的，这个方法可以对对象的属性进行劫持，然后在对象属性赋值时自动触发相应的函数。下面我们通过示例来说明 Vue2 中的数据劫持简写的使用方法：

示例如下：

示例一：

var obj = {}
// 使用 $set 存储属性
Vue.set(obj, 'name', 'Vue')
// 使用 $set 也可以存储数组对象
Vue.set(obj, 'list',[{name:'Tom', age:23},{name:'John', age:27}])
// 如果属性值为数组，则可以使用数组方法进行修改
obj.list.splice(1,1,{name:'Max', age:32})

上面代码我们使用 Vue.set 方法来存储对象和数组。当然，上面的代码段里面非常明显是针对 Vue 实例对象而言，通过实例的 $set 方法，可以修改甚至新增数据，文档也提醒我们：在初始化实例时，可以通过 el 选项指定页面上已存在的一个 DOM 元素来挂载 Vue 实例，当然还有 data 参数选项，它用于描述该应用的初始数据。这样 Vue 就会递归地将data 中的属性转换为 getter/setter，从而让 Vue 能够监听到属性的变化，这也是 Vue2 中双向数据绑定的基础。

示例二：

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

上面的代码就是一个最典型的 Vue 实例，我们可以看到其中的 data 参数选项就是所谓的初始数据，当然里面还包含了模板选项 template，还有视图挂载点选项 el。当 data 发生变化时，Vue 就会自动将这些变化渲染到视图上。

总结：Vue2 中的数据劫持虽然比较复杂，但是在使用上却非常的简洁，只需要使用 Object.defineProperty()方法进行劫持，就可以实现双向绑定的效果。同时，我们在使用 Vue 的时候，要注意不要直接操作其内部的数据，而要使用 Vue 提供的方法或者指令来实现数据的更新。