zoukankan      html  css  js  c++  java
  • 8. vue 的生命周期

    vue的生命周期就是一个vue组件从出生到死亡的过程
    *** 生命周期,你需要知道它是什么时候触发。
    beforeCreate
      在组件初始化之前 在这个生命周期中组件的数据、方法、事件都还没有。
      简单来说,new Vue之后,可以理解为第一句话就调用beforeCreate
      可以在loading的时候用
     
      function Fn(age){
        beforeCreate();
        this.age = age;
      }
     
    created
      当数据、方法、事件初始化之后调用.
      简单点来说,当数据有初始值之后调用。
      一般都是请求数据的时候用,关闭loading。
      function Fn(age){
        beforeCreate();
        this.age = age;
        created()
      }
      要么看看有没有el属性,没有就再看看实例下有没有$mount(el)
      有就使用$mount的el
    ** template属性,会覆盖根元素
      1.
      template:'<div></div>'
      2.
      <template id="demo1">
      <div>demo1</div>
      </template>
     
      template:'#demo1'
      3.
      <script type="x-template" id="demo2">
      <h2 style="color:red">我是script标签模板</h2>
      <//script>
     
      template:'#demo2'
     
      有模板走模板,没模板走根元素的innerHTML
     
    beforeMount:
      渲染之前
    mounted
      DOM渲染之后,可以获取页面的元素(主要是数据生成出来的元素)
     
      当DOM更新完成时触发。只要操作DOM直接使用 nextTick 搞定
        Vue.nextTick()
        .then(function () {
        // DOM 更新了
        });
     
    angular : 脏值检查
     
      [
        {
          name:'ul',
          children:[
            {name:li},
            {name:li},
          ]
        }
      ]
      [
        {
          name:'ul',
          children:[
            {name:li},
            {name:li},
            {name:li},
          ]
        }
      ]
     
    beforeUpdate
      数据更新之前
    updated
      数据更新之后
     
      其实直接使用computed即可。
     
    beforeDestroy
      死亡前
      关掉定时器、状态的初始化
    destroyed 没有路由的时候是人为手动触发,有路由,切换路由的时候上一个组件触发
      死亡后,数据就不能添加了
     
    课件(2019-1-5)

     

  • 相关阅读:
    java之day4补充
    java之day4
    JAVA之day3对象
    JAVA之DAY3
    JAVA之DAY2
    element-ui表格添加复选框及根据列表中的数据判断是否可选
    h5手机端上传多张图片(界面上的展示图片,删除图片)
    模态框-开启关闭事件
    Vue-粒子特效(vue-particles)
    网页常用代码片段-sessionStorage存储JSON
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/10229896.html
Copyright © 2011-2022 走看看