本文汇总了Vue相关的面试问题，包括Vue与React的区别、computed与watch的区别、Vue路由模式（hash与history）、style scoped属性原理、常用Vue指令介绍、Vuex的commit与dispatch用法、Webpack的loader与plugin、性能优化方法和Vue3.0的新特性等。深入探讨了Vue的数据响应式原理、生命周期、组件通信以及模板编译等内容。
目录
1 问了Vue 和react 的区别 没回答 不会 react
5.vuex的问题 commit和dispatch什么情况下使用
6.vuex数据更新视图不更新 （vuex中操作数据时遇见视图不更新的情况）
6.webpack里loader和plugin是什么 分别用过哪些
1Code Split 2 Preload / Prefetch 3 Network Cache 4 Core - js 5 PWA
Core - js core-js 是专门用来做 ES6 以及以上 API 的 polyfill
1HotModuleReplacement（HMR/热模块替换） 2OneOf 3 Include/Exclude 4 Cache 5 Thead
1 Tree Shaking 2 Babel 3 Image Minimizer
16.2 vue数据的双向绑定原理 ,如何实现vue的双向绑定（面试题）
Vue3.0 里为什么要用 Proxy API替代 defineProperty API？
Proxy 与 Object.defineProperty 优劣对比
vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象
vue中data的属性可以和methods中方法同名吗，为什么？
Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？
1 问了Vue 和react 的区别 没回答 不会 react
1.computed和wacth的区别
watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动
watch和computed各自处理的数据关系场景不同
1.computed擅长处理的场景：一个数据受多个数据影响
2.watch擅长处理的场景：一个数据影响多个数据
3 computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
4 computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作
5 computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器
watch跟computed的区别_前端开发小司机的博客-CSDN博客_watch和computed的区别
vue中 computed和watch的一些简单理解（区别）_林_xi的博客-CSDN博客
2.使用过哪种路由模式 hash和history的区别
前端路由：原理篇_Palate的博客-CSDN博客_前端路由原理
使用过history模式 ，
hash 模式 url 里面永远带着 # 号，在开发当中默认使用这个模式。
hash 原理
hash 通过监听浏览器 onhashchange 事件变化，查找对应路由应用。通过改变 location.hash 改变页面路由。
history 原理
利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法，改变页面路径。
history Interface 是浏览器历史记录栈提供的接口，可通过 back、forward、go 等，可以读取历览器历史记录栈的信息，pushState、repalceState 还可以对浏览器历史记录栈进行修改。
hash 与 history 区别对比：
vue-router实现history模式配置_注释科长的博客-CSDN博客_vue配置history模式
2.2、hash模式
1. 原理
使用window.location.hash属性及窗口的onhashchange事件，可以实现监听浏览器地址hash值变化，执行加载相应的内容。
2. 理解要点
什么是hash值
hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。如http://localhost/index.html#abc，这里的#abc就是hash；
hash值不会发送到服务器
hash值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面；
监听 hashchange 事件
监听 window 的 hashchange 事件，当散列值改变时，可以通过 location.hash 来获取和设置hash值；
hash值变化反应到地址栏
location.hash值的变化会直接反应到浏览器地址栏；
2.3、history 模式
1. 原理
history 对象保存了当前窗口访问过的所有页面网址。history 对象发生改变时，只会改变页面的路径，不会刷新页面。
每当 history 对象出现变化时，就会触发 popstate事件。
2. 理解要点
History 对象
HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题。History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。
由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。
浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。
改变url方法
在 history 路由中，我们一定会使用window.history中的方法，常见的操作有：
back()：后退到上一个路由；
forward()：前进到下一个路由，如果有的话；
go(number)：进入到任意一个路由，正数为前进，负数为后退；
pushState(obj, title, url)：前进到指定的 URL，不刷新页面；
replaceState(obj, title, url)：用 url 替换当前的，不刷新页面；
调用这几种方式时，都会只是修改了当前页面的 URL，不会刷新页面。如果有面试官问起这个问题“如何仅修改页面的 URL，而不发送请求”，那么答案就是这 5 种方法。但前 3 个方法只是路由历史记录的前进或者后退，无法跳转到指定的 URL。
pushState和replaceState 是HTML5 新增的history对象的方法，提供了对历史记录进行修改的功能。页面不会刷新，只是导致 History 对象发生变化，地址栏会有变化。
共同点
改变url地址，不刷新页面
监听url地址变化，加载相应内容
区别
hash会在浏览器地址后面增加#号，而history可以自定义地址。
hash路由不需要服务端的支持，history需要服务端支持，因为hash值不会发给后端，而history模式修改URL地址后，再进行刷新会使用该地址发送请求。
3.style标签的scoped属性的原理
Vue style 属性 scoped 原理详解_薛定谔的panda的博客-CSDN博客_scoped的原理
当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。通过该属性，可以使组件之间的样式互不污染，实现样式的模块化。
通过给 dom 增加一个动态属性，然后 css 选择器也额外添加对应的属性来选择该 dom ，达到该样式只作用于含有该属性的 dom，实现组件样式的模块化。
scoped 原理
主要通过使用 PostCSS 来实现以下转换：
通过给 dom 增加一个动态属性，然后 css 选择器也额外添加对应的属性来选择该 dom ，达到该样式只作用于含有该属性的 dom，实现组件样式的模块化。
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
转换结果：
<style>
.example[data-v-7668812d] {
color: red;
}
</style>
<template>
<div class="example" data-v-7668812d>hi</div>
</template>
scoped 穿透（深度作用选择器）
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
权重等级
- !important，加在样式属性值后，权重值为 10000
- 内联样式，如：style=””，权重值为1000
- ID选择器，如：#content，权重值为100
- 类，伪类和属性选择器，如： .content、:hover、[data-v-7668812d] 权重值为10
- 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
相同权重下：内嵌样式 > 内部样式表 > 外联样式表
我们可以通过改变权重修改样式，scoped 实质就是添加了属性选择器增加了10的权重，我们只要超过他就可以了。
如 vue-loader 提供的 >>> 实质就是为第三方组件增加了外层属性的类，并且该类也带有属性选择器，相当于增加了20的权重。
那么我们可以为组件增加一个命名空间，防止变量污染，然后在当前命名空间下添加选择器增加权重达到修改样式的目的。
4.常用的vue指令 说了大概十个左右
1 v-once
只会执行一次渲染，当数据发生改变时，不会再变化
2 v-show
v-show接受一个表达式或一个布尔值。相当于给元素添加一个display属性
3 v-if、v-else、v-else-if
v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。
说明一下：v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用
v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数。比较简单，看看案例：
4 v-for
v-for可用来遍历数组、对象、字符串。
只要连续生成一组结构相同，但是内容不同的HTML元素时，都用v-for批量生成
5 v-text和v-html
v-text是渲染字符串，会覆盖原先的字符串
v-html是渲染为html。{
{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子
6 v-bind
是用可以将标签内的属性值解析成js代码，在标签的属性中使用v-bind，双引号里的内容会被当作js解析（只能解析变量或三元表达式），如下：
如果给属性值设置为一个变量，那么可以使用v-bind
可以缩写为:<属性>="<变量>"
7 v-on
v-on用于事件绑定
语法: v-on:<事件类型>="<函数名>"
简写：@<事件类型>="<函数名>"
8 v-model
数据双向绑定指令，限制在 <input>、<select>、<textarea>、components中使用
语法： v-model="<变量名>"
适用：<input> / <select> / <textarea> / components组件
作用：在表单控件或者组件上创建双向绑定。
9 v-pre指令
作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
注意：不需要表达式。
10 v-slot指令
适用：只能用于<template>
作用：提供具名插槽或需要接收 prop 的插槽。
缩写：#
5.vuex的问题 commit和dispatch什么情况下使用
vuex 中的 dispatch 和 commit 的使用_雪爪鸿泥的博客-CSDN博客_vuex中的dispatch
dispatch 异步操作 this.$store.dispatch(‘actions的方法’，arg)； 调用 actions 里面的方法。
commit 同步操作 this.$store.commit(‘mutations的方法’，arg)；调用 mutations 里面的方法。
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)
commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
使用情况:
- dispatch：提交到 actions，action方法里可以提交mutation方法，可以包含异步操作，如向后台发送网络请求登录
- commit：提交到 mutations，mutation方法只能是同步操作，可用于登录成功后读取用户信息保存到cookie
this.$store.commit('aMutation', payload);
this.$store.dispatch('aAction', payload);Vuex的5个属性
state：单一状态树，用一个对象就包含了全部的应用层级状态。
getters：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutations：每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
action：action 类似于mutation，不同在于：action 提交的是mutation，而不是直接变更状态;action可以包含任意异步操作。
modules：模块化vuex，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
Vuex 使用流程：
下载 vuex
在 src 下创建 store 以及 index.js
引入 vue 和 vuex， 使用 vuex ，导出实例对象
在 main.js 中引入，在.vue 文件中使用
vuex 直接修改state 和commit ，dispatch 修改state 的区别_yuange11111的博客-CSDN博客_state.dispatch
vuex中store.commit和store.dispatch的用法及区别_天生喜欢的博客-CSDN博客_store.commit
最低0.47元/天 解锁文章
1937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
