• Vue Hooks


    Vue Hooks Api 

      1. setup()方法是 Vue3.0 中引入的一个新的组件选项,setup 组件逻辑的地方。setup 是在组件实例被创建时, 初始化了 props 之后调用,处于 created 前。也就是beforeCreate之后created之前进行的初始化。 我们从上面的所有例子能发现,setup() 和 data() 很像,都可以返回一个对象,而这个对象上的属性则会直接暴露给模板渲染上下文

                 

      2. reactive()方法可以理解为vue2中的data,传入一个对象通过observe方法让传入的对象变成双向绑定的数据。 ref()方法和reactive方法差不多,不过ref定义的属性只能是基本数据类型。本来我认为也是通过observe方法进行的处理,我百度了一下发现基本数据类型是通过一个方法进行的Proxy代理,这也是为什么ref生成的数据进行修改时要进行.value操作,引用数据类型是通过reactive这个方法进行的处理。

       3. toRef()是将个对象 A 中的某个属性 x 转换为响应式数据,其接收两个参数,第一个参数为对象 A,第二个参数为对象中的某个属性名 x。 ref()和toRef()的区别: 参数不同:ref()接收一个 js 基本数据类型的参数;toRef()接收两个参数,第一个为对象,第二个为对象中的某个属性; 原理不同:ref()是对原数据的一个深拷贝,当其值改变时不会影响到原始值;toRef()是对原数据的一个引用,当值改变时会影响到原始值; 响应性不同:ref()创建的数据会触发 vue 模版更新;toRef()创建的响应式数据并不会触发 vue 模版更新,所以toRef()的本质是引用,与原始数据有关联。

                 

    toRefs()接收一个对象作为参数,并遍历对象身上的所有属性,然后逐个调用toRef()执行。以此,将响应式对象转化为普通对象,便于在模版中可以直接使用属性。

              

  • 相关阅读:
    [NOI Online #3 提高组]
    Luogu P3491 [POI2009]SLW-Words
    AtCoder Grand Contest 043
    Luogu P5607 [Ynoi2013]无力回天NOI2017
    AtCoder Grand Contest 041
    Luogu P5070 [Ynoi2015]即便看不到未来
    BZOJ 4367: [IOI2014]holiday假期
    BZOJ 3571: [Hnoi2014]画框
    BZOJ 4456: [Zjoi2016]旅行者
    BZOJ 1111: [POI2007]四进制的天平Wag
  • 原文地址:https://www.cnblogs.com/7fls/p/15218997.html
Copyright © 2020-2023  润新知