Vue----生命周期钩子函数

时间 2019-11-30

标签 vue 生命周期钩子函数繁體版

原文原文链接

什么是生命周期

Vue 的实例具备生命周期 Vue的实例在生成过程当中会经历一系列初始化的过程数据的监听编译模板实例挂载DOM元素或者数据更新致使DOM更新在执行过程当中会运行生命周期的钩子函数
实例在生命周期中特定的时间点执行的函数称为生命周期的钩子函数 生命周期不能人为控制执行顺序

经常使用的生命周期

beforeCreate 在实例初始化以后数据观测（data observer）和 watch配置以前被调用
created 实例建立完成后调用在这一步已经完成数据观测属性和方法的运算 watch事件的回调可是现阶段尚未挂载
beforeMount 在挂载开始以前被调用建立虚拟DOM
mounted 把虚拟DOM 挂载到真实的DOM上在Vue中获取DOM元素对象项目中AJAX请求通常都会在这里或者created中发送
beforeUpdate 当数据发生变化时会触发这个函数
updated 数据更改致使虚拟DOM从新渲染和打补丁在这以后会调用updated
beforeDestory 在实例被销毁以前调用若页面中有定时器会在这个钩子函数中清除
destroyed 实例销毁以后调用实例中的属性不再是响应的 watch被移除

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div @click="fn">{{msg}}</div>
</div>

<script src="vue.js"></script>
<script>
  // 生命周期：
  // Vue 的实例具备生命周期，Vue 的实例在生成的时候，会经历一系列的初始化的过程；数据的监听，编译模板，实例挂载DOM元素，或者数据更新致使 DOM 更新，在执行的过程当中，会运行一些叫作生命周期的钩子函数，在 Vue 实例生命周期中特定的时间点执行的函数称为生命周期的钩子函数；

  // 若是咱们须要在某个生命周期处理一些事情，咱们能够把这些事情写在钩子函数中；等到 Vue 的实例生命周期到这个阶段就会执行这个钩子，而咱们要作的事情也就得以处理了
  // 生命周期的钩子函数不能人为的控制其执行的顺序；

  let vm = new Vue({
    data: {
      msg: 'hello'
    },
    methods: {
      fn() {console.log(11111)}
    },
    beforeCreate() {
      // 在实例初始化以后，数据观测 (data observer) 和 watch 配置以前被调用。
      console.log(1);
      console.log(this.msg);
      console.log(this.$el); // this.$el 是根 DOM 元素
    },
    created() {
      // 在实例建立完成后被当即调用。在这一步，实例已完成数据观测、属性和方法的运算、watch/event 事件回调
      // 可是在现阶段尚未开始挂载，即还没挂载到根 DOM 元素上，因此 this.$el 属性不可见
      console.log(2);
      console.log(this.msg);
      console.log(this.$el);
    },
    beforeMount() {
      // 在挂载开始以前被调用，建立虚拟DOM（Virtual-DOM）；虚拟 DOM 不是真实的 DOM 元素，而是 js 对象，其中包含了渲染成 DOM 元素信息；
      console.log(3);
      console.log(this.msg);
      console.log(this.$el);
    },
    mounted() {
      // 把 Vue 的虚拟DOM挂载到真实的 DOM 上；
      // 若是要在 Vue 中获取 DOM 元素对象，通常在这个钩子中获取
      // 项目中的 ajax 请求通常会在这里或者 created 里发送；
      console.log(4);
      console.log(this.msg);
      console.log(this.$el);
    },
    // 只有当数据发生变化时，才会触发这个函数；
    beforeUpdate() {
      console.log(5)
    },
    updated() {
      // 因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。
      console.log(6);
    },
    beforeDestroy() {
      // 在 Vue 的实例被销毁以前调用，若是页面中有定时器，咱们会在这个钩子中清除定时器；
      console.log(7);
    },
    destroyed() {
      // Vue 实例销毁后调用，实例中的属性也再也不是响应式的，watch 被移除
      console.log(8);
    }
  });

  vm.$set(vm, 'msg', 'hello world'); // 由于 Vue 的数据都是响应式的，只有修改数据才会触发 beforeUpdate 和 updated 钩子


  vm.$mount('#app'); // 当建立实例时不传递 el 属性，能够手动挂载到 DOM 节点；

  vm.$destroy(); // 手动销毁实例；

</script>
</body>
</html>
复制代码

refs 和 DOM操做

ue 是数据驱动不提倡操做DOM 可是有时候必须操做DOM 所以VUE 提供了一个行内属性来获取DOM vm.$refs 是Vue提供的实例专门用来获取DOM元素的html

refs 的使用

在须要获取的标签内添加ref = "标识符" 行内属性而后在Vue的实例中经过vm.refs将会得到一个数组**vue

异步DOM的更新和 nextTick

Vue 的DOM 更新是异步的若咱们想从新获取更新数据后的渲染出来的DOM咱们须要使用nextTickajax

this.$nextTick(callback)
复制代码

callback 放到DOM更新后执行数组

template属性指定HTML中的模板id 或以字符串形式声明模板这个标签不会被渲染出来

以HTML模板形式

<template id = 'p1'>
<div>
<p v-for = "(a,i) in arr">{{a}}</p>
</div>
</template>

let vm = new Vue({
    el:'#app',
    data:{
        msg:'aaaa',
        arr:[1,2,3,4]
    },
    //template:'#p1' //HTML模板形式
    template:`<div><p v-for = "(a,i) in arr">{{a}}</p></div>` //模板字符串
})
复制代码

注意事项

template:<div><p v-for = "(a,i) in arr">{{a}}</p></div> 或 template:'#id'
template 属性渲染后会把根DOM元素替换掉
template 标签只能有一个子元素