vue的生命周期

一.概述

vue对象初始化过程中,会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

**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的绑定,即数据驱动

二.图解

图片

图片

三.范例

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值