前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue的声明周期问题

vue的声明周期问题

作者头像
名字是乱打的
发布2021-12-22 15:38:07
4480
发布2021-12-22 15:38:07
举报
文章被收录于专栏:软件工程软件工程

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.另外vue中数据是双向绑定的,当我们的数据区发生变化,显示信息也会随之变化,因此在生命周期中有一个更新阶段作为可插入项.

vue全部生命周期可参考下图

vue在生命周期中有这些状态, beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue 在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。

看是看不懂的...直接代码实验一下好一些

代码语言:javascript
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>vuejs生命周期</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>

    <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello world'
            },
            beforeCreate: function() {
                console.log(this);
                showData('创建vue实例前', this);
            },
            created: function() {
                showData('创建vue实例后', this);
            },
            beforeMount: function() {
                showData('挂载到dom前', this);
            },
            mounted: function() {
                showData('挂载到dom后', this);
            },
            beforeUpdate: function() {
                showData('数据变化更新前', this);
            },
            updated: function() {
                showData('数据变化更新后', this);
            },
            beforeDestroy: function() {
                vm.test = "3333";
                showData('vue实例销毁前', this);
            },
            destroyed: function() {
                showData('vue实例销毁后', this);
            }
        });

        function realDom() {
            console.log('真实dom结构:' + document.getElementById('app').innerHTML);
        }

        function showData(process, obj) {
            console.log(process);
            console.log('data 数据:' + obj.message)
            console.log('挂载的对象:')
            console.log(obj.$el)
            realDom();
            console.log('------------------')
            console.log('------------------')
        }
        //vm.message = "good...";
        vm.$destroy(); 
    </script>

</html>
解读

vue对象初始化过程中,会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容,如果我们需要在vue对象的初始化过程中调用一些函数或者对数据做什么处理,我们可以在vue对象中去配置.

  • beforeCreate :数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象
  • created :数据已经绑定到了对象实例,但是还没有挂载对象
  • beforeMount: 模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的 el属性,el属性是一个HTMLElement对象,也就是这个阶段,vue实例通过原生的createElement等方法来创 建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点
  • mounted:将el的内容挂载到了el,相当于我们在jquery执行了(el).html(el),生成页面上真正的dom,上面我们 就会发现dom的元素和我们el的元素是一致的。在此之后,我们能够用方法来获取到el元素下的dom对象,并 进 行各种操作
  • 当我们的data发生改变时,会调用beforeUpdate和updated方
    • beforeUpdate :数据更新到dom之前,我们可以看到$el对象已经修改,但是我们页面上dom的数据还 没有发生改变
    • updated: dom结构会通过虚拟dom的原则,找到需要更新页面dom结构的最小路径,将改变更新到 dom上面,完成更新
  • beforeDestroy,destroed :实例的销毁,vue实例还是存在的,只是解绑了事件的监听还有watcher对象数据 与view的绑定,即数据驱动
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/11/16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue全部生命周期可参考下图
    • 解读
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档