vue入门之vue生命周期

生命周期：又称成名周期回调函数，生命周期钩子

 052_尚硅谷Vue技术_生命周期_总结_哔哩哔哩_bilibili

案例：字体渐变,要求使用vue实现且不改变dom的原有结构

 方式一：使用插值+函数方法

<div>
  <h1 :style='{opacity}'>hello 你好</h1>
  {{changeOptity()}}   ###函数无返回值，{{undefine}}不影响结构
</div>
  
const vm = new Vue({
  data:{
     opacity:1
   },
methods:{
   changeOptity(){
    setInterval(()=>{
      this.opacity-= 0.01
      if(this.opacity<0){
          opacity=1
          }
       })
     }
   }
})

注意：该方法虽然能够功能实现，但存在严重缺陷，optity变化导致模板不停地被解析，每次都会创建一个定时器，会导致内存溢出

方式二：使用vue中mounted()函数实现

<div>
  <h1 :style='{opacity}'>hello 你好</h1>
</div>
  
const vm = new Vue({
  data:{
     opacity:1
   },

mounted(){
   setInterval(()=>{
      this.opacity-= 0.01
      if(this.opacity<0){
          opacity=1
          }
       })
     }
   }
})

注意：mounted是在模板解析完成后且真实dom元素插入页面时调用，且定时器只调用一次

而mounted()是vue生命周期中的一个阶段

vue中对象mounted()函数

位置：和data，el,methods对象平级

执行时机：在vue模板解析完成并将真实的dom元素放入页面时被调用

vue生命周期中四对重要的钩子

回调函数                                                       完成的任务

beforeCreated()    

created();

beforeMounted();

mounted();

beforeUpdated();

updated();

beforeDestory();

destory();

常用的生命周期钩子

mounted:启动定时器，发布订阅消息，发送ajax请求，绑定自定义事件

beforeDestroy() 清除定时器，取消订阅发布消息，解绑自定义事件

销毁vue实例注意：

在beforeDestory阶段不要进行数据的修改，因为即使操作也不会触发更新流程

销毁后自定义事件会失效，但是原生的dom事件依然有效