关于vue3 compositionAPI

setup函数的参数props,context

setup(props, context) {

},

props:一般通过父组件传递过来的属性会放到props对象里,使用时可直接通过props获取
context:里面包含三个属性
attrs:所有非prop的attribute;
slots:父组件传递过来的的插槽;
emit:当我们组件内部emit时会用到

setup不可使用this!
官方文档这里有写
关于vue3 compositionAPI_第1张图片

ref的使用
将一个原始数据类型(primitive data type)转换成一个带有响应式特性的数据类型,原始数据类型共有7个,分别是:

**String
Number
BigInt
Boolean
Symbol
Null
Undefined**

ref会浅层解包,在templete上直接用{{test}}就好了

setup() {
    let test = ref(0)
    let tobj = ref({a: 1});
    // test.value = 1;
    const testFun = () => {
        test.value++;
        tobj.a.vaue = 'b';
        console.log(tobj.a)
      };
    return {
      tobj,
      robj,
      test,
      testFun,
    }
  },

假设我们在定义了用ref定义了tobj是对象,当我们在testFun改变值时,会报错
关于vue3 compositionAPI_第2张图片

reactive的使用
reactive (等价于Vue2中的Vue.observable() )来赋予对象(Object) 响应式的特性的。
关于vue3 compositionAPI_第3张图片

假设我们这么写


这时候我们发现,页面并没有发生变化!事实上,这样写没有效果的原因就在于一个响应型对象(reactive object) 一旦被销毁或展开,其响应式特性(reactivity)就会丢失。通过检查我们可以知道,虽然robj.a的值确实发生了变化,但robj.ae的类型只是一个普通的字符串(String) ,并不具有响应式特性(reactivity),故而页面也没有随着其值的变化而重新渲染。

我们可以改为


这样页面就能随着值的变化而进行渲染,但是这么代码有点过于复杂,这时候就引出了toRefs。

toRefs的使用
Vue3提供了一个新的API:toRefs,它可以将一个响应型对象(reactive object) 转化为普通对象(plain object),同时又把该对象中的每一个属性转化成对应的响应式属性(ref)。


最后总结成表格方便大家忘记特性的时候查阅

类型 是否触发页面改变 是否可以解构
ref
reactive
toRef
toRefs

你可能感兴趣的