[Vue] 5.Vue的生命周期函数

最新推荐文章于 2024-05-30 11:27:58 发布

weiweicn!

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量440

点赞数

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

本文链接：https://blog.csdn.net/u014627255/article/details/124969132

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、生命周期函数：在某一时刻会自动执行的函数

beforeCreate(): 分析的代码中的事件以及生命周期函数代码后，第一个执行即在实例生成之前执行（after init events & lifecycle）
created(): 分析完数据以及模板之间绑定的内容后执行即在实例生成之后执行 (after init injections & reactivity)
beforeMount(): 如果有template，Vue会把template变成render函数，beforMount()会在template变成render函数之后执行
mounted(): 当新内容挂载到页面上的时候执行（执行完此函数之后就会显示页面内容）
beforeUpdate(): 数据发生变化的时候执行
updated(): 当数据发生变化，同时页面完成更新之后，会自动执行
beforeUnmount(): 当调用了unmount()函数去终销毁Vue实例时，先执行
unmounted(): 当Vue应用失效时，且dom完全销毁之后，自动执行的函数

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5  </title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 生命周期函数：在某一时刻会自动执行的函数
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world'
                }
            },
            // 在实例生成之前会自动执行的函数
            beforCreate() {
                console.log('beforCreate')
            },
            // 在实例生成治好后会自动执行的函数
            created() {
                console.log('created')
            },
            // 在组件内容被渲染到页面之前立即自动执行的函数
            beforeMount() {
                console.log('beforeMount')
            },
            // 在组件内容被渲染到页面之后自动执行的函数
            mounted() {
                console.log('mounted')
            },
            // 当数据发生变化时会自动执行的函数
            beforeUpdate() {
                console.log('beforeUpdate')
            },
            // 当数据发生变化，同时页面完成更新后，会自动执行的函数
            updated() {
                console.log('updated')
            },
            // 当Vue应用失效时，自动执行的函数
            beforeUnmount() {
                console.log('beforeUnmount')
            },
            // 当Vue应用失效时，且dom完全销毁之后，自动执行的函数
            unmounted() {
                console.log('unmounted')
            },
            template: "<div>{{message}}</div>"
        });
        app.mount('#root')
        const vm = app.mount('#root')
    </script> 
</body>
</html>

weiweicn!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue] 5.Vue的生命周期函数

一、生命周期函数：在某一时刻会自动执行的函数beforeCreate(): 分析的代码中的事件以及生命周期函数代码后，第一个执行即在实例生成之前执行（after init events & lifecycle）created(): 分析完数据以及模板之间绑定的内容后执行即在实例生成之后执行 (after init injections & reactivity)beforeMount(): 如果有template，Vue会把template变成render函数，beforMount(
复制链接

扫一扫