Vue生命周期

生命周期

在vue中生命周期大的分为4个阶段

1. create 创建 - 创建vue实例并初始化
2. mount 挂载 - 把vue实例和视图进行关联
3. update 更新（循环） - 监听处理数据与视图的变化
4. destroy 销毁 - 销毁vue实例

生命周期 - 钩子函数

vue为上面的4个大的阶段提供了一个可编程的借口，我们可以在这个4个的某个时段内写入一些自己的逻辑，vue是通过配置中一个叫 生命周期 - 钩子函数的选项来实现的：

• beforeCreate

  在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

  <div id="app"></div>
  
  let vm = new Vue({
    el: '#app',
    data: {
      a: 1
    },
    beforeCreate() {
      console.log(this); //指向vue实例
      console.log(this.a); //undefined
    }
  })
  

• created

  实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

  let vm = new Vue({
    el: '#app',
    data: {
      a: 1
    },
    methods: {
      fn(){
        console.log("fn函数")
      }
    }
    created() {
      console.log(this.a); //1
      this.fn(); //fn函数
        console.log(this.$el) //undefined 
        //挂载还没执行，不能操作页面元素
    }
  })
  

• beforeMount

  把实例对象下的$el属性指向设置中的el参数指定的元素

  let vm = new Vue({
    el: '#app',
    template: '<h1>Hello</h1>',
    created() {
        console.log(this.$el) //<div id="app"></div>
        //解析实例模板,这个解析后的模板还没有和$el进行绑定
    }
  })
  console.log(vm.$el); //<h1>Hello</h1>
  

• mounted

  把解析后的模板和页面元素进行绑定,用解析后的模板内容替换页面指定的元素

  let vm = new Vue({
    el: '#app',
    template: '<h1>Hello</h1>',
    mounted() {
        console.log(this.$el) //<h1>Hello</h1>
    }
  })
  

• beforeUpdate

• updated

  当数据发生变化时触发

  let vm = new Vue({
    el: '#app',
    template: '<h1>Hello</h1>',
    beforeUpdate() {
        console.log('beforeUpdate') 
    },
    updated() {
        console.log('updated') 
    }
  })
  
  vm.a = 10;
  //触发： beforeUpdate updated
  

  ​

  动态组件

  <div id="app">
    <component :is="componentId"></component>
  </div>
  let vm = new Vue({
    el: '#app',
        data: {
          componentId: 'index'
        },
        components: {
          index: {
            template: '<h1>这是首页</h1>'
            },
            list: {
                template: '<h1>这是列表</h1>'
            }
      }
  });
  

  vue的内置组件：component

  ​ is: 指定要被渲染的组件

  <keep-alive>
    <component :is="currentView"></component>
  </keep-alive>
  

  当我们使用：keep-alive组件的时候，动态组件如果不被显示，那么也不会销毁，而是保留在内存中，只是给当前这个组件设置了一个停用状态，而不会销毁重建：触发activated,deactivated;

  如果没有使用keep-alive，那么这个时候不被显示的话，该组件将被销毁，触发destroyed；