vue面试题整理

scoped原理

1.给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性

2.在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样

3.如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性（注：这就会带来其他影响）

webpack和vite对比

• 从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所以vite比用js编写的打包器快10-100倍。

 

 

webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。

vite: 启动服务器=> 请求模块时按需动态编译显示

• vite开发阶段，打包快。

• vite相关生态没有webpack完善，vite可以作为开发的辅助。

vite打包快的原因：

vite在启动的时候不需要打包，所以不用分析模块与模块之间的依赖关系，不用进行编译。这种方式就类似于我们在使用某个UI框架的时候，可以对其进行按需加载。同样的，vite也是这种机制，当浏览器请求某个模块时，再根据需要对模块内容进行编译。按需动态编译可以缩减编译时间，当项目越复杂，模块越多的情况下，vite明显优于webpack.

vue双向绑定原理即缺陷

双向绑定：通过Object.defineProperty劫持对应的数据和发布订阅者模式实现，definedProperty会劫持data中每一个属性的getter和setter，在数据改变时通知订阅者，订阅者收到通知后更新数据。 缺陷：不能监听对象新增属性和删除属性，不能监听数组的方法

Vuex 和 Pinia 的优缺点

Pinia的优点

• 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易

• 极其轻巧(体积约 1KB)

• store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见

• 支持多个Store

• 支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点

• 不支持时间旅行和编辑等调试功能

Vuex的优点

• 支持调试功能，如时间旅行和编辑

• 适用于大型、高复杂度的Vue.js项目

Vuex的缺点

• 从 Vue 3 开始，getter 的结果不会像计算属性那样缓存

• Vuex 4有一些与类型安全相关的问题

何时使用Pinia，何时使用Vuex

个人感觉：，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。 将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。

说一说vue钩子函数？

• 三个阶段 挂载阶段：beforeCreate、created、beforeMounted、mounted 更新阶段：beforeUpdate、updated 销毁阶段：beforeDestroy、destroyed 2. 每个阶段的特性 🤔 beforeCreate：创建实例之前 🤔 created：实例创建完成（执行new Vue(options)），可访问data、computed、watch、methods上的方法和数据，可进行数据请求，未挂载到DOM结构上，不能获取el属性，如果要进行dom操作，那就要用nextTick函数 🤔 beforeMount：在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数 🤔 mounted：实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，可进行数据请求 🤔 beforeupdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器 🤔 updated：虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新 🤔 beforeDestroy：实例销毁之前调用，this仍能获取到实例，常用于销毁定时器、解绑全局事件、销毁插件对象等操作 🤔 destroyed: 实例销毁之后 3. 父子组件执行顺序 挂载：父created -> 子created -> 子mounted> 父mounted 更新：父beforeUpdate -> 子beforeUpdated -> 子updated -> 父亲updated 销毁：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

说一说vue-router 实现懒加载的方法？

目前有三种方法： 1、利用Vue的异步组件和Webpack： const Home = require =>{ require(['../components/home.vue'],()=>{ resolve(require('../components/home.vue')); }) };2、AMD在1的基础上 const Home = require =>{ require(['../components/home.vue'],resolved); };3、ES6利用Webpack的chunk【推荐使用】 const Home = () =>import('../components/home.vue')

一、vue2响应式的实现原理：

• 对象类型：通过Object.defineProperty()对属性的读取，修改进行拦截（数据劫持）。

• 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

 

二、vue3的响应式

使用 window 上的内置构造函数 Proxy 实现。

1、实现原理

• Proxy (代理) ：拦截对象中任意属性的变化，包括属性值的读取、修改，属性的添加、删除。

• Reflect (反射)：对源对象的属性进行操作。

 

1.vuex是什么？怎么使用？哪种功能场景使用它？

答：vue框架中状态管理。在main.js引入store，注入。

新建了一个目录store.js，….. export 。

解决的问题：多个视图依赖同一个状态来自不同视图的行为需要变更同一状态适用于中大型的单页面应用

2.vuex有哪几种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module

state：存放公共数据的地方；

getter：获取根据业务场景处理返回的数据；

mutations：唯一修改state的方法，修改过程是同步的；

action：异步处理，通过分发操作触发mutation；

module：将store模块分割，减少代码臃肿；

3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

答：如果请求来的数据不是要被其他组件共用，而是仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

4.页面刷新后vuex的state数据丢失怎么解决？

就是放在localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate。

5.使用vuex的优势是什么？

其实vuex中的所有功能都能够通过其他的方式进行实现，只不过vuex对这些方法进行了整合处理，使用起来更加便捷，同时也便于维护。

6.分别简述computed和watch的使用场景

答：computed:

　　　　当一个属性受多个属性影响的时候就需要用到computed

　　　　最典型的例子： 购物车商品结算的时候

watch:

　　　　当一条数据影响多条数据的时候就需要用watch

　　　　例子：搜索数据

7.$nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，

你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

说一说Vue3.0 实现数据双向绑定的方法 ？

相比于Vue2.0的Object.defineProperty，Vue3.0通过Proxy实现数据劫持。Proxy的优势在于：1.按需监听，而不是一次性递归监听，只有访问到特定属性时才会对该属性进行深度监听 2. 监听数组 3.监听新增/删除属性。Proxy返回的是一个新对象，通过重写原对象的api，在其中加入拦截操作，同时通过Reflect提供的方法实现api的功能。订阅/发布模式没有改变。

说一说 vue 的 keep-alive ？

1、keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，相当于缓存，防止DOM的重复渲染；2、keep-alive有三个属性：include（只有名字匹配的才会被缓存）、exclude（任何名字匹配的都不会被缓存）、max（最多可以缓存多少个组件）。3、在路由router的中：相应组件下规定meta属性，定义keep-alive：true；4、可以结合Vue组件实例加载顺序讲解，VNode->实例化->_updata->真实Node，在实例化的时候会判断该组件是否被keep-alive保存过，是的话则直接拿其中的DOM进行渲染。