vue 的学习笔记二

vue 的学习笔记二 🍨

一.理解 vue 的生命周期 🏷

答: vue组件实例 ,从 创建 到 销毁 的全过程

二. vue 生命周期的 三大阶段 🤔

vue 生命周期函数: vue 框架提供的内置函数,自动按次序执行.

作用: 特点的时间,执行特点的操作

比如: 组件创建完毕后,可以在 created 生命周期函数 ,发起 Ajax 请求,初始化 data 中的数据.

分类: 三大阶段📖 8个方法🗻 (完整11个方法)

第一阶段(初始阶段): 结合数据,结合模板,渲染数据

第二阶段(运行阶段): 数据改变,视图更新

第三阶段(销毁阶段): vue组件实例 销毁 (v-if=“true”)

---

1.初始化阶段: 数据初始化 和 DOM渲染🍶

​ 数据初始化期间 钩子函数: beforeCreate , created

• beforeCreate: 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
• created: 在实例创建完成后被立即同步调用。此时可以 : 发起网络请求, 或者操作: 数据侦听、计算属性、方法、事件/侦听器的回调函数。

<script>
	export default {
    data () {
      return {
        msg: '加载成功!'
      }
    },
    // 初始化基础事件,初始化 生命周期
    beforeCreate () {
      // data 数据还没有初始化完成,此时 vue实例上没有绑定数据
      console.log('beforeCreate', this.msg) // undefined
    },
    // 初始化数据
    // 数据是写在 data () 中, return 出来的数据
    // 必然在这个阶段,执行了 data 函数, 得到数据源
    // 将数据源挂到 vue 实例上, 将来才能 this.xxx 访问
    Created () {
   		// data 数据初始化完成,此时 vue实例上绑定好了数据
      console.log('created', this.msg) // 加载成功!
    },
  }
</script>

---

new Vue() => (.vue文件) ==> (构建) vue实例_对象 (每一个 vue组件都是 可复用的vue 实例)

Vue ==> 构造函数

Vue.prototype.xxx ==> vue 原型时添加 属性/方法 (在 vue 原型 上 创建 一个 ,将来可供所有的 .vue 文件使用 属性或方法)

---

DOM渲染期间 钩子函数: beforeMount , mounted

• beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted: 实例被挂载后调用，但是不保证所有的子组件也都被挂载完成。必要时 可以 配合 $nextTick 进行默写操作.
  如下所示:

// html 代码
<p ref='myP'>
  国庆七天乐?
</p>
// js 部分
beforeMount () {
	// dom 渲染之前, 不能操作 dom 元素
	console.log(this.$refs.myP.innerText) // undefined
},
mounted () {
	// dom 结构渲染之后,可以开始操作 dom 元素
	console.log(this.$refs.myP.innerText) //  国庆七天乐?
}

2.运行阶段(数据更新阶段–数据变化,视图更新)🎃

更新阶段 钩子函数: beforeUpdate , updated

• beforeUpdate : dom 还没有更新出来
• updated: dom 已经更新完成了

vue 是异步更新 dom 的,不会立刻更新;

当主线程执行完,积累了一定的更新,

基于新的数据,

生成新的虚拟dom 用 新的虚拟dom 和 旧的虚拟dom 对比,

对比出差异, 进行差异化更新

3.缓存阶段

被 keep-alive 包裹的组件，当切换显示时，组件不会销毁，而是缓存下来, 这里会 有两个钩子函数被触发

activated和deactivated

• activated:被 keep-alive 缓存的组件激活时调用。
• deactivated: 被 keep-alive 缓存的组件失活时调用。

4.销毁阶段(实例销毁阶段)🏕

钩子函数: beforeDestroy , destroyed

• beforeDestroy :实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed :实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

1.vue组件销毁 前/后, 会自动释放 侦听器监听,子组件,事件侦听…
2.有一些不是 vue 内置的功能,有时就需要 手动释放(定时器,延时器,服务器资源)

5.(错误)捕获阶段

钩子函数: errorCaptured
官方解释:
在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。