vue中的生命周期和钩子函数是什么

本文主要解释“vue中的生命周期和钩子函数是什么”。本文的解释简单明了，易学易懂。接下来，请跟随边肖的思路，一起学习学习“vue中的生命周期和钩子函数是什么”！

00-1010Vue实例有一个完整的生命周期，即从创建开始、初始化数据、编译模板、挂载Dom、渲染更新渲染、卸载等一系列过程。我们称之为Vue的生命周期。通俗地说，就是Vue实例从创建到销毁的过程，也就是生命周期。

在vue的整个生命周期中，它提供了一系列的事件，允许我们在事件触发时注册js方法，用我们注册的js方法控制整个情况。在这些事件响应方法中，这直接指向Vue的实例。

00-1010生命周期函数，也叫hook函数(生命周期hook==生命周期函数==生命周期事件)

vue中的生命周期函数通常成对出现。让我们成对比较它们的差异。

牢记10个生命周期功能！具体用途！

00-1010特点：自动呼叫，但是他们呼叫的时间节点是先有后有。

在vue实例创建之前，注意：在这个函数中，vue中的数据中心的数据不能被读取。

scriptsrc='。/js/vue . js '/脚本

脚本

letvm=NewVue({ 0

el:'#app '，

数据：{

名称： '哈哈哈'，

num:1111

},

methods:{

},

//在创建//vue实例之前

before CREAte(){ 0

console . log(' BeforeCreate ')；

console . log(this . name)；

}

/脚本输出数据中心的 name 是读不到的：

ng>

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中的生命周期和钩子函数是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！