生命周期
1.初始化渲染阶段
beforeCreate 实例刚刚被建立，数据观察事件配置还没有开始，不能操作数据 和dom
created ：实例被创建完成，可以访问数据但是dom还没有渲染
beforeMounted：模板编译完成，但是还没有到dom上，
mounted：dom已经建立，可以进行dom操作,可以发送请求，发送定时器等
2.更新阶段
beforeUpdate:
update:
3.卸载阶段
beforeDestroy:做一些收尾工作，（例如：清理定时器，防止内存泄露，定时器是浏览器中，而destroyed并不能销毁异步操作）
destroy:
测试代码
<body>
<div id="root">
<p style="background-color: black; color: aliceblue;" @click="num++">{{ num }}</p>
<button @click="$destroy()">destroy~~~~</button>
<button @click="$mount()">mount</button>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
data: {
num:0,
},
beforeCreate() {
console.log("beforeCreate()");
},
created() {
console.log("created()");
},
beforeMount() {
console.log("beforeMount()");
},
mounted() {
console.log("mounted()");
},
// 更新阶段 -> 当你修改data数据时触发
beforeUpdate() {
console.log("beforeUpdate()");
},
updated() {
console.log("updated()");
},
// 卸载阶段 -> 手动销毁 vm.$destroy()
beforeDestroy() {
console.log("beforeDestroy()");
},
destroyed() {
console.log("destroyed()");
},
})
vm.$mount("#root")
</script>
</body>
vue中动画语法
目的：vue内置元素动画，给内部子元素添加过渡&动画效果（实际上给元素添加了类名）
动画基本写法1：
CSS
enter 从隐藏到显示
v-enter (刚开始)
v-enter-active (中间)
v-enter-to (结束)
leave 从显示到隐藏
v-leave (刚开始)
v-leave-active (中间)
v-leave-to (结束)
body
tranisition-groud :key=""
dom元素
动画基本写法2：
CSS
@keyframes 动画变量 {}
动画变量-leave-active
动画变量-enter-active
body
tranistion name="动画变量"
dom元素
测试案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 第一种绑定动画的方式 */
.v-leave,
.v-enter-to {
transform: translateX(0);
opacity: 1;
}
.v-leave-active,
.v-enter-active {
transition: 2s all;
}
.v-leave-to,
.v-enter {
transform: translateX(100px);
opacity: 0;
}
/* 第二种绑定动画的方式 */
.move-leave-active {
animation: move 2s linear;
}
.move-enter-active {
animation: move 2s linear reverse;
}
@keyframes move {
0% {
opacity: 1;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(100px);
}
100% {
opacity: 0;
transform: translateX(200px);
}
}
</style>
</head>
<div id="app">
<button @click="isShow = !isShow">按钮</button>
<!--
Vue提供内置元素，给内部子元素添加过渡&动画效果（实际上给元素添加了类名）
enter 从隐藏到显示
v-enter (刚开始)
v-enter-active (中间)
v-enter-to (结束)
leave 从显示到隐藏
v-leave (刚开始)
v-leave-active (中间)
v-leave-to (结束)
-->
// 第一种绑定动画
<transition-group>
<p v-if="isShow" key="1">transition(1)</p>
<p v-if="isShow" key="2">transition(2)</p>
</transition-group>
// 第二种绑定动画
<transition name="move">
<p v-if="isShow">animation</p>
</transition>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
data: {
isShow: true,
},
});
vm.$mount("#app");
</script>
</html>
</body>
</html>
vue组件的错误捕捉
1.捕获子孙组件抛出的错误
errorcaptured ：一个 Vue 组件的生命周期钩子，用于捕获子孙组件抛出的错误 当一个错误从子孙组件冒泡上来时，父组件可以通过这个钩子来捕获这个错误，并进行相应的处理。
使用： 捕获后代组件错误 在父组件中设置errorcaptured(err,vm,info)去获取子组件的错误信息
- error：错误对象，包含错误的详细信息。
- vm：发生错误的组件实例。
- info：一个包含有关错误来源的信息字符串
配置区域：在当前组件中，如果该组件的子孙组件出现错误，就会报错
<template>
<div>
</div>
</template>
<script>
export default {
name: 'YourComponentName',
errorCaptured(err, vm, info) {
// 处理单个组件的错误
console.error('组件错误捕获：', err, info);
return false; // 决定是否继续向上传播错误
}
};
</script>
2.全局组件报错
vue.config.errorHandler(errobj,errvm,errmsg)
定义：是一个全局的错误处理函数，可以在 Vue 应用的配置中设置。它可以捕获整个应用中未被处理的 JavaScript 错误、Vue 组件渲染错误以及异步操作中的错误等。
- errobj:错误对象，包含了发生错误的详细信息，如错误类型、错误消息、
- errvm:代表发生错误的 Vue 组件实例
- errmsy：错误信息字符串，通常是对错误的简短描述
目的： 错误信息发送到服务器进行集中存储和分析，以便后续排查问题，提高应用的稳定性和可靠性 也可以根据错误的类型和严重程度向用户显示适当的错误提示，提高用户体验
使用：
在 Vue 项目的入口文件（通常是 main.js）中进行配置：
import Vue from 'vue';
Vue.config.errorHandler = function (err, vm, info) {
// 在这里处理全局的组件错误
console.error('全局错误捕获：', err, info);
};
// 创建 Vue 实例等后续操作...
