let vm = new Vue({
el: "#app",
// 1)初始化methods中的方法和初始化生命周期的钩子函数
beforeCreate() {
// 不能获取data中的数据
console.log("beforeCreate.....");
},
// 2)注入一些数据,初始化响应式系统,响应式系统是发生创建组件实例阶段
created() {
console.log("created.....");
// 1)发ajax请求 2)获取路由参数...
},
// 找模板 先看有没有el选项,如果有,再看有没有template选项,如果有,template就是模板,如果没有,el的Outhtml就是模块。会把模板变成render函数,内部会调用render函数,生成虚拟DOM。虚拟DOM转化成真实DOM,进行挂载。
beforeMount() {
一般不用
console.log("beforeMount.....");
},
// 1)发ajax请求 2)开定时器 3)DOM操作 4)建立ws连接 5)实例化echarts实例 ....
mounted() {
console.log("mounted.....");
},
// 数据变化,一定会触发beforeUpdate
// 监听器:数据变化,也可以监听到
// 监听器能实例的逻辑,按理说在beforeUpdate和updated也可以实现,只不过代码逻辑就复杂
// 在React中,是没有监听器的,在React中监听器就是靠ComponentUpdated
beforeUpdate() {
console.log("beforeUpdate.....");
},
// 要生成新的虚拟DOM,新的虚拟DOM和老的虚拟DOM就会进行DIFF算法对比差异
// 通过patch,会找到两个虚拟DOM树的最小差异,找到后,进行异步更新
// nextTick有什么用?....
// 当v-for时,为什么要加key? 有了唯一的key,就可以尽快的找到的新旧虚拟DOM树的差异,快速更新DOM。
updated() {
// 基本上不用,假如没有监听器,数据变化我们要做一些事件,只能像React一样,逻辑只能写在Updated中
// 在updated中不能更新数据了,会导致死循环
console.log("updated.....");
},
// 什么操作会导致组件销毁?
// 1)手动调用 $destory()
// 2)路由切换
// keep-alive 动态组件 ....
beforeDestroy() {
// 清空定时器 解除事件绑定 清缓存...
console.log("beforeDestroy.....");
},
// 移除当前组件的watcher
// 移除所有的子组件
// 移除所有监听器
// 数据变了,响应式系统就失效了,DOM就无法更新了。
destroyed() {
console.log("destroyed.....");
},
});
</script>