Vue3响应式的原理

Vue3响应式的原理

      • Vue3中实现响应式原理
      • 模拟Vue3响应式
        • 1. 准备环境
        • 2 js创建person对象
        • 3 proxy对象使用
        • 4.使用Reflect对象修改值
      • 总结

Vue3中实现响应式原理

Vue3中使用ES6中的Proxy来实现响应式,并通过Reflect操作源对象内部的数据

模拟Vue3响应式

1. 准备环境

创建一个index.html

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite Apptitle>
head>
<body>
  <div id="app">div>
  <script type="module" src="/src/main.js">script>
body>
html>
2 js创建person对象

<script>
    let person = {
        name:"张三",
        age: 18
    }
</script>
3 proxy对象使用

new Proxy(object,handler)
object 要代理的对象
handler 处理动作

const p = new Proxy(person,{
        get(target,propName){
            console.log("获取"+propName+"属性值")
            return target[propName]
        },
        set(target,propName,value){
            console.log(propName+"属性值改变了")
            target[propName] = value;
        },
        deleteProperty(target, propName) {
            console.log(propName+"属性值删除了")
            return delete target[propName]
        }
    });
4.使用Reflect对象修改值
const p = new Proxy(person,{
        get(target,propName){
            console.log("获取"+propName+"属性值")
            //return target[propName]
            return Reflect.get(target,propName)
        },
        set(target,propName,value){
            console.log(propName+"属性值改变了")
            //target[propName] = value;
            Reflect.set(target,propName,value)
        },
        deleteProperty(target, propName) {
            console.log(propName+"属性值删除了")
            //return delete target[propName]
            return Reflect.deleteProperty(target,propName)
        }
    });

总结

  1. Vue2中使用Object对象的功能实现响应式,不能对对象直接增加属性和对数组指定角标修改,需要使用变通方法修改
  2. Vue3中使用Proxy+Reflect实现响应式,不存在vue2中的问题

你可能感兴趣的:(前端,vue.js,javascript,前端)