数据劫持

数据劫持

小蓝 • 2024-12-13 13:29 • 编程

一、什么是数据劫持

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

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/250506.html