vue3中常用api

本文介绍了Vue3中的关键概念和技术,包括createApp的使用、依赖注入、自定义指令、全局混入、全局对象管理、异步更新机制、响应式数据处理、父子组件通信、静态数据处理以及组件交互方式如slot等。
摘要由CSDN通过智能技术生成

1.createApp() ==> 创建一个应用实例。

说明:等于vue2的 ==> new Vue()
所以场景:写插件(封装全局组件和使用)

2.provide / inject ==> 依赖注入

说明: 其实就是传值
场景:某一个父组件传值 到后代组件,如果层级过多传递麻烦,所以使用。
缺点:不好维护和查询数据来源

3.directve

说明:自定义指令
场景:后台管理系统中的按钮权限控制(一个用户拥有某些权限,但是只能查看和修改,不能删除)

4.minix

说明:1.全局混入 2.局部
场景:可以添加生命周期,我在小程序的分享功能会用到
缺点:不好维护和查询数据来源

5.app.config.globalProperties

说明:获取vue这个全局对象和方法
场景:自己封装插件的时候需要把方法添加到对象中

6.nextTick

说明: 等待下一次dom更新刷新的工具方法:nextTick返回一个Pormise,回调函数放在Pormise中,所以是异步执行的
场景:就是把dom要更新,那么vue是数据驱动dom,所以数据的赋值就是在nextTick进行

7.computed

说明:计算属性
场景:有缓存

8.reactive、ref

说明:来定义数据和vue2的data类似

9.watch

说明: 监听(vue3不需要深度监听)

10.markRaw()

说明:不被new Proxy代理,说白了就是静态数据

11.defineProps()

说明: 父组件传递的值,子组件所以setup的形式,需要用defineProps接收

12.defineEmits()

说明: 当前组件使用setup的形式,自定义事件需要用defineEmits

13.slot

说明:氛围1. 匿名 2.具名 3.作用域
场景:后台管理系统,右侧是不固定内容,那么右侧及时slot

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3APIVue2有些不同,以下是一些用的Vue3 API的使用方法: 1. `createApp`: 用于创建Vue实例,接收一个根组件作为参数。 ``` import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') ``` 2. `ref`: 用于创建响应式数据,可以在模板和JSX使用。 ``` import { ref } from 'vue' const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 ``` 3. `computed`: 用于创建计算属性,可以在模板和JSX使用。 ``` import { computed } from 'vue' const count = ref(0) const doubleCount = computed(() => count.value * 2) console.log(doubleCount.value) // 0 count.value++ console.log(doubleCount.value) // 2 ``` 4. `watch`: 用于监听数据的变化。 ``` import { watch } from 'vue' const count = ref(0) watch(count, (newVal, oldVal) => { console.log(`count changed from ${oldVal} to ${newVal}`) }) count.value++ // count changed from 0 to 1 ``` 5. `onMounted`: 用于在组件挂载后执行一些操作。 ``` import { onMounted } from 'vue' onMounted(() => { console.log('mounted') }) ``` 6. `onUnmounted`: 用于在组件卸载前执行一些操作。 ``` import { onUnmounted } from 'vue' onUnmounted(() => { console.log('unmounted') }) ``` 7. `watchEffect`: 用于监听响应式数据的变化并执行一些操作。 ``` import { watchEffect } from 'vue' const count = ref(0) watchEffect(() => { console.log(`count is ${count.value}`) }) count.value++ // count is 1 ``` 以上是一些用的Vue3 API的使用方法,更多API可以查看官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值