一、什么是数据劫持
数据劫持是指在一个javascript对象的属性被修改之前,先拦截这个修改操作,执行自定义的操作,比如提醒用户或更新界面。通常情况下,开发者需要监听一个对象的属性,当这个属性被修改时,立即执行一些操作。
Vue.js是一种基于MVVM模式的组件化构建web页面的前端框架,它采用了数据劫持的方式来监听数据的变化来实现双向绑定,具有高效稳定的特点。使用数据劫持可以方便地实现开发者想要的功能。
二、数据劫持的优势
Vue.js采用数据劫持监听数据的变化,相比直接监听DOM元素,有以下优势:
1、性能优越:由于直接监听DOM元素的方式会耗费很多资源,而采用数据劫持的方式不会增加UI渲染的次数,降低了渲染的时间。
2、代码简洁:采用数据劫持后,无需大量的手动判断属性是否改变就可以完成listener的设置,缩短了编码时间。
3、更快的渲染速度:Vue.js在实现DOM操作,结合依赖收集和异步更新队列等技术,可以大大提升界面渲染效率。
三、Vue.js中的数据劫持
Vue.js中的响应式数据劫持机制指的是,当页面视图渲染时,当页面的数据发生更改时,会自动触发视图进行更新。
Vue.js通过Object.defineProperty()来劫持对象属性的getter和setter操作。Object.defineProperty()是一个属性描述符的方法,通过它可以把这个属性设置为不可枚举,并且在get和set的时候可以插入执行代码。
// 定义一个对象 let person = { name: "Lucia", sex: "female" } //通过defineObjectProperty的setter方法监听name属性的值的修改,再执行我们要执行的逻辑 Object.defineProperty(person, "name", { set: function(val) { console.log(val + "has been changed") console.log("previous value is " + this.name) this._name = val }, get: function() { return this._name } })
这样无论何时修改person.name的值,都会触发setter方法,从而执行对象内置的自定义逻辑。
四、手动触发数据劫持
在Vue.js框架中,数据劫持是由Vue.js自动触发的。但在其他应用场景中,我们需要手动触发数据劫持,在以下情况中需要手动触发:
1、新数据未被监听: 在新增的数据中,如果有部分数据没有被监听,那么当这些数据被修改后需要手动触发数据劫持。
2、某些变量无法被监听: 在某些情况下,有些变量无法实现数据劫持。如数组的变化,需要特殊处理。当这些变量发生变化时就需要手动触发数据劫持。
var app = new Vue({
data: {
oldObj: {a:1, b:2, c:3},
newObj: {a:1, b:2, c:3}
}
});
// 修改newObj的属性c,手动触发数据劫持
app.$set(app.newObj, 'c', 4);
// 修改oldObj的修改i不会触发数据劫持
app.oldObj.i = 4;
五、Vue.js中的$watch
Vue.js提供了watch和computed两种方式来监听数据变化。watch是数据变化监听的一种简单实用的方式,当监听到数据变化时,执行对应的回调函数。
var app = new Vue({
data: {
message: 'Hello Vue.js!'
},
watch: {
// 监听message的变化
message: function (newValue, oldValue) {
console.log('New Message:'+newValue+', Old Message:'+oldValue);
}
}
});
六、总结
数据劫持是Vue.js框架中的核心特性之一。采用数据劫持可以实现数据绑定的双向更新。Vue.js通过Object.defineProperty()来实现数据劫持,在Vue.js框架中,数据劫持是由框架自动触发的,开发者只需关注逻辑层面的代码编写即可。