Vue2响应式原理详解

原创

已于 2024-05-14 11:20:45 修改 · 置顶 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

于 2024-05-11 16:22:40 首次发布

Object.defineProperty

通过Object.defineProperty方法进行数据代理，用vm对象的属性来代理data对象的属性

方法案例

 /* 
  此方法用于定义或修改对象属性的方法。它允许你精确地控制属性的行为，
  包括属性的值、可枚举性、可配置性和可写性。 
  接受三个参数：1 要定义属性的对象、2属性名以及一个3描述符对象。
  描述符对象包含了你想要定义的属性的特性。描述符对象的属性包括：
   value: 属性的值，默认为 undefined。
   writable: 属性是否可写，默认为 false。
   enumerable: 属性是否可枚举，默认为 false。
   configurable: 属性是否可配置，默认为 false。*/ 
  

    let person = {} // 定义一个空对象

    Object.defineProperty(person, 'name', {
      value: 'ZhangSan',
      writable: false,
      enumerable: true,
      configurable: false,

    })

    console.log(person.name);

    person.name = "Bob" // 这行代码不会修改 'name' 属性的值，因为 'writable' 属性被设置为 false

    for (let key in person) {
      console.log(key + ': ' + person[key]); // 只会输出 'name: John'，因为 'enumerable' 属性被设置为 true
    }

    delete person.name; // 这行代码不会删除 'name' 属性，因为 'configurable' 属性默认为 false

    console.log('name' in