StepByStep前端科普系列(004)-Vue 2、3 生命周期那些事

MinusCode
92 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

Step1: 相关概念

Vue生命周期：Vue是组件化编程，从一个组件诞生到消亡会经历很多过程，这些过程就叫做生命周期。

钩子函数：伴随着生命周期，给用户使用的函数。（操控生命周期，主要是操控钩子函数）

渲染：将数据和模版组装成html，解析html生成DOM树然后绘制页面。后端的程序在把html页面吐给前端之前，先把html页面上的特定区域，特定符号，给用数据填充过，再扔给前端，这就是后端渲染，所谓渲染，你可以理解一种修改，渲染这词最早来源于游戏领域，游戏领域又来源于现实画画，渲染嘛，拿着颜料往纸上涂便是。以前绝大部分服务器都是这个模式。前后端的渲染本质是一样的，都是字符串的拼接，将数据渲染 [填] 进一些固定格式的html代码中形成最终的html展示在用户页面上。 后端渲染html 叫吐或者喷，爬虫可以看到完整的呈现源码。前端模板渲染html叫填，爬虫看不到完整的呈现源码。

前端渲染：后端的html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改（涂颜料）。这就是前端渲染。

后端渲染：html先被后端涂抹过一遍再给前端（前端拿到后是否要再涂抹则随意），前端渲染就是后端的html是静态文件放那作为纯文件形式的存在，后端直接吐给前端，不做任何涂抹，前端拿到后执行决定做什么。

挂载：在将我们写的组件.vue后缀的代码编译，然后渲染到浏览器页面即真实DOM之前，这个组件是先转换成一个javascript对象，即虚拟DOM，这个虚拟DOM要在页面上显示，须转换成真实DOM，但转换成真实的DOM后，这些真实DOM也依然只是我们内存中的字节而已，我们应该将其安置到已经存在于页面上的某个位置，比如放在body下面某个id叫做app的那个div下面，这就是挂载！挂载一词来自操作系统的概念，U盘真实文件系统与虚拟文件系统建立关系的过程，叫做挂载。回到浏览器上，虚拟DOM与真实DOM建立关系的过程，也可以称作挂载。因为都是“虚拟”与“真实”建立联系，用户操作“虚拟”部分。

浏览器渲染过程： Dom树 CSS树 渲染树(render树) 规则、原理

  • 解析HTML，构建DOM树（这里遇到外链，此时会发起请求）
  • 解析CSS，生成CSS规则树
  • 合并DOM树和CSS规则，生成render树
  • 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
  • 绘制render树（paint），绘制页面像素信息
  • 浏览器会将各层的信息发送给GPU，GPU将各层合成（composite），显示在屏幕上

Step2: 生命周期四个阶段

  • 创建：组件创建
  • 挂载：挂载DOM
  • 更新：修改数据
  • 销毁：元素销毁
setup() //开始创建组件，创建的是data和method

onBeforeMount() // 组件挂载到节点上之前
// the component has finished the initial rendering and created the DOM nodes
onMounted() // 组件挂载完成，【组件完成初始渲染并创建 DOM 节点】

onBeforeUpdate() // 组件更新之前执行
onUpdated() // 组件更新完成之后执行

onBeforeUnmount() // 组件卸载之前执行
onUnmounted() // 组件卸载完成后执行

// 包含在<keep-alive>中的组件，会多出两个生命周期钩子函数
onActivated() // 被激活时执行
onDeactivated() // 比如从 A 组件，切换到 B 组件，A 组件消失时执行

onErrorCaptured() // 当捕获一个来自子孙组件的异常时激活钩子函数

在 Composition API 中，我们必须先将生命周期钩子导入我们的项目中，然后才能使用它们。这是为了使项目尽可能轻巧。我们可以在 setup 方法中访问 9 个生命周期钩子。

Step3: 示意

Vue 2 生命周期

使用 选项API，生命周期钩子是被暴露 Vue实例上的选项。我们不需要导入任何东西，只需要调用这个方法并为这个生命周期钩子编写代码。

Vue 3 生命周期

在组合API中，我们需要将生命周期钩子导入到项目中，才能使用，这有助于保持项目的轻量性。

Init Options API

image.png

initial render create & insert DOM nodes

image.png

re-render and patch

image.png

beforeCreate(){
    console.log('beforecreate:',document.getElementById('first'))//null
    console.log('data:',this.text);//undefined
    this.sayHello();//error:not a function
},
created(){
    console.log('create:',document.getElementById('first'))//null
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
},
beforeMount(){
    console.log('beforeMount:',document.getElementById('first'))//null
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
},
mounted(){
    console.log('mounted:',document.getElementById('first'))//<p></p>
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
}

Step4: created() mounted()

The fundamental difference between created() and mounted() is you do not have access to the DOM in created() yet.

created() is great for calling APIs, while mounted() is great for doing anything after the DOM elements have completely loaded.

The one caveat to this is that if you are using the Composition API, created(), and indeed beforeCreated() no longer exists. You have to instead use setup(). This function takes the place of both created() and beforeCreated().

Therefore, the DOM is still not available in setup(). In the Composition API, mounted() remains unchanged.

What is mounting in vue?

In vue, every instance is first stored as Virtual DOM objects(virtual html elements) in memory.When Vue create those components(virtual DOM)visible to the real DOM(Actual html elements) , the moment in which it create virtual DOM into real DOM is call 'Mounting'.

As the app state changes , vue detect changes user expect to see and put data changes to the real DOM from the memory.That is called an 'update'.

The entire process is called Vue Lifescyclehooks which has four stages, namely create,mount,update and destroyed.

What does mounting mean? A component is considered to be mounted once the virtual nodes representing its view have been created. These virtual nodes are an in-memory representation of the final DOM the application will render. medium.com/glovo-engin… vue 源码解析

vuejs/core

Step 5:

Vue源码系列-Vue中文社区

参考文档：

# Vue 3 生命周期完整指南

created与mounted区别

The Difference Between created() and mounted() in Vue.js

vue3.x 的生命周期和钩子函数

前端渲染 后端渲染

前端渲染和后端渲染

挂载

在前端开发中，页面渲染指什么？

DOM渲染原理

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

avatar
文章
阅读
粉丝