Vue.js 面试题及答案 本文档涵盖了 Vue.js 的一些重要概念和技术要点,包括 MVVM 模式、响应式数据原理、数组变化监测、nextTick 实现原理、生命周期钩子函数等。 MVVM 模式 MVVM 模式是 Model-View-ViewModel 的缩写, ViewModel 是 View 和 Model 层的桥梁,数据会绑定到 ViewModel 层并自动将数据渲染到页面中,视图变化的时候会通知 ViewModel 层更新数据。 响应式数据原理 Vue 2.x 中的响应式数据原理是使用 Object.defineProperty 重新定义 data 中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的 watcher),如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。 Vue 3.x 中的响应式数据原理是使用 Proxy 替代 Object.defineProperty,Proxy 可以直接监听对象和数组的变化,并且有多达 13 种拦截方法。 数组变化监测 在 Vue 2.x 中,数组变化监测使用了函数劫持的方式,重写了数组的方法,Vue 将 data 中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样当调用数组 api 时,可以通知依赖更新。 nextTick 实现原理 nextTick 的实现原理是使用宏任务和微任务,根据执行环境分别尝试采用 Promise、MutationObserver、setImmediate,如果以上都不行则采用 setTimeout,定义了一个异步方法,多次调用 nextTick 会将方法存入队列中,通过这个异步方法清空当前队列。 生命周期钩子函数 Vue 的生命周期钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。每个钩子函数都有其特定的用途和限制,例如 created 钩子函数可以对数据进行更改,而 mounted 钩子函数可以访问 Dom 节点。 Computed 和 Watch Computed 本质是一个具备缓存的 watcher,依赖的属性发生变化就会更新视图。Watch 是一个观察者,用于监听数据的变化,并执行相应的操作。 接口请求 一般来说,接口请求应该放在 mounted 生命周期钩子函数中,但是需要注意的是服务端渲染时不支持 mounted,需要放到 created 中。
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/release/download_crawler_static/88016838/bg1.jpg)
![](https://csdnimg.cn/release/download_crawler_static/88016838/bg2.jpg)
剩余6页未读,继续阅读
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 28
- 资源: 1844
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)