vue中的生命周期及钩子函数

更新时间：2022年01月24日 14:34:07 作者：huxiaoxiao.

这篇文章主要介绍了vue中的生命周期及钩子函数,Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染,下面文章详细介绍,需要的朋友可以参考一下

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中的生命周期钩子函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3组合式api创建单文件组件的写法
Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性,本文为大家介绍了vue3利用组合式api创建单文件组件的方法,感兴趣的可以了解下
2023-08-08
基于vue3+antDesign2+echarts 实现雷达图效果
这篇文章主要介绍了基于vue3+antDesign2+echarts 实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
vue 解决循环引用组件报错的问题
今天小编就为大家分享一篇vue 解决循环引用组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue电商网站首页内容吸顶功能实现过程
电商网站的首页内容会比较多，页面比较长，为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见，所以需要一个吸顶导航的效果。目标:完成头部组件吸顶效果的实现
2023-04-04
利用Vite2和Vue3实现网站国际化的全过程
vite2已经出来一段时间了,最近没忍住尝试了一下,这篇文章主要给大家介绍了关于利用Vite2和Vue3实现网站国际化的相关资料,需要的朋友可以参考下
2021-08-08
Vue动态加载图片在跨域时无法显示的问题及解决方法
这篇文章主要介绍了解决VUE动态加载图片在跨域时无法显示的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
解决vue单页面应用中动态修改title问题
这篇文章主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
如何修改vue-treeSelect的高度
这篇文章主要介绍了如何修改vue-treeSelect的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue实现购物车计算总价功能
这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue前端项目自适应布局的简单方法
最近项目开发中遇到一个需求,需要实现宽度自动适应,所以下面这篇文章主要给大家介绍了关于Vue前端项目自适应布局的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06