Vue之生命周期的8个钩子函数
Vue-生命周期总结：生命是生命周期呢？当前组件在创建到销毁经历的一系列过程，称之为生命周期生命周期的分为几个阶段？每个阶段有哪些钩子函数生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁初始化阶段：有4个钩子函数 ， 触发条件是自动的beforeCreate组件即将创建，进行组件事件和生命周期的初始化项目中一般不使用，至少对于我来说是的哈有的开发者也会在这...
·
Vue-生命周期
- 生命是生命周期呢？
当前组件在创建到销毁经历的一系列过程，称之为生命周期 - 生命周期的分为几个阶段？每个阶段有哪些钩子函数
生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁
初始化阶段：有4个钩子函数 ， 触发条件是自动的
beforeCreate - 组件即将创建，进行组件事件和生命周期的初始化
- 项目中一般不使用，至少对于我来说是的哈
- 有的开发者也会在这里进行数据请求
created - 组件创建完成
- 项目中：
1） 异步请求接口数据
2） 数据修改
beforeMount - 组件即将挂载
- 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
- 项目中：
1） 异步请求接口数据
2） 数据修改
mounted - 组件挂载结束
- 使用真实DOM替换VDOM
- 项目中
1） 异步请求接口数据
2） 数据修改
3） 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
<body>
<div id="app">
<button @click="flag = false">我要销毁啦</button>
<Hello v-if="flag"></Hello>
</div>
<template id="hello">
<div>
<input type="text" v-model="money" />
<h3>{{ money }}</h3>
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.component("Hello", {
template: "#hello",
// template:"<h3> are u ready for ur future</h3>"
data() {
return {
money: 2000
};
},
//init
/* 这个阶段是组件被创建
data：选项中的数据获取不到
真实的DOM耶获取不到
再项目中基本上没什么用
但是这个阶段是一个对事件和生命周期的准备阶段
必不可少
1 组件初始化beforeCreate
data undefined
真实DOM null */
beforeCreate() {
console.log("1 组件初始化beforeCreate");
console.log("data", this.money);
console.log("真实DOM", document.querySelector("h3"));
},
/*
组件创建结束
data选项中的数据能获取到
但是取不到真实的DOM
在项目中可以修改数据和发出异步数据请求
*/
created() {
this.money = 200000; //会修改之前定义的money的值
console.log("2 created");
console.log("data", this.money);
console.log("真实DOM", document.querySelector("h3"));
},
/*
组件即将挂载
data选项中的数据能获取到
但是取不到真实的DOM
在项目中可以修改数据和发出异步数据请求
*/
beforeMount() {
//组件即将挂载
console.log("3 beforeMount");
console.log("data", this.money);
console.log("真实DOM", document.querySelector("h3"));
},
/* 可以获得data数据
也可以取到真实DOM
一般在项目中进行：
数据修改
异步数据请求
真实DOM操作
但是我们一般不推荐操作真实DOM，
推荐进行第三方库的实例化（比如静态数据渲染）*/
mounted() {
//组件挂载结束了，
this.time = setInterval(() => {
console.log(11111)
}, 1000)
document.querySelector("h3").style.background = "salmon";
console.log("4 mounted");
console.log("data", this.money);
console.log("真实DOM", document.querySelector("h3"));
},
//运行中要有触发条件才会改变 不触发是没有结果的
/* 这个阶段里
可以拿到data的数据
也可以取到真实的DOM
这个阶段进行的是VDOM和DIFF算法的对比
都是在组件内部进行的
一般我们项目中不使用 */
beforeUpdate() {
console.log("5 beforeUpdate");
console.log("data", this.money);
console.log("真实DOM", document.querySelector("h3"));
},
/*
此时 组件更新结束
通过render函数将VDOM渲染成真实DOM
然后驱动vue进行视图更新
在这个阶段里*/
updated() {
//组件更新结束
document.querySelector("h3").style.background = "blue";
console.log("6 updated");
console.log("data", this.money);
console.log("真实DOM", document.querySelector("h3"));
},
beforeDestroy() {
console.log(' beforeDestroy ')
},
destroyed() {
clearInterval(this.time)
console.log(' destroy ')
},
});
new Vue({
// el: "#app",
data: {
msg: "hello Melinda!",
flag: true,
}
}).$mount("#app");
</script>
</body>
总结：
初始化过程中在项目中使用
数据请求：created
DOM操作： mounted
数据修改： beforeMount created mounted
运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时
beforeUpdate：
内部操作 ： vdom生成和diff的对比
updated
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
销毁阶段： 有2个钩子函数
beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
destoryed： 组件销毁结束
这两个钩子函数没有什么去别，功能很相似
项目中：
这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例
组件销毁的两种方式：
- 使用$destroy()方法（内部销毁）
缺点： 会将组件的模板也保留下来 - 使用开关销毁（外部销毁）
v-if
这种类型的销毁不会留有模板
有一个钩子函数可以不写，这个钩子函数就是render 函数
- 生命周期中钩子函数的触发条件是什么？
- 项目中如何使用？
- 名词解释：
钩子函数： 钩子函数就是options配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发 - 除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象
为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的
为什么返回值是对象？
原因： 是为了符合 数据驱动 原理设计，让observer将data选项中的数据设置 getter 和 setter - 其他选项写在生命周期的上
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)