Vue实例的生命周期

最新推荐文章于 2022-09-14 11:33:34 发布

斜月!三星

最新推荐文章于 2022-09-14 11:33:34 发布

阅读量58

点赞数

分类专栏： Vue.js 组件化框架前端文章标签： css vue.js

本文链接：https://blog.csdn.net/qq_45248344/article/details/108631820

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue.js

7 篇文章 0 订阅

订阅专栏

组件化框架

7 篇文章 0 订阅

订阅专栏

文章目录

Vue实例的生命周期

Vue实例的生命周期

生命周期钩子：生命周期函数：生命周期事件

创建期间的生命周期函数

beforeCreate() : 第一个生命周期函数
- 但Vue实例并被未完全创建出来
- 第一个生命周期函数，此时已创建了最基本的Vue实例
- 执行此函数时 data 和 methods 都未被初始化
created() : 第二个生命周期函数
- 执行此函数时 data 和 methods 都已被初始化
- 此函数之后执行Vue实例的模板编译
- 编译模板时执行指令
- 模板编译最终在内存中生成模板字符串
beforeMount() : 第三个生命周期函数
- 此时模板编译好，尚未将模板字符串渲染到页面上
- 执行此函数时页面元素未被替换
- 此函数之后将内存中编译好的模板渲染到页面上
mounted() : 第四个生命周期函数
- 内存中的模板已挂载到页面上，可以在浏览器看到渲染好的页面
- 实例创建的最后一个生命周期函数

运行期间的生命周期函数

根据Vue中的data数据发生改变时触发运行期间的生命周期函数
最少可以从不执行

beforeUpdate() : 运行期间第一个生命周期函数
- 此时页面没有更新，当数据已经更新了，但并未渲染到页面
updated() : 此时页面与data已经同步

销毁期间的生命周期函数

beforeDestroy : 实例中的data、methods、过滤器、指令等都处于可用状态
- 并未执行销毁
destroy : 表示组件已被销毁，实例中的data、methods、过滤器、指令等都不可用
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./vue.js"></script>
    <link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
    <div id="app">
        <input type="button" value="更改" @click="msg='OK'">
        <h1>----{{ msg }}----</h1>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'Hello World!!!'
            },
            methods: {
                show(){
                    console.log('running show()')
                }
            },
            beforeCreate(){
                
            },
            created(){
                console.log(this.msg)
                this.show()
            },
            beforeMount(){
                console.log(document.getElementsByTagName('h1')[0].innerHTML)
            },
            mounted(){
                console.log(document.getElementsByTagName('h1')[0].innerHTML)
            },
            beforeUpdate(){
                console.log(document.getElementsByTagName('h1')[0].innerHTML)
            },
            updated(){
                console.log(document.getElementsByTagName('h1')[0].innerHTML)
            }
        });
    </script>
</body>
</html>