零基础入门JavaWeb——Vue的生命周期

最新推荐文章于 2024-05-15 20:43:52 发布

程序员丶星霖

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量231

点赞数

分类专栏：前端技术文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hunterarley/article/details/128203103

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、概念

在编程领域，生命周期是一个很常见的概念。一个对象从创建、初始化、工作、释放、清理和销毁，会经历很多环节的演变。

二、Vue对象的生命周期

在这里插入图片描述

三、生命周期钩子函数

Vue允许在特定的生命周期环节中通过钩子函数加入我们的代码。

3.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <p id="content">{{message}}</p>
    <button @click="changeValue">点我</button>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "data":{
            "message":"hello"
        },
        "methods":{
            "changeValue":function(){
                this.message = "new hello";
            }
        },

        // 1.实例创建之前
        "beforeCreate":function(){
            console.log("beforeCreate:"+this.message);
        },

        // 2.实例创建完成
        "created":function(){
            console.log("created:"+this.message);
        },

        // 3.数据挂载前
        "beforeMount":function(){
            console.log("beforeMount:"+document.getElementById("content").innerText);
        },

        // 4.数据已经挂载
        "mounted":function(){
            console.log("mounted:"+document.getElementById("content").innerText);
        },

        // 5.数据更新前
        "beforeUpdate":function(){
            console.log("beforeUpdate:"+document.getElementById("content").innerText);
        },

        // 6.数据更新之后
        "updated":function(){
            console.log("updated:"+document.getElementById("content").innerText);
        }
    });
</script>
</body>
</html>