Vue 生命周期探索 - 第五篇：生命周期-总结篇

探索学习 Vue 生命周期篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第五篇：生命周期-总结

生命周期-总结

细节点

• 在data 中没有定义的属性，在mounted 、 methods方法中都需要用到，如何来操作，一个小技巧

   data:{
   	name:'安锐捷'
   },
   methods: {
        stop(){
            clearInterval(this.timer)
        }
    },
    mounted() {
        console.log("mounted:",this);
        this.timer = setInterval(() => {
            this.opacMouFlag -= 0.01
            if(this.opacMouFlag < 0){
                this.opacMouFlag = 1
            }
        }, 16);
    },	
  

需求1 点击按钮，停止变换透明度

• 思路： 因为透明度的改变是通过定时器改变的，所以直接停止定时器即可
• 直接上代码

  <div id="root">
          <h1>你好,{{name}}</h1>
          <hr/>
          <h2 :style="{opacity}">欢迎学习Vue</h2>
          <button  @click="stop">点我停止变换</button>
      </div>
      <script type="text/javascript">
          Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
          const vm = new Vue({
              el: "#root",
              data: {
              name: "安锐捷",
              opacity: 1 ,// 透明度 
              },
              methods: {
                  change(){
                  },
                  stop(){
                      //clearInterval(this.timer) 温柔停止定时器
                      this.$destroy() // 暴力停止，直接销毁
                  }
              },
              // Vue 完成模板的解析，并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
              mounted() {
                  this.timer = setInterval(() => {
                      this.opacMouFlag -= 0.01
                      if(this.opacMouFlag < 0){
                          this.opacMouFlag = 1
                      }
                  }, 16);
              },
          })
      </script>
  

  • 思考：由于暴力停止，直接销毁 之后，定时器还在进行定时，所以需要连定时器一块停止，引出需求2

需求2 点击按钮，停止变换透明度 销毁的同时，停止定时器

• 思路： 使用beforeDestroy 方法实现

• 直接上代码

   <div id="root">
          <h1>你好,{{name}}</h1>
          <hr/>
          <h2 :style="{opacity}">欢迎学习Vue</h2>
          <button  @click="stop">点我停止变换</button>
      </div>
      <script type="text/javascript">
          Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
          const vm = new Vue({
              el: "#root",
              data: {
              name: "安锐捷",
              opacity: 1 ,// 透明度 
              },
              methods: {
                  change(){
  
                  },
                  stop(){
                      //clearInterval(this.timer) 温柔停止定时器
                      this.$destroy() // 暴力停止，直接销毁
                  }
              },
              // Vue 完成模板的解析，并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
              mounted() {
                  console.log("mounted:",this);
                  this.timer = setInterval(() => {
                      this.opacMouFlag -= 0.01
                      if(this.opacMouFlag < 0){
                          this.opacMouFlag = 1
                      }
                  }, 16);
              },
              beforeDestroy() {
                  console.log("销毁之前停止定时器因为 vm 即将驾鹤西游");
                  clearInterval(this.timer)
              },
          })
      </script>
  

  使用beforeDestroy 之后，观察页面，发现 在点击 按钮之后，调用了 this.$destroy() ,在销毁触发的那一刻同时调用了销毁 beforeDestroy 进行了停止定时器 最后再进行了 destroyed

• 总结

  • 常用的生命周期钩子：
  1. mounted: 发送ajax 请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
  2. beforeDestory: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]

• 关于销毁Vue 实例

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

故书不厌百回读，熟读深思子自知——宋.苏轼《送安惊落第诗》

创作不易，欢迎 多多点赞，收藏 各节里面总结的还有不到位的欢迎指证
邮箱：[email protected]
微信：py_mxb