- ref封装响应式数据(原始类型)
vue3中setup()中创建的数据不再是响应式的,必须将其由ref调用后返回才是响应式数据对象,使用ref需要导入,在script中获取或修改值需要使用.value,在模板中使用时需要return
import {ref} from 'vue'
export default ({
setup () {
const count = ref(0)
return {count}
}
})
- computed计算属性
import {computed} from 'vue'
export default ({
setup () {
const count = ref(0)
const double = computed(() => {
return count.value * 2
})
return {count}
}
})
- reactive封装响应式对象
import {reactive} from 'vue
const data = reactive({})
- toRefs解构响应式对象
使用reactive封装的响应式对象数据解构后将不再是响应式,将其使用toRefs封装解构后仍然是响应式的
return {...toRefs(data)}
- vue3生命周期
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
- vue3 侦听器
传递两个参数,第一个是要侦听的数据,第二个是回调函数,可以接收两个参数,第一个是旧值,第二个是新值 注意要侦听的数据必须是响应式的或者是函数,函数返回值可以是原始数据类型
watch(data, (newV, oldV) => {
// 执行监听后的逻辑
});
- defineComponent
使用defineComponent可以在创建组件时提供代码提示
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
});
- setup()
setup函数在组件创建前执行,两个参数为props和context
props: {
msg: {
required: true,
type: String
}
},
setup(props, context) {
}
- Teleport
类似于闪现
作用在于将一个组件传送到任意一个组件中去
以下代码将会把改组件传送到id为model的元素节点上
<teleport to="#model"></teleport>
- Suspense
作用在于动态渲染异步请求的组件内容
default组件渲染请求结果 | fallback组件渲染请求结果获取到之前的内容
<Suspense>
<template #default>
<div>
<async-show />
<dog-show />
</div>
</template>
<template #fallback>
<h1>Loading !...</h1>
</template>
</Suspense>
- 捕获异常
const error = ref(null)
onErrorCaptured((e: any) => {
error.value = e
return true
})