Vue生命周期钩子

文章目录

引出

又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是vm 或组件实例对象
使用mounted()过渡效果
实现内容自动淡入淡出效果

html 复制代码

<body>
  <div id="root">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
  </div>

</body>
<script type="text/javascript">
  Vue.config.productionTip = false;

  new Vue({
    el: '#root',
    data:{
      opacity: 1
    },
    // Vue完成模版的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
    mounted(){
      setInterval(()=>{
        this.opacity -= 0.01
        if(this.opacity <= 0) this.opacity = 1
      }, 16)
    }
  })
</script>

分析

vm的生命周期

将要创建 ===> 调用beforeCreate函数

在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用
创建完毕 ===> 调用created函数

在实例创建完成后被立即同步调用

在这一步中，实例已经对选项的处理，意味着一下内容已被配置完成：数据侦听、计算属性、方法、事件/侦听器的回调函数
然而挂载阶段还没开始，且$el property目前尚不可用
将要挂载 ===> 调用beforeMount函数
在挂载开始之前被调用：相关的render函数首次被调用，该钩子在服务器端渲染期间不被调用
挂载完毕 ===> mounted ========>【重要的钩子】
实例被挂载后调用，这时el被新创建的vm.$el替换了
如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内
注意mounted不会保证所有的子组件也都被挂载完成
将要更新 ===> beforeUpdate
在数据发生改变后，DOM 被更新之前被调用。
这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
更新完毕 ===> updated
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
将要销毁 ===> beforeDestroy =====>【重要的钩子】
实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
销毁完毕 ===> destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。

html 复制代码

<body>
  <div id="root">
    <h2 v-text="n"></h2>
    <h2>当前n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
  </div>

</body>
<script type="text/javascript">
  Vue.config.productionTip = false;

  new Vue({
    el: '#root',
    data: {
      n: 1
    },
    // Vue完成模版的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
    methods: {
      add() {
        console.log('add')
        this.n++
      },
      bye() {
        console.log('bye');
        this.$destroy()
      }
    },
    watch:{
      n(){
        console.log('n被修改了')
      }
    },
    beforeCreate() {
      console.log('beforeCreate')
    },
    created() {
      console.log('created')
    },

    beforeMount() {
      console.log('beforeMount')
    },
    mounted() {
      console.log('mounted')
    },
    updated() {
      console.log('updated')
    },
  })
</script>

常用的生命周期钩子：

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会再beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了

三个上图中未呈现的钩子

nextTick

语法： this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

路由组件所独有的声明周期钩子

作用：路由组价所独有的两个钩子，用于捕获路由组件的激活状态
具体名字
a. activated路由组件被激活时触发
b. deactivated路由组件失活时触发

javascript 复制代码

activated() {
  console.log("News组件被激活了");
  this.timer = setInterval(() => {
    console.log("@");
    this.opacity -= 0.1;
    if (this.opacity <= 0) {
      this.opacity = 1;
    }
  }, 500);
},
  deactivated() {
    console.log("News组件失活了");
    clearInterval(this.timer);
  },

注：需要搭配keep-alive才有效