组合式API

SetUp

graph LRA[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 TBA[响应性根底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 TBA[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中的属性（变量）是响应式的   }}