Vue生命周期源码解读（大厂面试必备）(2)

initProvide(vm) // resolve provide after data/props

callHook(vm, ‘created’)

/* istanbul ignore if */

if (process.env.NODE_ENV !== ‘production’ && config.performance && mark) {

vm._name = formatComponentName(vm, false)

mark(endTag)

measure(vue ${vm._name} init, startTag, endTag)

}

if (vm.$options.el) {

vm.$mount(vm.$options.el)

}

}

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等，vue 把不同的功能逻辑拆成一些单独的函数执行。

我们关注到，在这个过程中插入钩子函数，提供给开发者调用的机会。在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM。

2.生命周期钩子

1. 生命周期钩子自动绑定this到实例上，因此你可以通过this.操作访问到数据和方法。注意不能使用箭头函数例如下方代码，因为箭头函数绑定外层的this会一直往上找。

created:()=>{// …代码}

2. 下面用在各个生命周期中打印下el，data，dom节点

export default {

name: ‘App’,

data() {

return {

title: ‘标题’

}

},

methods: {

onDestoryClick() {

this.$destroy()

}

},

beforeCreate() {

console.log(

`\n\nbeforeCreate打头\n$el:${this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(

this.$data

)}\n$refs.head:${JSON.stringify(

this.$refs.head

)}\nbeforeCreate结尾\n\n`

)

console.log(this.$vnode)

},

created() {

console.log(

`\n\ncreated打头\n$el:${this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(

this.$data

)}\n$refs.head:${JSON.stringify(this.$refs.head)}\ncreated结尾\n\n`

)

console.log(this.$vnode)

},

beforeMount() {

console.log(

`\n\nbeforeMount打头\n$el:${this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(

this.$data

)}\n$refs.head:${JSON.stringify(this.$refs.head)}\nbeforeMount结尾\n\n`

)

console.log(this.$vnode)

},

mounted() {

console.log(

`\n\nmounted打头\n$el:${this.KaTeX parse error: Expected 'EOF', got '}' at position 3: el}̲\ndata 😒{JSON.stringify(

this.$data

)}\n$refs.head:${JSON.stringify(this.$refs.head)}\nmounted结尾\n\n`

)

console.log(this.$vnode)

}

}

可以发现

1. beforeCreate中拿不到任何数据，它在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2. created中已经可以拿到data中的数据了，但是dom还没有挂载。会判断有无el，如果没有el则停止后面的模板挂载。

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

使用场景:ajax请求和页面初始化

3. beforeMount 和 created 拿到的数据相同 在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted中el被创建dom已经更新，vue实例对象中有template参数选项，则将其作为模板编译成render函数，编译优先级render函数选项 > template选项

使用场景:常用于获取VNode信息和操作，ajax请求

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

5. 由于beforeUpdate和updated使用的比较少，一般用计算属性和watch代替所以在此不在说明

6. destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

客户端渲染过程

1. 处理 HTML 标记并构建 DOM 树。

2. 处理 CSS 标记并构建 CSSOM 树。

3. 将 DOM 与 CSSOM 合并成一个渲染树。

4. 根据渲染树来布局，以计算每个节点的几何信息。

5. 将各个节点绘制到屏幕上。

最后，给大家分享一份2021最新Vue面试题含源码解析。由于篇幅原因，仅展示一部分面试题详解，更多最新的Vue面试题整理成了一个PDF，需要的朋友【点这里】免费领取。

vue-cli工程

• 构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？

• vue-cli 工程常用的 npm 命令有哪些？

• 请说出vue-cli工程中文件夹和文件的用处

• config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

• 请你详细介绍一些 package.json 里面的配置

vue核心知识点

• 对于Vue是一套渐进式框架的理解

• vue.js的两个核心是什么？

• 请问 v-if 和 v-show 有什么区别

• vue常用的修饰符

• v-on可以监听多个方法吗？

• vue中 key 值的作用

• vue-cli工程升级vue版本

• vue事件中如何使用event对象？

• $nextTick的使用

• Vue 组件中 data 为什么必须是函数

• v-for 与 v-if 的优先级

• vue中子组件调用父组件的方法

• vue中 keep-alive 组件的作用

• vue中如何编写可复用的组件？

• 什么是vue生命周期？

• vue生命周期钩子函数有哪些？

• vue如何监听键盘事件中的按键？

• vue更新数组时触发视图更新的方法

• vue中对象更改检测的注意事项

• 解决非工程化项目初始化页面闪动问题

• v-for产生的列表，实现active的切换

• v-model语法糖的组件中的使用

• vue中自定义过滤器

• vue等单页面应用及其优缺点

• 什么是vue的计算属性？

• vue-cli提供的几种脚手架模板

• vue父组件如何向子组件中传递数据？

• vue弹窗后如何禁止滚动条滚动？

• 计算属性的缓存和方法调用的区别

• vue-cli中自定义指令的使用

vue-router

• vue-router如何响应 路由参数 的变化？

• 完整的 vue-router 导航解析流程

• vue-router有哪几种导航钩子（ 导航守卫 ）？

• vue-router传递参数的几种方式

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

-router 导航解析流程

• vue-router有哪几种导航钩子（ 导航守卫 ）？

• vue-router传递参数的几种方式

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】