谷粒商城35 - 前端基础 VUE-生命周期与钩子函数

墨蓝 2023-03-04 08:14 11阅读 0赞

### 文章目录 ###

*   *   *  生命周期
         *  生命周期与钩子函数的代码示例

### 生命周期 ###

![20200802150630535.png][]  
官方文档关于生命周期的介绍  
https://cn.vuejs.org/v2/guide/instance.html  
生命周期的完整图片:  
![format_png][]  
在不同的生命周期中,会触发不同的钩子函数

### 生命周期与钩子函数的代码示例 ###

使用如下的代码 ,进行生命周期id示例

<body>
        <div id="app">
            <span id="num">{
       {num}}</span>
            <button @click="num++">赞！</button>
            <h2>{
       {name}}，有{
       {num}}个人点赞</h2>
        </div>
    
        <script src="../node_modules/vue/dist/vue.js"></script>
        
        <script> let app = new Vue({ el: "#app", data: { name: "张三", num: 100 }, methods: { show() { return this.name; }, add() { this.num++; } }, beforeCreate() { console.log("=========beforeCreate============="); console.log("数据模型未加载：" + this.name, this.num); console.log("方法未加载：" + this.show()); console.log("html模板未加载：" + document.getElementById("num")); }, created: function () { console.log("=========created============="); console.log("数据模型已加载：" + this.name, this.num); console.log("方法已加载：" + this.show()); console.log("html模板已加载：" + document.getElementById("num")); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, beforeMount() { console.log("=========beforeMount============="); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, mounted() { console.log("=========mounted============="); console.log("html模板已渲染：" + document.getElementById("num").innerText); }, beforeUpdate() { console.log("=========beforeUpdate============="); console.log("数据模型已更新：" + this.num); console.log("html模板未更新：" + document.getElementById("num").innerText); }, updated() { console.log("=========updated============="); console.log("数据模型已更新：" + this.num); console.log("html模板已更新：" + document.getElementById("num").innerText); } }); </script>
    </body>

页面刚加载时 , 控制台打印如下 , 代表在不同的生命周期, 触发了不同的函数  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
每次点击按钮, 控制台都会打印如下, 代表触发的钩子函数  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]

[20200802150630535.png]: /images/20230208/5194302d19764ba0b5989963dedb6545.png
[format_png]: /images/20230208/76ed302a5eb24b20b4b42d8fb4a484d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/78e6d3c70a0842ef87e99a737c0b242f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/7316c205f7ed462e8e05139095ac7e82.png