VUE3-响应式原理（5）

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue3的响应式原理</title>
  </head>
  <body>
    <script type="text/javascript">
      // 源数据
      let person = {
     
     
        name: '张三',
        age: 18
      }

      // 模拟Vue2中实现响应式
      /* let p = {}
      Object.defineProperty(p, 'name', {
        configurable: true,
        get() { // 有人读取name时调用
          return person.name
        },
        set(value) { // 有人修改name时调用
          console.log('有人修改了name属性，我发现了，我要去更新界面！')
          person.name = value
        }
      })
      Object.defineProperty(p, 'age', {
        get() { // 有人读取age时调用
          return person.age
        },
        set(value) { // 有人修改age时调用
          console.log('有人修改了age属性，我发现了，我要去更新界面！')
          person.age = value
        }
      }) */

      // 模拟Vue3中实现响应式
      const p = new Proxy(person, {
     
     
        // 有人读取p的某个属性时调用
        get(target, propName) {
     
     
          console.log(`有人读取了p身上的${
       
       propName}属性`)
          return Reflect.get(target, propName)
        },
        // 有人修改p的某个属性、或给p追加某个属性时调用
        set(target, propName, value) {
     
     
          console.log(`有人修改了p身上的${
       
       propName}属性，我要去更新界面了！`)
          Reflect.set(target, propName, value)
        },
        // 有人删除p的某个属性时调用
        deleteProperty(target, propName) {
     
     
          console.log(`有人删除了p身上的${
       
       propName}属性，我要去更新界面了！`)
          return Reflect.deleteProperty(target, propName)
        }
      })



      let obj = {
     
     
        a: 1,
        b: 2
      }
      // 通过Object.defineProperty去操作
      /* try {
        Object.defineProperty(obj, 'c', {
          get() {
            return 3
          }
        })
        Object.defineProperty(obj, 'c', {
          get() {
            return 4
          }
        })
      } catch (error) {
        console.log(error)
      } */

      // 通过Reflect.defineProperty去操作
      const x1 = Reflect.defineProperty(obj, 'c', {
     
     
        get() {
     
     
          return 3
        }
      })
      console.log(x1) // true

      const x2 = Reflect.defineProperty(obj, 'c', {
     
     
        get() {
     
     
          return 4
        }
      })
      if (x2) {
     
     
        console.log('某某某操作成功了！')
      } else {
     
     
        console.log('某某某操作失败了！') // 某某某操作失败了！
      }

      console.log('@@@') // @@@
    </script>
  </body>
</html>
VUE3-响应式原理（5）

猜你喜欢
