Vue生命周期

最新推荐文章于 2024-08-21 22:17:11 发布

小源同学r

最新推荐文章于 2024-08-21 22:17:11 发布

阅读量447

点赞数 1

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

本文链接：https://blog.csdn.net/qq_43216714/article/details/123026281

版权

Vue.js 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

图解

文字讲解

beforeCreate

初始化界面前.

这个时候只是一个空的Vue()对象 , 并且只有默认的生命周期函数和默认事件.

<body>
    <div id="app">
        <div id="divId">页面还没有渲染 --- {{msg}}</div>
    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                msg: "页面渲染完毕"
            },
            methods: {

            },
            filters: {

            },
            beforeCreate() {
                // 这是我们第一个遇到的生命周期函数，实例被创建出来，
                // 还没有data、methods等时，会执行它
                let content = document.getElementById('divId')
                console.log('beforeCreate：', content.innerText)
                // 在js中，null和undefined是不同的含义。null表示有这个对象，
                // 但是这个对象的值是null。undefined表示压根就没有这个对象
                console.log('beforeCreate', this.msg)
            }
        })
    </script>
</body>

create

初始化界面后

这时的data和method已经被初始化完成.

<body>
    <div id="app">
        <div id="divId">页面还没有渲染 --- {{msg}}</div>
    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                msg: "页面渲染完毕"
            },
            methods: {

            },
            filters: {

            },
            created() {
                // 这是我们第一个遇到的生命周期函数，实例被创建出来，
                // 还没有data、methods等时，会执行它
                let content = document.getElementById('divId')
                console.log('beforeCreate：', content.innerText)
                // 在js中，null和undefined是不同的含义。null表示有这个对象，
                // 但是这个对象的值是null。undefined表示压根就没有这个对象
                console.log('beforeCreate', this.msg)
            }
        })
    </script>
</body>

beforMount

渲染dom前

这时模板已经在内存中编译完成 , 但没有加载到页面中去.

<body>
    <div id="app">
        <div id="divId">页面还没有渲染 --- {{msg}}</div>
    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                msg: "页面渲染完毕"
            },
            methods: {

            },
            filters: {

            },
            beforeMount() {
                // Vue实例创建完毕，页面尚未重新渲染
                let content = document.getElementById('divId')
                console.log('beforeMounte', content.innerText)
                console.log('beforeMounte', this.msg)
            }
        })
    </script>
</body>

mounted

dom渲染后

这时的页面编译并且替换完毕.

<body>
    <div id="app">
        <div id="divId">页面还没有渲染 --- {{msg}}</div>
    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                msg: "页面渲染完毕"
            },
            methods: {

            },
            filters: {

            },
            mounted() {
                // 页面渲染完毕
                let content = document.getElementById('divId')
                console.log('mounted', content.innerText)
                console.log('mounted', this.msg)
            }
        })
    </script>
</body>

beforeUpdate

更新数据前

当data数据被修改后会进行触发

update

更新数据后

当update被执行到的时候 , 页面中的数据已经和data保持同步

beforeDestroy

卸载组件前

这时Vue的实例已经从运行阶段变成了销毁阶段. 而这时实例身上所有的data , methods , 过滤器 , 指令都处于可用状态

destroyed

卸载组件后

这是Vue的所有组件都不可用了

小源同学r

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue生命周期

图解文字讲解beforeCreate初始化界面前.这个时候只是一个空的Vue()对象 , 并且只有默认的生命周期函数和默认事件.<body> <div id="app"> <div id="divId">页面还没有渲染 --- {{msg}}</div> </div> <script> var vue = new Vue({ el: "#a
复制链接

扫一扫