比较Vue2与Vue3的响应式

最新推荐文章于 2024-07-09 15:31:49 发布

奋斗的新丁

最新推荐文章于 2024-07-09 15:31:49 发布

阅读量322

点赞数

分类专栏： Vue 文章标签： javascript vue.js node.js

本文链接：https://blog.csdn.net/qq_42374233/article/details/111640196

版权

Vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文深入探讨了Vue2和Vue3中响应式的实现方式。Vue2通过Object.defineProperty实现对象和数组的劫持，而Vue3则利用Proxy全面拦截对象的13种操作，结合Reflect进行动态响应。示例展示了如何使用Proxy监听和修改对象属性，以及添加、删除属性。

摘要由CSDN通过智能技术生成

vue2的响应式

核心:
- 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
- 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

问题
- 对象直接新添加的属性或删除已有属性, 界面不会自动更新
- 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

Vue3的响应式

核心:
- 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
- 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'   
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxy 与 Reflect</title>
</head>
<body>
  <script>
    
    const user = {
      name: "John",
      age: 12
    };

    /* 
    proxyUser是代理对象, user是被代理对象
    后面所有的操作都是通过代理对象来操作被代理对象内部属性
    */
    const proxyUser = new Proxy(user, {

      get(target, prop) {
        console.log('劫持get()', prop)
        return Reflect.get(target, prop)
      },

      set(target, prop, val) {
        console.log('劫持set()', prop, val)
        return Reflect.set(target, prop, val); // (2)
      },

      deleteProperty (target, prop) {
        console.log('劫持delete属性', prop)
        return Reflect.deleteProperty(target, prop)
      }
    });
    // 读取属性值
    console.log(proxyUser===user)
    console.log(proxyUser.name, proxyUser.age)
    // 设置属性值
    proxyUser.name = 'bob'
    proxyUser.age = 13
    console.log(user)
    // 添加属性
    proxyUser.sex = '男'
    console.log(user)
    // 删除属性
    delete proxyUser.sex
    console.log(user)
  </script>
</body>
</html>

奋斗的新丁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
比较Vue2与Vue3的响应式

vue2的响应式核心: 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截) 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持 Object.defineProperty(data, 'count', { get () {}, set () {}})问题对象直接新添加的属性或删除已有属性, 界面不会自动更新直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {} Vu
复制链接

扫一扫

专栏目录