Vue3响应式原理

Vue3响应式原理基于ES6的Proxy对象实现的

文章目录

Vue3响应式原理
- 一、知识储备：Proxy对象
- 二、Proxy实现Vue3基础演示

vue3的响应式原理是基于ES6的Proxy对象

一、知识储备：Proxy对象

proxy字面意思是代理器，主要用于改变对象的默认访问行为。通过在访问对象之前增加一层拦截，只要对对象访问行为都会通过这层拦截，在拦截中，我可以自定义一些行为。

Proxy的基本语法：

const proxy = new Proxy(target, handler)

proxy实际上是一个构造函数，接收两个参数，一个是目标对象target，另一个是配置对象handler，用来定义拦截的行为。

proxy、target和handler之间的关系是什么样的呢？

我们通过实例去理解他们之间关系

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const data = {
      msg1: '内容',
      arr: [1, 2, 3],
      obj: {
        name: 'william',
        age: 18
      }
    }

    const p = new Proxy(data, {
      get (target, property, receiver) {
        console.log(target, property, receiver)
        return target[property] 
      },
      set (target, property, value, receiver) { 
        console.log(target, property, value, receiver)
        target[property] = value
      }
    })
  </script>
</body>
</html>

get()函数内3个参数：target等于data；property就是获取属性：p.arr；receiver就是实例p，那么target[property] 就是data[“arr”]

set()函数内有4个参数：target等于data；property就是给data对象设置的属性名，比如p.arr，那么property就是"arr"；value就是设置的新值，比如p.arr=[4,5,6]，那么value就是[4,5,6]；receiver就是实例p。

当我们访问p实例时，就会自动触发get函数并返回data[“arr”]；当我们给p实例设置值时，就会自动触发set函数。

我们总结一下proxy、target、handler之间的关系

通过Proxy构造函数可以生成实例proxy，任何对proxy实例的属性的访问都会自动转发至target对象上，我们可以针对访问的行为配置自定义的handler对象，因此外界通过proxy访问target对象的属性时，都会执行handler对象自定义的拦截操作。

二、Proxy实现Vue3基础演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">原始内容</div>
  <script>
    const data = {
      msg: 'hello',
      content: 'world',
      arr: [1, 2, 3],
      obj: {
        name: 'william',
        age: 18
      }
    }

    const vm = new Proxy(data, {
      get (target, key) {
        return target[key]
      },
      set (target, key, newValue) {
        // 数据更新
        target[key] = newValue
        // 视图更新
        document.querySelector('#app').textContent = target[key]
      }
    })
  </script>
</body>
</html>