Vue学习总结（四）——Vue的生命周期

最新推荐文章于 2023-09-25 17:31:49 发布

田小江爱分享

最新推荐文章于 2023-09-25 17:31:49 发布

阅读量143

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/third_/article/details/118423605

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1、生命周期：事物从诞生到消亡的整个过程。

2、Vue的生命周期：每个Vue实例创建到显示再到废弃的过程就是vue的生命周期。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{text}} {{counter}}</h2>
    <!-- 可以直接在click事件中定义简单实现，但是不建议这么做。
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!--  通常写法是下面这样的，@ 是v-on的语法糖
    <button @click="add">+</button> -->
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            text: '当前计数：',
            counter: 0
        },
        methods: {
            add: function() {
                this.counter ++;
                console.log('add被执行');
            },
            sub:function() {
                this.counter --;
                console.log('sub被执行');
            }
        },
        // 生命周期钩子--created
        created: function() {
            console.log('created');
        },
        // 生命周期钩子--mounted
        mounted: function() {
            console.log('mounted');
        }
    })
</script>
</body>

如在之前的计数器代码中增加created和mounted，我们没有调用这两个生命周期钩子，这两个函数也被执行了，可以从日志中看到。