Vue生命周期

时间 2019-12-09

标签 vue 生命周期繁體版

原文原文链接

Vue生命周期

首先，每一个Vue实例在被建立以前都要通过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信你们必定都会很熟悉：vue

能够看到在vue一整个的生命周期中会有不少钩子函数提供给咱们在vue生命周期不一样的时刻进行操做, 那么先列出全部的钩子函数，而后咱们再一一详解:react

vue生命周期分为初始化,运行中,销毁一共8个钩子函数算法

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

初始化

beforeCreate

解析:app

1.在组件建立前触发,目的是为了组件的生命周期和组件的事件作准备dom

2.数据没有获取到，真实dom也没有渲染出来函数

3.项目而言没有太大的用处，能够在这一步进行数据请求（能够修改数据） 4.执行一次this

<body>
    <div id="app">
        <Hello></Hello>
    </div>
    <template id="hello">
    <div>
      <p> {{ msg }} </p>
    </div>
  </template>
</body>


//beforeCreate()钩子函数 表示在组件建立以前触发（意思就是尚未这个组件，因此并不会获取到数据）

Vue.component('Hello', {
        template: '#hello',
        data() {
            return {
                msg: 'hello 相亲了'
            }
        },
        beforeCreate() {
            console.log('1-beforeCreate')
            console.log('data', this.msg)   //并无输出数据
            console.log('真实dom', document.querySelector('p') //并无输出真实的dom
        },

created

解析:code

1.组件建立结束component

2.数据获得了，真实dom没有渲染出来对象

3.能够进行数据请求，提供一次数据修改的机会

4.执行了一次

Vue.component('Hello', {
        template: '#hello',
        data() {
            return {
                msg: 'hello 相亲了'
            }
        },
          created() {
            console.log('2-created')
            console.log('data', this.msg)   //data,hello 相亲了
            console.log('真实dom', document.querySelector('p'))   //没法获取
        },
     }

beforeMount

解析：

1.组件挂载前

2.任务:判断el 判断template

2.1若是没有el：解析不往下执行，须要咱们手动挂载

2.2若是有el：那么会判断是否有template，有template，就会进行render函数

2.3若是没有template：经过outerHTML 手动书写模板

3.数据能够获取到，可是真实数据尚未渲染（由于beforeMount这一步 render函数尚未生效，也就是说，此时仍是虚拟的dom ）

4.能够进行数据请求，也能够数据修改

5.执行一次

解析：outerHTML

<body>
  <div class="box"></div>
</body>

<script>
  var box = document.querySelector('.box')
  // box.innerHTML = 'Gabriel Yan'
  box.outerHTML = 'Gabriel Yan'
</script>

注意：outHTML会干掉外部标签

beforeMount

beforeMount() {
            console.log('3-beforeMount')
            console.log('data', this.msg)
            console.log('真实dom', document.querySelector('p'))
        },

//Vue内部render函数用来解析jsx转换成虚拟dom对象模型

mounted

1.组件挂载结束

2.数据得到了，真实dom也得到了

3.也能够进行数据请求，数据修改

4.执行了一次

5.能够进行真实dom的操做（能够进行第三方库的实例化）

mounted() {
            console.log('4-mounted')
            console.log('data', this.msg)
            console.log('真实dom', document.querySelector('p'))
        }

综上总结：

1.数据请求通常写在created里面

2.第三方库实例化通常在mounted中写

运行中

触发条件: 数据更新(数据修改的时候才会触发)

beforeUpdate

解析：

1.更新前

2.从新渲染vdom(虚拟dom)，而后经过diff算法比较两次vdom，生成patch 补丁对象

3.这个钩子函数更多的是进行内部操做，通常咱们不干预

4.只要数据改变就会被触发（触发屡次）

beforeUpdate () {
      console.log('beforeUpdate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    },

Update

解析：

1.更新结束

2.真实dom获得了,数据也获得了（更新后的）

3.动态数据获取（第三方库实例化）

updated () {
      console.log('updated')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    }

beforedestroy

解析：

1.Vue的销毁有两种形式

1.1经过开关的形式

1.2经过调用$destroy 方法

1.3两种方式的对比：

外部销毁不只能销毁组件,也能销毁该组件的dom结构

内部销毁只能销毁组件,不能销毁组件的dom结构

2.触发条件:当组件销毁时触发

3.使用:用来善后，好比第三方实例的删除，关闭计时器等

经过开关的形式

beforeDestroy () {
      console.log('beforeDestroy')  //组件被销毁时候才会触发
    },
    destroyed () {
      console.log('destroyed')
    }

destroy

1.解析: 和beforeDestroy的功能都是同样的没什么区别

（vue的生命周期是模仿react的 react已经将销毁的两个生命周期合并成一个）