vue实例常用的生命周期演示_vue声明周期演示-CSDN博客

本文链接：https://blog.csdn.net/zcj_dmw/article/details/115122767

本文详细解释了如何使用Vue.js实现点击增加数字的效果，并阐述了beforeCreate, created, mounted和updated四个生命周期钩子的工作原理，特别强调了updated在数据变化后的触发场景及watch机制的应用。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述
点击数字数字增加，生命周期发生变化updated被触发

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vueTest</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .myDiv{
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>

</head>
<body>
<div id="app">
    <a href="##" @click="sumCount">{{count}}</a>
</div>
<script type="text/javascript">
var app=new Vue({
    el:"#app",
    data:{
      count:0
    },
    methods:{
        sumCount:function (){
            this.count++;
        }
    },
    beforeCreate:function (){
        console.log("组件被创建之前..");
    },
    created:function(){
        console.log("组件被创建..");
    },
    mounted:function(){
        console.log("组件被挂载..");
    },
    updated:function(){
        console.log("组件被更新..");
    },
    watch:{
        count:function (newValue,oldValue){
            console.log("新值："+newValue+",旧值："+oldValue);
        }
    }
});

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

注意点
1.第一次页面加载，会触发 4 个生命钩子：创建前/创建后、挂载前/挂载后
2.页面何时被渲染？在 beforeMounted 时它执行了 render 函数，对 $el 和 data 进行了初始化，但此时还是挂载到虚拟的 DOM 节点，然后它在 mounted 时就完成了 DOM 渲染，这时候我们一般还进行 Ajax 交互。
3.update在页面被重新渲染时触发
4.watch机制，语法类似定义方法，但是必须传入两个参数(newValue,oldValue)，对data中被更新的数据进行检查