系列文章目录
第一章
第二章
同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令
第三章
第四章
【TypeScript】在vue3中遇到的问题及解决方案,未完待续
第五章
第六章
目录
前言
从Vue2转换到Vue3
这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档,我认为这是一种最有用的方式来查看事情将如何变化,以及我们如何使用它们。
- beforeCreate -> use setup()
- created -> use setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
一、新的调试钩子函数
- onRenderTracked
- onRenderTriggered
这两个事件都带有一个DebuggerEvent,它使我们能够知道是什么导致了Vue实例中的重新渲染。
export default {
onRenderTriggered(e) {
debugger
// 检查哪个依赖项导致组件重新呈现
}
}
二、使用周期函数
注意
1.与Vue3中的大多数功能一样,生命周期钩子是我们必须导入到项目中的东西,这是为了帮助使项目尽可能轻巧。
2.路由跳转
template中:
<router-link to="/">
<el-button type="primary" size="large">返回首页</el-button>
</router-link>
3.toRefs转换为响应式数据:如下代码
简写导出对象
完整代码
<template>
<div class="error-page">
<div class="error-handle">
<router-link to="/">
<el-button type="primary" size="large">返回首页</el-button>
</router-link>
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
<p>{{id}}--{{name}}--{{num}}</p>
<el-button type="primary" @click="change1">点击</el-button>
</div>
</div>
</template>
<script>
import {
useRouter
} from "vue-router";
import {
reactive,
toRefs,
computed,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onActivated,
onDeactivated,
onErrorCaptured
} from 'vue';
export default {
name: "403",
setup() {
// reactive 数据双向绑定
const data = reactive({
id: 1,
name: '名称',
num: computed(() => data.id += 5) //计算属性
});
const router = useRouter();
const goBack = () => {
router.go(-1);
};
// 方法
const methods = {
change1() {
alert("点击")
},
};
// 在组件内容被渲染到页面之前自动执行的函数
onBeforeMount(() => {
//alert("onBeforeMount")
});
// 在组件内容被渲染到页面之后自动执行的函数
onMounted(() => { // 绑定后自动执行
//alert("onMounted")
});
// 当data中的数据发生变化前执行
onBeforeUpdate(() => {
//alert("onBeforeUpdate");
});
// 当data中的数据发生变化后执行
onUpdated(() => {
//alert("onUpdated");
});
// 解除绑定前执行的函数
onBeforeUnmount(() => {
//alert("onBeforeUnmount");
});
// 解除绑定后执行的函数
onUnmounted(() => {
//alert("onUnmounted");
});
onActivated(() => {
// ...
})
onDeactivated(() => {
// ...
})
onErrorCaptured(() => {
// ...
})
return {
// toRefs转换为响应式数据
...toRefs(data),
...methods,
goBack,
};
}
};
</script>
<style scoped>
</style>