vue必备的生命周期函数

生命周期函数

• 所有的vue组件,都是vue实例,一个组件对应一个实例,并且接收相同的选项对象(一些根实例特有的选项除外)
• 实例生命周期也叫:组件生命周期
• 组件 : 
  • 看做是一个个可复用的ui模块
  • 组件本质上市一个vue实例

生命周期介绍

• 简单说 : 一个组件(实例)从开始到最后消灭所经历的各种状态就是一个组件(实例)的生命周期
• 生命周期钩子函数的定义:从组件被创建,到组件挂在页面上运行,载到页面关闭组件被销毁,这三个阶段总是总是伴随着组件各种的事件,这些事件,统称为组件的生命周期函数(简称:钩子函数)
• 开发人员可以通过vue提供的钩子函数,让我们写的代码参与到vue的生命周期中,让我们的代码在核实的阶段起到响应的作用

 注意 : 

1. 注意 : vue在执行过程中会  自动调用  生命周期钩子函数  , 我们只需要提供这些钩子函数即可
2. 注意 : 钩子函数的名称都是vue中规定好的

学习vue组件生命周期 学什么?

1. Vue内部执行的流程(难)
2. 钩子函数如何使用(两个重要的钩子函数  created  mounted) 

1.创建之前 - beforeCreate

• 说明 : 在实例初始化之前,数据观测和 event/watch 事件配置之前被调用
• 组件实例刚被创建, 组件属性计算之前, 例如 : data属性  methods 属性
• 注意 : 此时,无法获取data中的数据和methods中的方法
• 场景 :几乎不用

2. 创建 - created(掌握重点)

• 说明 : 组件实例创建完成,属性已绑定, 可以调用 methods 中的方法 , 可以获取data值
• [vue 实例生命周期 参考 1]
• [vue 实例生命周期 参考 2]
• 使用场景 : 1 - 发送ajax  2 - 本地存储获取数据  3 -  操作data里的数据

• beforeCreate(){
      // 无法获取数据和事件
      console.warn('beforeCreate',this.msg,this.fn)
  },
  created(){
      console.warn('created', this.msg,this.fn)
  }

有 ' el ' 选项吗?

1.  YES => 就是正常的 el 边界
2.  NO => 可以注释,但是必须要手动添加 vm.$mount(el) 去指定边界    vm.$mount('#app')

有 ' template ' 选项吗?

1. NO => 将el 的 outerHtml 作为模板进行编译(outerHTML = 自身+ innerHTML )
2. YES =>

   // 如果提供了template , 那么 vue就会将tempalte的内容进行编译,编译后,替换页面中vue管理的边界
   template : `<h1> 嘻嘻 </h1>`

3. 装载之前 - beforeMounted() 

• 说明 : 在挂载开始之前被调用(挂载:可以理解为DOM渲染)

4. 装载 - mounted(掌握)

• 说明 : 挂载之后,DOM完成渲染
• 使用场景 : 1- 发送ajax请求  2 - 操作DOM

• 记得把template去掉
  // 渲染DOM之前 
  beforeMount(){
      // 渲染之前的<h1 id="h1" @click="fn">{{ msg }}</h1>
      consolg.log(document.querySelector('h1'))
  },
  // 渲染DOM之后 <h1>测试</h1>
  mounted(){
      console.log(document.querySelector('h1'))
  }

5. 更新之前 - beforeUpdated()

• 说明 : 数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前,可以在这个钩子中进一步的更改状态,这不会触发附加的重渲染过程
• 注意 : 此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的

小提示: 打印this.$el ,  打开小三角之后的,是应为你打印是有监听的功能,展示的是后面更改之后的

6. 更新 - updated()

• 说明: 组件DOM已经更新,所以你现在可以执行依赖于DOM的操作

• beforeUpdate(){
      // 更新之前的值 : 信息
      consolg.warn('beforeUpdate',document.querySelector('h1').innerText)
  },
  updated(){
      // 更新之后的值 : 信息111
      console.warn('updated',document.querySelector('h1').innerText)
  }

7. 销毁之前 - beforeDestroy()

• 说明 : 实例销毁之前调用 , 在这一步, 实例仍然完全可用
• 使用场景 : 实例销毁之前,执行清除任务, 比如 : 清除定时器等

created(){
    this.timerId = setInterval(()=>{
        console.log(111)
    },500)
},
// 如果当组件销毁了,还不清楚定时器,就会出现性能问题
// 在浏览器中可以尝试销毁  vm$destroy()
// 最后销毁
beforeDestroy(){
    clearInterval(this.timerId)
}

8.  销毁  -  destroyed()

说明 : Vue实例销毁后调用.调用后,vue实例指示的所有东西会解绑,谁有的事件监听会被移除,所有的子实例也会被销毁

二. 使用钩子函数来完善数据存储(created创建)

created{
    this.list = JSON.parse(localStorage.getItem('list'))
}