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

悠悠 2024-03-31 15:40 87阅读 0赞

## 一、概念 ##

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

## 二、Vue对象的生命周期 ##

![在这里插入图片描述][971e3e1cd41d4ab3a94347fd99b42044.png]

## 三、生命周期钩子函数 ##

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>

## 学海无涯苦作舟 ##

[971e3e1cd41d4ab3a94347fd99b42044.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3ce18c4c733b4001ba0a75b04b2ffb3f.png