Vue3-API学习笔记(持续更新中...)

Posted 2021-09-04 Power

组合式API

SetUp

graph LR
A[setup]  --> B[参数]
    B -->|Props| D[Props是响应式的,故不能解构]
    B -->|context| E[context是一个普通的JS对象,<br/>包括了组件的三个属性:attrs, slots, emit] 

注意事项
如果 data 和 methods 中定义的数据与方法 在setup中也存在，那么setup的优先级更高。
在setup中声明的方法需要return出去。
执行setup时,组件实例尚未创建，此时在setup中可以访问 :

• props
• attrs
• slots
• emit

data computed methods 及 this均无法访问

代码示例

 setup(props,{attrs, slots, emit}){
 
 }

响应性API

graph TB
A[响应性基础API] -->B[reactive] 
A--> D[readonly]
A--> E[isProxy]
A--> F[isReactive]
A--> G[isReadonly]
A--> H[toRaw]
A--> J[markRaw]
A--> K[shallowReactive]
A--> L[shallowReadonly]
style A fill:#2ff,fill-opacity:0.1,stroke:#faa,stroke-width:4px

reactive

一般定义object(引用数据类型)的响应式数据。

Refs

graph TB
A[Refs] -->B[ref] 
A--> C[unref]
A--> D[isRef]
A--> E[toref]
A--> F[toRefs]
A--> G[isRef]
A--> H[customRef]
A--> J[shallowRef]
A--> K[triggerRef]
style A fill:#2ff,fill-opacity:0.1,stroke:#faa,stroke-width:4px

ref

一般用来定义（数字，字符串）响应式数据，也可以用来定义响应式对象(object/Array)。
如果使用ref来定义对象，那么在ref内部会自动将该对象转为reactive对象。

unref

引用自官网:
如果参数是一个 ref，则返回内部值，否则返回参数本身。
这是 val = isRef(val)* ? val.value : val 的语法糖函数。

isRef

检查值是否为一个 ref 对象，返回布尔值。

toRef

用于将源响应式对象的某一个property创建为一个新的ref,
然后这个新的ref将与原来的property保持引用关系,
可单独来操作这个新的ref，达到修改源对象指定property的目的。

toRefs

将源对象中的property包装成ref对象 并且 将这些ref对象的普通对象返回。
reactive定义的对象被 toRefs 包装以后，那么该对象的每一个属性都将是响应式的。
例子：

<div>
    <p>{{name}}</p>
    <p>{{age}}</p>
</div>
----------------------------------------------------------------------
setup(){
  const obj= reactive({
    name:\'张三\',
    age:11
  })
  // 不丢失响应性的情况下对返回的对象进行分解/扩散： 
  setTimeout(() => {
    obj.name = \'张五\'
    obj.age = 15 
  }, 2000);
  return{
    ...toRefs(obj) // 模板中使用的obj中的属性（变量）是响应式的 
  }
}