组合式API
SetUp
注意事项
如果 data 和 methods 中定义的数据与方法 在setup中也存在,那么setup的优先级更高。
在setup中声明的方法需要return出去。
执行setup时,组件实例尚未创建,此时在setup中可以访问 :
- props
- attrs
- slots
- emit
data computed methods 及 this均无法访问
代码示例
setup(props,{attrs, slots, emit}){
}
响应性API
reactive
一般定义object(引用数据类型)的响应式数据。
Refs
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中的属性(变量)是响应式的
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。