vue中的生命周期及钩子函数
1.什么是生命周期
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染 → 更新 → 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 js 方法，可以让我们用自己注册的 js 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 vue 的实例。
2.vue 的生命周期
生命周期函数，又叫钩子函数（生命周期钩子===生命周期函数===生命周期事件）
vue 中的生命周期函数，一般都是 成对出现。所以我们成对比较一下，他们的区别。
10 个生命周期函数 牢记！具体使用！
3.生命周期钩子函数
特点：自动调用的，只是他们的调用的时间节点 有 先 有 后。
在官网上拿了张图：
beforeCreate --- vue实例"创建前" ,注意：在这个函数中，vue中data数据中心的数据，它是读不到的。
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"哈哈哈",
num:1111
},
methods: {
},
// vue实例创建之前
beforeCreate(){
console.log('beforeCreate');
console.log(this.name);
}
</script>
输出数据中心的 name 是读不到的：
created --- vue实例"创建后",注意：在这个函数中，可以识别 到 vue中data数据中心的数据
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"哈哈哈",
num:1111
},
// vue实例创建之后
created(){
console.log("created");
console.log(this.name);
}
})
</script>
查看结果：
beforeMount --- DOM挂载之前 this.$el---此时的$el为“虚拟的”DOM节点
在视图层渲染标签:
<div id="app">
<p>{{name}}</p>
<p>{{num}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"哈哈哈",
num:1111
},
// dom挂载之前
beforeMount(){
console.log("beforeMount");
//查看dom元素
console.log(document.body.querySelector("#app").innerHTML);
}
})
</script>
dom挂载前输出结果：
mounted ---DOM挂载之后 this.$el---此时的$el为“真实的”DOM节点
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"哈哈哈",
num:1111
},
// dom挂载之后
mounted(){
console.log("mounted");
console.log(document.body.querySelector("#app").innerHTML);
}
})
</script>
查看输出结果：
beforeUpdate--- 数据更新之前（----视图层中的数据的前后变化）updated--- 数据更新之后（----视图层中的数据的前后变化）
在视图层通过 点击让 num 的数值发生改变来模拟数据更新，查看结果：
<div id="app">
<p id="num">{{num}}</p>
<button @click="num++">点击数据更新(num+1)</button>
</div>
// 数据更新前
beforeUpdate(){
console.log("beforeUpdate--数据更新前");
// 查看dom元素
console.log(document.body.querySelector("#num").innerHTML);
},
// 数据更新后
updated(){
console.log("updated--数据更新后");
// 查看dom元素
console.log(document.body.querySelector("#num").innerHTML);
}
此时数据无变化时，在控制台是看不到效果的，当我们点击按钮后：
到此这篇关于vue中的生命周期及钩子函数的文章就介绍到这了,更多相关vue中的生命周期钩子函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了关于Vue v-on指令的一些使用场景，比如监听事件、传入event参数、事件修饰符的一些场景，下面就来看看具体使用的方法吧,需要的朋友可以参考一下2021-10-10
Vue 读取HTMLCollection列表的length为0问题
这篇文章主要介绍了Vue 读取HTMLCollection列表的length为0问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。这篇文章主要介绍了vue 2.6 中 slot 的新用法,需要的朋友可以参考下2019-07-07
vue3是一个流行的前端框架,vite是一个快速的构建工具,下面这篇文章主要给大家介绍了关于vue3+vite项目跨域配置踩坑实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
组件（Component）是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于VUE3学习教程之全局组件和局部组件的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下2019-03-03
vue+element UI 文字加下划线长度多出一点点的问题
这篇文章主要介绍了vue+element UI 文字加下划线长度多出一点点的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue组件和iframe页面的相互传参问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue+iview实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论