vue3.0

#博学谷IT学习技术支持#

目录

1.组合api-setup函数

2.组合API-reactive函数

3.组合API-ref函数

4.组合API-computed函数

5.组合API-watch函数

6.组合API-ref属性

7.组合API-父子通讯

8.组合API-依赖注入


1.组合api-setup函数

从组件生命周期来看,它的执行在组件实例创建之前vue2.x的beforeCreate执行。

这就意味着在setup函数中 this 还不是组件实例,this 此时是 undefined

在模版中需要使用的数据和函数,需要在 setup 返回。

认识vue3.0生命周期钩子函数

setup 创建实例前

onBeforeMount 挂载DOM前

onMounted 挂载DOM后

onBeforeUpdate 更新组件前

onUpdated 更新组件后

onBeforeUnmount 卸载销毁前

onUnmounted 卸载销毁后

2.组合API-reactive函数

reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。

3.组合API-ref函数

ref函数,常用于简单数据类型定义为响应式数据

再修改值,获取值的时候,需要.value

在模板中使用ref申明的响应式数据,可以省略.value

4.组合API-computed函数

computed函数,是用来定义计算属性的,计算属性不能修改。


5.组合API-watch函数

定义计算属性:

watch函数,是用来定义侦听器的

监听ref定义的响应式数据

监听多个响应式数据数据

监听reactive定义的响应式数据

监听reactive定义的响应式数据,某一个属性

深度监听

默认执行

6.组合API-ref属性


7.组合API-父子通讯

子传父:

8.组合API-依赖注入

使用场景:有一个父组件,里头有子组件,有孙组件,有很多后代组件,共享父组件数据。

总结:

provide函数提供数据和函数给后代组件使用

inject函数给当前组件注入provide提供的数据和函数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容