Vue--生命周期

生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程，比如，需要设置数据监听，编译模版，将实例挂载到DOM 并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。

下图展示了实例的生命周期

 生命周期分为三大阶段：初始化显示，更新显示，销毁Vue实例。

初始化阶段的钩子函数：

  • beforeCreate()实例创建前：数据和模版均未获取到
  • created()实例创建后：最早可访问到data数据，但模版未获取到
  • beforeMount()数据挂载前：模版已获取到，但是数据未挂载到模版上
  • mounted()数据挂载后：数据已挂载到模版中

更新阶段的钩子函数：

  • beforeUpdate()模版更新前：data改变后，更新数据模版前调用，在修改 data 中的变量前触发
  • updated()模版更新后：将data渲染到数据模版中，在修改 data 中的变量后触发

销毁阶段的钩子函数：

  • beforeDestroy()实例销毁前
  • destroyed()实例销毁后

beforeCreate()

 打开下面的代码

复制代码
<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "邹邹"
            },
            beforeCreate() {
                // Vue实例创建前被调用，数据和模版均未获取到
                console.log('beforeCreate()', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>
复制代码

打开浏览器控制台查看

 可以看到this.$el和this.$data都没有被找到，因为是在实例创建前被调用的。

created()

复制代码
<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "邹邹"
            },
            created() {
                // Vue实例创建后，最早可以获取到data数据的钩子，但是模版未获取到
                console.log('created()', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>
复制代码

打开控制台查看

 beforeMount()和mounted()

复制代码
<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        new Vue({
            // el: "#app",
            data: {
                message: "邹邹"
            },
            beforeMount() {
                // 数据挂载之前，获取到了模版，但是数据还未挂载到模版上
                console.log('beforeMount()', this.$el, this.$data)
            },
            mounted() {
                // 数据已经挂载到模版上
                console.log('mounted()', this.$el, this.$data)
            },
        }).$mount('#app') // 如果实例中没有el选项，可使用$mount()手动挂载DOM
    </script>
</body>

</html>
复制代码

打开浏览器控制台查看

 beforeUpdate()和updated()

复制代码
<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        const vm = new Vue({
            // el: "#app",
            data: {
                message: "邹邹"
            },
            beforeUpdate() {
                // 当data数据更新之后，去更新模版中的数据前调用,要使用innerHTML查看
                console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
            },
            updated() {
                // 当data数据更新之后，去更新模版中的数据后调用
                console.log('updated()', this.$el.innerHTML, this.$data)
            },
        }).$mount('#app') // 如果实例中没有el选项，可使用$mount()手动挂载DOM
    </script>
</body>

</html>
复制代码

beforeDestroy()和destroyed()

复制代码
<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        const vm = new Vue({
            // el: "#app",
            data: {
                message: "邹邹"
            },
            beforeDestroy() {
                // 销毁 Vue 实例之前调用
                console.log('beforeDestroy()', this.$el.innerHTML, this.$data)
            },
            destroyed() {
                // 销毁 Vue 实例之后调用
                console.log('destroyed()', this.$el.innerHTML, this.$data)
            },
        }).$mount('#app') // 如果实例中没有el选项，可使用$mount()手动挂载DOM

        vm.$destroy() // 销毁 Vue 实例
    </script>
</body>

</html>
复制代码

总结

创建 creeate：当加载一个组件时，先读取 data 中的变量，创建响应系统。此时只有 data 对象，暂时没有虚拟 DOM 树

挂载 mount：扫描原始 DOM 树，构建虚拟 DOM 树，并填充数据。既有 data 对象，又有虚拟 DOM 树

更新 update：只有当模型变量的值被改变时，才会触发更新阶段

销毁 destroy：只有当主动调用 $destroy，销毁组件时才会触发

 

posted @   邹邹很busy。  阅读(281)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示

目录导航