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