vue学习 --- 第十天 Composition API
1、认识CompositionAPI2、Setup函数的基本使用3、Setup中数据的响应式4、Reactive知识点补充5、Ref知识点补充6、setup中禁用this7、Chrome插件 vue-devtool
目录:
1、认识CompositionAPI
2、Setup函数的基本使用
3、Setup中数据的响应式
4、Reactive知识点补充
5、Ref知识点补充
6、setup中禁用this
7、Chrome插件 vue-devtool
一、认识CompositionAPI
函数式写法更灵活,还可以抽取代码段出来做成hook函数复用(类似uesxxx的函数)。
二、Setup函数的基本使用
(1)基本使用:
export default{
setup(props等参数){
return{ }
}
}
(2)引入hooks函数:
import usexxx from xxxxx
export default{
setup(props等参数){
const { xxx ,yyy,zzz } = usexxx()
return{ xxx ,yyy,zzz } 或者 return{ ...usexxx() }
}
}
三、Setup中数据的响应式
template里面的响应式的ref变量会自动解包,就不用 .value来获取了。
ref/reactive都是代理
注意:
(1)reactive传入的值必须是复杂数据(比如对象,数组),ref是用简单数据也可以定义复杂数据(字符串或者数字什么的)
(2)setup里面的内容只有return的内容才会被template绑定
(3)由于reactive只能绑定复杂数据,例如下图的state,要取里面的值必须{{ state.name }},不方便,于是出现了ref
(4)这样子改值是错误的ref还没解包。改成这样子就可以修改了
(5)在template里面的变量解包意味着直接修改也没问题,不需要写成和setup里面的xx.value的形式。
(6)什么时候使用reactive,什么时候使用ref?
1.使用reactive的场景:
聚合的数据是指那些应该被放在一起统一管理的数据,如表单的用户名和密码,用在reactive里面好管理。
本地数据是指,你在本地需要先创建好,然后使用的,之后可以和其他的放开管理。
2.使用ref的场景:
从网络上获取的数据,依靠reactive是改不了的,因为使用方法是musics.xxx。但是里面是空的数组,使用改不了对象,可以靠for循环在join进去。用ref的话可以直接赋值就可以了。
(6)关于readonly:
我们从父组件向子组件传递的一般都是reactive的数据,都是引用型数据,子组件props获取并使用以后是可以在子组件的方法里面修改props接收的值的。都是子组件这样子修改props的值会导致父组件的值也被修改。如果这个props接收的值是有很多子组件都有的。那父组件不知道是哪个子组件修改的。并且也违背了vue的单向数据流的规范。只建议子组件向父组件传递emit来修改值。readonly创建的也是响应式的。
readonly注意使用的时候括号里面的内容是对象obj,就是reactive的变量名称,readonly的左边还得取个名字。
setup的emit写法:
readonly写法:
注意这个浅层解包的不同。
四、Reactive知识点补充
五、Ref知识点补充
六、setup中禁用this
七、Chrome插件 vue-devtool
手动下载,商店下载
更多推荐
所有评论(0)