Vue3 第二节 Vue3的响应式

1.Vue3的响应式原理

2.ref函数和reactive函数的对比

3.setup注意点

一.Vue3的响应式原理

1.Vue2.x中的响应式原理

① 实现原理

• 对象类型：通过Object.defineProperty() 对属性的读取，修改进行拦截（数据劫持）
• 数组类型：通过重写更新数据的一系列方法来实现拦截，对数组变更方法进行包裹

② 存在问题

• 新增属性，删除属性，界面不会更新
• 直接通过下标修改数组，界面不会自动更新

2.Vue3.x的响应式原理

① 实现原理

• 通过Proxy（代理）：拦截对象中任意属性的变化，包括对属性的读写，属性的添加，属性的删除
•  通过Reflect（反射）：对源对象的属性进行操作

    const p = new Proxy(person, {
      get (target, propName) {
        console.log('读取', target, propName)
        return Reflect.get(target, propName)
      },
      set (target, propName, value) {
        console.log('修改', value)
        return Reflect.set(target, propName, value)
      },
      deleteProperty (target, propName) {
        return Reflect.deleteProperty(target, propName)
      }
    })

二.ref函数和reactive函数的对比

① 从定义数据的角度

• ref用来定义：基本类型数据
• reactive用来定义：对象（数组）数据类型
• ref也可以用来定义对象（或数组）类型的数据，它内部会自动通过reactive转为代理对象

② 从原理角度对比

• ref通过Object.defineProperty（）的get与set来实现响应式（数据劫持）
• reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作元对象内部的数据

③ 从使用角度对比

• ref定义的数据：操作数据需要.value，读取模板的时候模板中直接读取，不需要用.value
• reactive定义的数据，操作数据与读取数据均不需要.value

三.setup使用两个注意点

• setup执行的时机：在beforeCreate之前执行一次，this是undefined,  setup中不能使用this
• setup的参数

 

① props：值为对象，包含组件外部传递过来，且组件内部声明接收了的属性

 

② context:上下文

•  attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
• slots:收到的插槽内容，相当于this.$slots
• emit:分发自定义事件的函数，相当于this.$emit