[JavaScript知识库]前端面试题 Vue 中的 生命函数(钩子函数)

一，生命周期(钩子函数) 的简介

?

? ? ? ? 生命周期函数 又叫 钩子函数, 像它的名字一样,这也是个函数,与其他 methods 中定义的函数不同的是,Vue 中已经规定好了他的触发条件,而这些不同的触发条件就是 一个 Vue 文件从初始化到删除关闭必定经历的一些时间点,而我们就可以通过这些时间点进行各种操作

? ? ? ? 真正的钩子函数有很多,这里只介绍四类八个最常用的,如果想进行深入了解,请点击一下到这里去看看,这是官网,如果你只是正常工作开发或者面试需要,那么这篇文章可能会对您有些帮助

? ? ? ? 常用的钩子函数分为四类:

如下是一个 Vue 的生命周期顺序:

二，四类钩子函数的 触发条件 及 使用方法

钩子函数声明的位置:

四类函数都是需要与 methods 同级声明,并且不可被 methods 调用,以 updated 举例如下

export default {
  data () {
  },
  methods: {
  },

  // 钩子函数和 methods 同级声明
  updated () {
    console.log('看到了吗 声明到这个位置');
  }
}

1.?Lifecycle-初始化?beforeCreate 和 create

????????这个阶段有两个函数?beforeCreate 和 create

? ? ? ? 此阶段就是在 浏览器 初始化 data 和 methods 中数据前和后的时间点 会分别调用beforeCreate 和 create

?????????beforeCreate 代表的就是 Vue 中?data 和 methods 中定义的数据函数 添加到浏览器之前? 这个时间点会触发的函数; 用处不是太大,因为?data?的数据在此时还没有添加到,因此无法操作数据,很少用,打印测试一下 data 中的数据最后获得的也是 undefined??(定义方法如图,可以亲自测试一下加深印象)

? ? ? ? created 代表的就是 Vue 中?data 和 methods 中定义的数据函数 添加到浏览器初始化完毕之后?触发的函数; 它此时?data 和 methods 中的数据方法都已经定义初始化完毕,已经可以调用其中的数据函数了,这也是一个最早的可以操作 数据 的钩子函数

? ? ? ? 另外提一句,这个函数 created 和 mounted 经常用来发初始化ajax请求渲染页面,但是根据每个人的习惯不同,用哪个的都有,我本人而言一般用 created?,除非涉及到获取DOM元素否则很少用 mounted 这是因为 created?的请求更早,打开页面不会出现闪的情况,网页加载更快?

export default {
  data () {
    return {
      bl: true
    }
  },
  methods: {
    change () {
      this.bl = !this.bl
    }
  },

  <!-- Vue内部添加data和method数据前 -->
  beforeCreate(){
    // 在这里 打印的结果是 undefined
    console.log(this.bl)
  }

  <!-- Vue内部添加data和method数据后 -->
  created(){
    // 在这里 打印的结果是 true
    console.log(this.bl)
  }
  
}

2.Lifecycle-挂载?beforeMount 和?mounted

? ? ? ? 这个阶段就是将 Vue的数据 在内存中渲染为虚拟DOM模板, 将这个虚拟DOM模板渲染为真实的页面DOM元素前和后这两个时间点分别调用?beforeMount 和?mounted

????????beforeMount?简单来说,就是内存里的虚拟DOM已经运算完毕,但是还没有渲染到浏览器中,此时还无法看到页面内容,也无法访问DOM元素,用处也不大,如果硬是要访问,会返回 undefined

????????mounted 这个钩子函数就是 虚拟DOM已经成功渲染到浏览器中了 此时调用mounted 中的内容,这个函数和?created?一样可以用来发送初始化ajax请求,但是我本人更习惯用?created?,因为mounted 在生命周期中比较靠后,反应较慢,只有涉及到操作 组件 DOM节点 的时候才会用?mounted

? ? ? ??beforeMount?不可以打印 DOM节点 ,mounted 可以,具体如图:

?<template>
  <div id="app">
    <div ref="biaoqian">这是个DOM节点</div>
  </div>
</template>

<script>
export default {
  // dom节点 渲染浏览器之前
  beforeMount () {
    console.log('beforeMount 打印结果:',this.$refs.biaoqian);
  },

  // dom节点 渲染浏览器完成
  mounted(){
    console.log('mounted 打印结果:',this.$refs.biaoqian);
  }
}
</script>
?

3.Lifecycle-更新?beforeUpdate 和?updated

? ? ? ? 这个阶段是 页面DOM元素相关的数据更新 时,正在更新和更新完毕后两个时间点 触发?beforeUpdate 和?updated,非相关数据更新不会触发

????????beforeUpdate 是页面元素相关联的数据已经改变,但是还未更改完毕的中间这个状态,发生在虚拟DOM重新渲染和打补丁之前,具体就是内存中的更新过程这个时间点会触发这个钩子函数,此时还未渲染到浏览器中DOM,但此时如果打印被改动的数据仍然会打印出改动成功后的数据,也可以基于改动后的数据进一步改动,这样下次再访问这个数据就是最新的 如下图

export default {
  data () {
    return {
      text: '我是还没被改的文字'
    }
  },
  methods: {
    // 改动数据事件
    change () {
      this.text = '我被改了'
      console.log('change事件', this.text);    // 21行 打印结果
    }
  },

  // beforeUpdate 钩子函数
  beforeUpdate () {
    this.text = '我又被改了,我不干净了'
    console.log('改变时', this.text);    // 26行 打印结果
  }
}
</script>

????????updated 是数据改动完成并且成功重新打补丁渲染完成后调用的钩子函数,此时获取的数据一定是经过 改动 和?beforeUpdate 的最新数据,但是最好不要在updated 中改动数据,这样可能会再次触发?beforeUpdate 因此会造成死循环重复执行,打印结果如下:

?export default {
  data () {
    return {
      text: '我是还没被改的文字'
    }
  },
  methods: {
    // 改动数据事件
    change () {
      this.text = '我被改了'
      console.log('change事件', this.text); // 21行 打印结果
    }
  },

  // beforeUpdate 钩子函数
  beforeUpdate () {
    this.text = '我又被改了,我不干净了'
    console.log('改变时', this.text); // 26行 打印结果
  },

  // updated 钩子函数
  updated () {
    console.log('改变之后', this.text); // 45行 打印结果
  },
}
</script>
?

?

4.Lifecycle-销毁?beforeDestroy 和?destroyed

?beforeDestroy 和?destroyed用法如上一样,只不过他的触发时机是 Vue实例销毁的前后,destroyed用处多用于 清除定时器和 清空localstorage中的数据,beforeDestroy用的不多,很惭愧这两个我也不是很了解