生命周期函数：

最新推荐文章于 2022-07-01 10:33:56 发布

小陈加油！

最新推荐文章于 2022-07-01 10:33:56 发布

阅读量141

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_52299403/article/details/112756647

版权

重点

<body>
    <div id='app'>
        {{msg}}

        <div>1231</div>
        {{num}}

        <input type="text" v-model="msg">
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg:"hello word",
            num:1
        },
        // 生命周期函数  数据还未初始化  一般用来重定向
        beforeCreate() {
            console.log("这个是我们接触的第一个生命周期函数");

            console.log(this.msg);
        },
        // 一般数据请求  数据初始化
        created() {
            console.log("这个是我们接触的第二个生命周期函数");
            console.log(this.msg);
        },
        // 虚拟dom就绪，但是未挂载到页面  
        beforeMount() {
            console.log("这个是我们接触的第3个生命周期函数  beforeMount");
            debugger
        },

        // dom已经挂载更新  关于dom的操作都在这里面
        mounted() {
            console.log("这个是我们接触的第4个生命周期函数  mounted");
        },
        // 此时data里面数据是新的，但是页面未更新， 第一次没有更新不走该生命周期函数,会多次触发
        // 避免异步里面修改数据
        beforeUpdate() {
            console.log("这个是我们接触的第5个生命周期函数  beforeUpdate");

            setInterval(()=>{
                this.num++
            },1000)
           
        },

        updated() {
            console.log("这个是我们接触的第6个生命周期函数  updated");
        },
        // 组件销毁前，主要用于清空计时器
        beforeDestroy() {
            console.log("这个是我们接触的第7个生命周期函数  updated");
        },

        destroyed() {
            console.log("这个是我们接触的第8个生命周期函数  updated");
        },
    })

        // vm.$mount("#app")

    </script>
</body>

小陈加油！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生命周期函数：

生命周期函数：<body> <div id='app'> {{msg}} <div>1231</div> {{num}} <input type="text" v-model="msg"> </div> <script> const vm = new Vue({ el: '#app', dat
复制链接

扫一扫