VUE的生命周期

生命周期

生命函数周期 = 生命周期钩子 = 生命周期事件

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

生命周期函数分类

• 创建期间

1. beforeCreate
2. created
3. beforeMount
4. mounted

• 运行期间

1. beforeUpdate
2. Updated

• 销毁期间

1. beforeDestroy
2. destroyed

生命周期图示

实例方法

vm.$mount

• 返回值：vm-实例自身
• 用法：若VUE实例在实例化的时候没有收到el选项则处于”未挂载“状态，没有关联的DOM，这个时候使用$mount()手动挂载了一个为挂载的实例

挂载实例的方法

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

render

字符串模板的代替方案
接收createElement方法作为第一个参数来创建Vnode
创建Vnode之后调用$mount将节点渲染成真实DOM节点，挂载到根节点上 #app上

new Vue({
    render: function (createElement) {
       return createElement(App);
    }
}).$mount('#app')

vm.$forceUpdate()

迫使VUE实例重新渲染。仅仅影响实例本身和插入插槽内容的子组件。

vm.$nextTick( [callback] )

• 参数：回调函数

将回调延迟到下次DOM更新循环之后执行。
在修改数据之后立即使用它，获取更新后的 DOM。
跟全局方法 Vue.nextTick 一样，不同的是回调的this自动绑定到调用它的实例上。

Vue.nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

使用原因
Vue是异步执行DOM更新的队列

用途：

1. 在改变DOM元素的数据之后需要立即操作新的DOM的时候
2. 在生命周期的created()钩子函数进行的DOM操作时，因为此时的DOM还未进行渲染
3. 在生命周期的mounted钩子函数进行的DOM操作时,因为此时所有的DOM已经挂载完成

实例

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    changeTxt1:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //vue数据改变，改变dom结构
      let domTxt=document.getElementById('h').innerText; 
      console.log(domTxt);  //原始值
    },
  }
}
</script>

changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以在dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  //修改后的文本值
      });
    },

vm.$destroy()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子。