vue生命周期的钩子函数介绍

逸疏iiii

已于 2023-09-12 19:29:51 修改

阅读量79

点赞数

文章标签： vue.js javascript 前端

于 2023-08-29 11:17:25 首次发布

本文链接：https://blog.csdn.net/weixin_51771816/article/details/132547267

版权

文章目录

前言
一、生命周期的简单介绍
二、生命周期中的钩子函数

前言

在vue中生命周期的学习对我们之后的学习和理解非常重要本片将讲解vue生命周期中的钩子函数

一、生命周期的简单介绍

vue的生命周期其实就是一个vue实例从创建到销毁的一个过程

二、生命周期中的钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="box">name:{{ name }}</div>
        <ul>
            <li v-for="( item,index ) in arr" :key="index">{{ item }}</li>
        </ul>
        <button @click="name='翠花'">name=翠花</button>
    </div>
    <button onclick="destroy()">销毁</button>
    <script>
        // 虚拟dom
        // { tagname:"div",attr:{ class:"box" },chilren:{} }
        // { tagname:"div",attr:{ class:"box1" },chilren:{} }
       var vm =  new Vue({
            // el:"#app",
            data:{
                name:"狗蛋",
                arr:["关羽","吕布","ll"]
            },
            // 1.组件实例创建之前
            beforeCreate() {
                console.group();
                console.log("el",this.$el); //undefined
                console.log("data",this.$data); //undefined
                console.log("data",this.name); //undefined
                console.groupEnd()
            },

            // 2.创建完成  不能操作节点，但是可以操作数据，所以可以发送请求等
            created() {
                console.group();
                console.log("el",this.$el); //undefined
                console.log("data",this.$data); // {}
                console.log("data",this.name); //狗蛋 
                console.groupEnd()
            },
            // 3.挂载之前
            beforeMount() {
                console.group();
                console.log("el",this.$el); // 找到了节点，但是没有完成挂载
                console.log("data",this.$data); // {}
                console.log("data",this.name); //狗蛋 
                console.groupEnd()
            },
            // 4.挂载完成  都可以使用  
            mounted() {
                console.group();
                console.log("el",this.$el); // 变量解析了
                console.log("data",this.$data); // {}
                console.log("data",this.name); //狗蛋 
                console.groupEnd()
            },
            // 5.视图更新之前(data的数据改变)
            beforeUpdate() {
                console.log(this.name);
                console.log("beforeUpdate");
            },
            // 6.视图更新完成
            updated(){
                console.log(this.name);
                console.log("updated");
            },
            // 7.销毁之前
            beforeDestroy() {
                console.log("beforeDestroy");
            },
            // 8.销毁完成
            destroyed() {
                console.log("destroyed");
            },
            
            
        }).$mount("#app")
        function  destroy(){
            vm.$destroy();//销毁实例
        }

    </script>
</body>
</html>