VUE生命周期钩子

最新推荐文章于 2024-04-10 18:01:45 发布

Java小生不才

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量63

点赞数

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

本文链接：https://blog.csdn.net/qq_41596346/article/details/121101648

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

2.图示

在这里插入图片描述

3.案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期与钩子函数</title>
</head>

<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>

</html>

在这里插入图片描述

4.钩子函数

beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue
实例化时调用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在用
jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就是：在
dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。
此时页面中的{{name}}已被渲染成张三
beforeDestroy：该函数将在销毁实例前进行调用。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。

Java小生不才

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE生命周期钩子

1.生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会2.图示3.案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor
复制链接

扫一扫

专栏目录