Vue2面试题

王程序源

已于 2023-03-16 17:51:56 修改

阅读量219

点赞数

文章标签：面试 vue.js Powered by 金山文档

于 2023-03-16 13:20:54 首次发布

本文链接：https://blog.csdn.net/qq_43342469/article/details/129583959

版权

父子组件的生命周期

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

兄弟组件的生命周期

beforeCreate 创建前状态--->>> 父组件

created 创建完毕状态--->>父组件

beforeMount 挂载前状态--->>>父组件

beforeCreate 创建前状态--->>> 兄弟组件A

created 创建完毕状态--->>兄弟组件A

beforeMount 挂载前状态--->>>兄弟组件A

beforeCreate 创建前状态--->>> 兄弟组件B

created 创建完毕状态--->>兄弟组件B

beforeMount 挂载前状态--->>>兄弟组件B

mounted 挂载完毕状态--->>> 兄弟组件A

mounted 挂载完毕状态--->>> 兄弟组件B

mounted 挂载完毕状态--->>> 父组件

beforeDestroy 组件销毁前状态--->>> 父组件

beforeDestroy 组件销毁前状态--->>> 兄弟组件A

destroyed 组件销毁后状态--->>> 兄弟组件A

beforeDestroy 组件销毁前状态--->>> 兄弟组件B

destroyed 组件销毁后状态--->>> 兄弟组件B

destroyed 组件销毁后状态--->>> 父组件

$nextTick

是Vue提供的一个全局API,是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM；

2. Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启1个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中-次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用；

3. 比如，我在干什么的时候就会使用nextTick，传一个回调函数进去，在里面执行dom操作即可；

4. 我也有简单了解nextTick实现，它会在callbacks里面加入我们传入的函数，然后用timerFunc异步方式调用它们，首选的异步方式会是Promise。这让我明白了为什么可以在nextTick中看到dom操作结果。

在下次DOM更新循环结束之后执行延迟回调，再修改数据之后立即调用nextTick来获取更新后的Dom，netxTIck主要是使用了宏任务和微任务，根据执行环境分别采用Promise，mustationObserver，setImmediate，如果以上都不行，会采用setTImeout定义一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法来清空当前队列。

$set

给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到.

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，

因为 Vue 无法探测普通的新增属性

(比如 this.myObject.newProperty = ‘hi’)

https://blog.csdn.net/weixin_44684357/article/details/124330279?ops_request_misc=&request_id=&biz_id=102&utm_term=$set&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-124330279.142^v73^control,201^v4^add_ask,239^v2^insert_chatgpt&spm=1018.2226.3001.4187

这个好懂

数据双向绑定原理

https://v2.cn.vuejs.org/v2/guide/reactivity.html

官网好理解

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。1、需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上setter 和getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

2、compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: 3.1）在自身实例化时往属性订阅器(dep)里面添加自己 3.2）自身必须有一个 update()方法 3.3）待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发Compile 中绑定的回调，则功成身退。 4、MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用Watcher 搭起Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) ->数据model 变更的双向绑定效果

v2和v3区别

vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下：

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。

vue2采用选项类型API，而vue3采用合成型API。

代码更加的简便整洁

生命周期

Vue2--------------vue3

beforeCreate -> setup()

created -> setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

activated -> onActivated

deactivated -> onDeactivated

路由相关

传参方式

https://blog.csdn.net/qq_42696432/article/details/125400186

一、router-link路由导航方式传参

父组件：<router-link to="/跳转到的路径/传入的参数"></router-link>

子组件：this.$route.params.content接受父组件传递过来的参数

二、调用$router.push实现路由传参

三、通过路由属性name匹配路由，再根据params传递参数

四、通过query来传递参数

编程式导航的使用方法以及常用的方法

1、路由跳转：this.$router.push()

2、路由替换：this.$router.replace()

3、后退：this.$router.back()

4、前进：this.$router.forward()

Vue路由守卫（通俗易懂）

https://blog.csdn.net/qq_43770056/article/details/125987056?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167895975716800182143809%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167895975716800182143809&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-125987056-null-null.142^v73^control,201^v4^add_ask,239^v2^insert_chatgpt&utm_term=%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB&spm=1018.2226.3001.4187

vuex

https://blog.csdn.net/m0_64346035/article/details/124619717?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167896016716782425151861%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167896016716782425151861&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-124619717-null-null.142^v73^control,201^v4^add_ask,239^v2^insert_chatgpt&utm_term=vuex%E9%9D%A2%E8%AF%95&spm=1018.2226.3001.4187