您的位置:

数据劫持

一、什么是数据劫持

数据劫持是指在一个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框架中,数据劫持是由框架自动触发的,开发者只需关注逻辑层面的代码编写即可。