Vue3响应式原理

Vue3响应式原理

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

文章目录


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>

target指向data,key指向data的key,newValue设置data[key]的值。此处没有更深次的操作,也就是修改arr/obj内部元素时,无法响应式更新视图。

上一篇:绑定方法、非绑定方法(静态方法)、隐藏属性、property装饰器


下一篇:Proxy