关于vue.js:Vue3API学习笔记持续更新中

组合式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中的属性（变量）是响应式的 
  }
}