极品vue3中setup的细节,以及定义多个响应式reactive

Posted 2022-11-18 哈比老乌龟

vue3 setup reactive
作用: 定义多个数据的响应式
const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”：会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

<script lang="ts">
import  defineComponent, reactive  from "vue";
export default defineComponent(
  name: "App",
  components: ,

  setup() 
    const obj = 
      name: "张三",
      age: 20,
      wiff: 
        name: "小红",
        age: 20,
        car: ["汽车", "房车", "游轮"],
      ,
    ;
// 作用: 定义多个数据的响应式
// const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
// 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
// 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的


// 把数据变成响应式对象
// 返回一个proxy的代理对象,被代理的目标对象就是obj对象

// sum代理对象          obj是目标对象

// 代理对象是响应式的,删除或更新或添加,操作代理对象就ok,目标对象中的数据也会随着发生变化,界面渲染,也需要代理对象
    const sum = reactive(obj);
    let dian = () => 
      sum.name = "小红";
      sum.age = 12
    ;
    return 
      sum,
      dian,
    ;
  ,
);
</script>

vue3响应式与vue2响应式的区别

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

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

vue3的响应式主要通过proxy与调用reflect
核心:
通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…
通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

  /* 
    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)
      
    );

vue3中setup的细节

一.setup执行的时机
在beforeCreate之前执行(一次), 此时组件对象还没有创建
this是undefined, 不能通过this来访问data/computed/methods / props
其实所有的composition API相关回调函数中也都不可以
二.setup的返回值
一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
返回对象中的方法会与methods中的方法合并成功组件对象的方法
如果有重名, setup优先
注意:
一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据

三.setup的参数
setup(props, context) / setup(props, attrs, slots, emit)
props: 包含props配置声明且传入了的所有属性的对象
attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrsslots:包含所有传入的插槽内容的对象,相当于this.$slots
emit: 用来分发自定义事件的函数, 相当于 this.$emit