#### 1.如何理解mvvm设计模式
模型-视图-视图模型(MVVM) 是一种软件架构设计模式和事件驱动编程技术，可简化用户界面。
MVVM
M Model 模型指的是数据层
V View指向用户页面
VM ViewModel 视图模型
视图模型是MVVM模式的核心，是连接视图和模型的桥梁，当模型属性发生变化时无需人工干预。然而，使用DOM 元素来更改视图的外观，反之亦然，称为数据的双向绑定。
#### 2. v-if 和v-show 的区别及使用场景
虽然v-if 和v-show 看起来很相似，如果条件不成立，则不会显示相应的标签元素，但这两个选项之间存在差异。
1. v-if在条件切换时正确创建和销毁标签，但v-show只在初始化时加载一次，因此v-if的成本也比v-show大。
2. v-if 是惰性的，仅在条件为真时才绘制标签。如果初始条件不为真，则v-if 不会绘制标签。 v-show只是执行一个简单的CSS（显示）切换，而不管初始条件是否满足。
3. v-if适用于不需要频繁显示和隐藏元素的情况。
v-show适用于需要频繁显示和隐藏元素的场景。
#### 3. 什么是事件修饰符和按键修饰符？
赛事预选赛：
.prevent 阻止事件的默认行为
.stop 停止事件冒泡
.capture 设置事件捕获机制
您只需单击.self 元素本身即可触发事件
.once 事件仅发生一次
关键资格赛：
。标签
。输入
。 Esc键
。空间
.delete（捕获“删除”和“空格”键）
。向上
。在下面
。左边
。正确的
#### 4. v-model 修饰符是什么？
.trim 删除前导和尾随空格
.lazy 仅在输入框失去焦点或按下Enter 键时更新内容，而不是实时更新。
.number 将数据转换为数值类型（原本是字符串类型）
#### 5.为什么需要给v-for添加key？
影响：
1、key的主要作用是高效更新虚拟DOM，提高渲染性能。
2. key属性有助于避免数据混乱。
原则：
1.Vue实现了一组虚拟DOM。这允许您通过简单地操作数据来重新渲染页面，而无需直接操作DOM 元素。其背后的原理是高效的Diff 算法。
2、当页面数据发生变化时，Diff算法只比较同级节点。
3、如果节点类型不同，则直接删除之前的节点，创建并插入新的节点。不比较该节点后面的子节点。
如果节点类型相同，则重置节点属性，进行节点更新。
4. 使用密钥唯一标识每个节点。 Diff算法可以优雅地失败这个节点，“就地更新”会找到正确的位置来插入新节点。
#### 6. v-for 和v-if 的优先级
v-for 优先于v-if。
如果v-for和v-if同时出现，则无论测试条件是否成立，v-for循环都会执行一次，浪费性能，所以请尽量避免同时使用。
#### 7、组件中的data为什么是函数，new Vue 实例里，data 可以直接是一个对象
1.组件是为了复用而使用的。组件内的数据以函数返回值的形式定义。这样，每次重用组件时，该函数都有一个独立的作用域。新数据的返回类似于为每个组件实例创建私有数据空间，允许每个组件实例维护自己的数据。
2.简单地以对象形式编写，对象是引用类型，因此所有组件实例共享数据的副本，因此如果它发生变化，一切都会改变。
3.新的vue代码不复用，可以用对象形式编写。
#### 8、computed和watch的区别是什么
计算属性：
1.支持缓存。仅当相关数据发生更改时才会重新计算。
2. 不支持异步。如果计算结果有异步操作，无法观察到数据的变化，则无效。
3、如果需要改变Compulated中的数据，则需要创建get和set两个方法，当数据发生变化时调用set方法。
4、擅长计算的场景：一条数据受多条数据影响，比如计算购物车的总金额。
聆听财产观察：
1.不支持缓存，数据变化直接触发相应操作。
2. Watch支持异步。监听函数有两个参数。第一个参数是最新值，第二个参数是输入之前的值。
3. 立即：加载组件立即触发回调函数的执行。
4、deep:true表示改变obj的属性会触发这个监听器的handler方法来处理逻辑。
5. Watch擅长的场景：一条数据影响多条数据（例如搜索框）
#### 9、组件化和模块化的区别
1. 组件相当于库。库是封装可以在项目或不同类型的项目中重用的代码的工具。
2、该模块对应业务逻辑模块，按需封装同类型项目中的功能逻辑。
#### 10、怎么理解vue中的虚拟DOM
原则：
使用JavaScript对象来模拟真实的DOM树，对真实的DOM进行抽象。
diff 算法——比较两个虚拟DOM 树之间的差异。
pach 算法——将两个虚拟DOM 对象之间的差异应用到真实DOM 树上。
优势：
1、性能优化
2.无需手动操作DOM
3、跨平台、服务端渲染等都是可能的。
#### 11、怎么理解vue的生命周期
Vue生命周期：VUE实例从创建到销毁的整个过程。这个过程可以分为三个阶段。
第一阶段：初始化阶段创建Vue实例，准备数据，准备模板，渲染视图。
第二阶段：数据更新阶段。当数据发生变化时，会比较新旧DOM，并执行差异更新。
第三阶段：实例销毁阶段当调用vm.$destroy() 时，vue 实例被销毁，相关资源被释放。如果此时更新数据，视图不会改变。
#### 12、vue 钩子函数有哪些，有哪些使用的场景
1. 每个阶段包含一个钩子。
beforeCreate 数据注入VM实例之前，VM上当前没有数据
创建的数据在插入VM 实例之前已存在于VM 上
在beforeMount生成的结构替换视图之前，DOM尚未更新。
此时，在生成的挂载结构替换视图之前，DOM 已更新。
beforeUpdate数据发生改变（dom更新之前）
dom更新后更新的数据发生了变化
当缓存组件被keepalive 激活时，将调用active。
当缓存组件被keepalive 停用时，将调用deactivated。
beforeDestroy 实例无论是否在资源之前都会被销毁。
无论是否销毁资源后，该实例都会被销毁。
这些钩子函数由Vue 在Vue 生命周期的各个阶段自动调用。
2、常用的钩子函数使用场景：
beforeCreate 进行加载渲染
创建完成加载，发送数据请求，检索数据
可以在挂载时对dom 进行操作
更新监测数据更新
beforeDestroy 销毁非vue 资源以防止内存泄漏，例如清除计时器。
使用组件缓存时，如果想每次切换时都发送请求，则需要编写激活的请求函数。如果写成created或者mounted，只有在组件加载时才会生效。第一次。
#### 13、Vue 的父组件和子组件生命周期钩子函数执行顺序
1、Vue父组件和子组件生命周期钩子函数执行顺序可以分为四部分：
1）加载渲染进程
父级beforeCreate – 父级创建- 父级beforeMount – 子级beforeCreate – 子级创建- 子级beforeMount – 子级安装- 父级安装
2）子组件更新流程
父级更新前- 子级更新前- 子级更新- 父级更新
3）父组件的更新流程
父级beforeUpdate – 父级已更新
4）销毁过程
父级beforeDestroy – 子级beforeDestroy – 子级被销毁- 父级被销毁
#### 14、vue组件传值的方式
1.从父亲到儿子
通过props 传递
父组件：子组件：list=\’list\’/
子组件： props[\’list\’] 接收数据并以与data 中定义的数据相同的方式使用它。
2.从儿子到父亲
当您将自定义事件绑定到父组件内的子组件时，子组件会触发该事件并通过$emit() 传递值。
父组件：child @receive=\’getData\’ /
getData(value){value是接收到的值}
子组件： this.$emit(\’receive\’,value)
3.从兄弟组件传递值
通过中央let总线进行通信=new Vue()
组件：方法：{
发送数据(){
总线.$emit(\’getData\’,值)
} 发送
B组件：created(){
bus.$on(‘getData’,(value)={value为接收到的数据})
接收数据
#### 15、$nextTick是什么？原理是什么
背景：
1、简单的说，Vue改变数据后，视图并不是立即更新，而是在同一个事件循环中所有数据改变完成后统一更新。
意义：
2. 在下一个DOM 更新周期完成后执行延迟回调。更改数据后立即使用此方法来获取更新的DOM。 nextTick() 延迟回调函数，直到DOM 下一次更新数据。简单理解，就是当DOM中数据更新、渲染时，函数会自动执行。
原则
3.Vue使用异步队列来控制DOM更新和nextTick回调的顺序执行。
简而言之，nextTick 被封装在Promise 和setTimeout 中，并使用事件包装机制来保证只有在DOM 上的所有操作都更新后才显示nextTick。
场景：
4.1 点击获取元素的宽度
4.2 使用Swiper插件通过Ajax请求图像后的滑动问题
4.3 单击按钮，显示原来用v-show=false 隐藏的输入框并获得焦点。
#### 16.vue 如何获取DOM
1. 首先设置标签的ref值，然后通过this.$refs.domName检索它。此操作必须在安装好的平台上执行。
2. 例如：
模板
div ref=\’测试\’/div
/模板
安装（）{
const dom=this.$refs.test
}
#### 17、v-on可以监听多个方法吗
能
例如：
输入类型=\’文本\’ v-on=\'{ input:onInput,focus:onFocus }\’
#### 18、谈谈你对 keep-alive 的了解
1.keep-alive是Vue中的内置组件，允许包含的组件保留其状态并避免重新渲染。
2.通常与路由和动态组件结合使用来缓存组件。
3. 支持enable和disable两种钩子函数，当组件被启用时，会触发启用的钩子函数，当组件被移除时，会触发禁用的钩子函数。
4. 指定包含和排除属性。两者都支持字符串或正则表达式。 include 表示仅缓存名称匹配的组件，exclusion 表示不缓存名称匹配的组件，exclusion 优先于include。昂贵的；
例如：
保持活动包括=\’a\’
成分
!– 名称为a 的组件被缓存。 —
/成分
/活着
保持活动排除=\’a\’
成分
!– 除名为a 的组件外，所有组件均被缓存。 —
/成分
/活着
#### 19.谈谈你对老虎机的理解
1.什么是槽位？
1.1 槽位（Slots）是Vue提出的一个概念，顾名思义，槽位用于决定携带哪些内容插入到指定的位置，从而使模板模块化，更加灵活。
1.2 父组件控制槽位是否显示以及如何显示，子组件控制槽位出现的位置。
2. 使用插槽
2.1 默认插槽将插槽写入子组件。槽位置就是父组件显示的内容。
2.2 命名槽子组件定义了三个槽标签，其中两个槽标签分别添加了名称属性页眉和页脚。
在父组件中使用一个模板，并写入相应的槽名称，以指定内容在子组件中的实际位置。
2.3 Scope Slot 将需要的值slot :data=\’user\’/slot 绑定到子组件的slot 标签上。
在父组件中使用slot-scope=\”user\” 来接收子组件传递的值。
#### 20.如何在vue中使用动态组件
1、使用组件的is属性来切换不同的组件。
Component :is=\’TabComponent\’/component TabComponent: 已注册组件的名称
#### 21.v-model的原理是什么？
1. v-model提供两个主要功能。视图层输入值会影响数据中的属性值。属性值的变化会更新图层的数值变化。
2、v-model指令的实现：
3.1 v-bind:绑定响应数据
3.2 触发输入事件和数据传输（核心和重点）
3、底层原理是（双向数据绑定原理）：
3.1 一方面，模态层通过defineProperty劫持各个属性，当检测到变化时，通过关联的页面元素进行更新。
3.2 编译模板文件，另一方面，将输入事件绑定到控件的v-model上，允许页面输入实时更新关联的数据属性值。
#### 22、vue响应式的原理
一、原理：
Vue 反应式原理的核心是通过ES5 的Object.defindeProperty 劫持数据，并使用get 和set 方法获取和设置。在读取data中的数据时，增加了get和set方法。当data中的数据发生变化时，会自动调用set方法。当检测到数据变化时，观察者Wacher会自动触发当前组件的重新渲染。对于新的虚拟DOM树，Vue框架会遍历并比较新虚拟DOM树和旧虚拟DOM树中每个节点的差异，最后记录加载操作。将所有记录的差异部分更改为实际DOM 树。
2、实现底层代码：
让数据={
name: \’松鼠\’,
年龄： 20,
sex:“男”
}
//vue2.0实现使用Object.defineProperty进行数据劫持
for（键入数据）{
让temp=数据[键]
Object.defineProperty(数据， 数据[键], {
获得（）{
返回温度
},
设定值）{
温度=值
}
})
}
//vue3.0使用Proxy实现数据代理
让newData=新代理（数据，{
获取（目标，键）{
返回目标[键]
},
设置（目标，键，值）{
目标[键]=值
}
})
#### 23.vue2.0和vue3.0响应能力的差异
1. 对象.defineProperty
1）用于监控对象的数据变化
2）无法监听数组变化（下标、长度）
3）只能劫持对象本身的属性。动态添加的属性无法被劫持。
2. 代理
1）代理返回一个新对象，并可以通过操作返回的新对象来完成其目标。
2）可以监控数组变化和动态添加数据。
#### 24、router和route的区别
1.$router对象
1）$router对象是全局路由的实例，也是router构造方法的实例。
2）$router对象的方法有push()、go()、replace()。
2.$route对象
1）$route对象代表当前的路由信息，包括解析当前URL得到的信息。包含当前路径、参数、查询对象等。
2）$route对象的属性包括path、parameters、query、hash等。
#### 25、路由传参的方式和区别
答复：
1. 方法：参数和查询
2. 区别： 1）params 使用名称，传递的参数不会像post 那样显示在地址栏中。
2）查询使用路径，传递的参数显示在地址栏中，类似于get。
3、举个例子：
1）传递params参数
路径：this.$router.push({
name: \’详细信息\’,
参数： {
id: 身份证号
}
})
连接：this.$route.params.id
2）传递查询参数
路径：this.$router.push({
path: \’/详细信息\’,
查询： {
id: 身份证号
}
})
接载：this.$route.query.id
#### 26、Vue模版编译原理知道吗，能简单说一下吗？
1、Vue的编译过程简单来说就是将模板转换为渲染函数的过程。
2.首先解析模板并生成AST语法树（描述整个模板的JavaScript对象的形式）。 它使用多个正则表达式来解析模板，当遇到标签或文本时，执行相应的钩子进行相关处理。
3.Vue中的数据是响应式的，但并非模板中的所有数据实际上都是响应式的。有些数据在初次渲染后并没有改变，对应的DOM也没有改变。然后优化过程深入探索AST 树并根据相关条件标记树节点。您可以跳过比较这些标记的节点（静态节点），这可以显着优化您的运行时模板。
4. 编译的最后一步是将优化后的AST 树转换为可执行代码。
#### 27、SSR了解吗
1.SSR是服务端渲染。换句话说，Vue 在客户端将标签渲染为HTML，在服务器端完成，然后将该HTML 直接返回给客户端。
2. SSR的优点是更好的SEO和更快的首屏加载速度。然而，也存在一些缺点。例如，服务端渲染只支持两个钩子：beforeCreate和created。如果您需要一些外部扩展库，您还需要一个服务器端渲染应用程序。需要Node.js运行环境。它还给服务器带来了沉重的负载。
#### 28、你都做过哪些Vue的性能优化
1. v-if和v-for不能一起使用
2.页面使用keepalive缓存组件。
3.适当使用v-if和v-show
4. 保证key是唯一的
5、使用路由延迟加载、异步组件、组件封装
6.图像稳定、节流
7.按需导入第三方模块
8.图像延迟加载
9. 使用精灵图
10. 代码压缩
#### 29、Vue-router路由有哪几种模式？
通常有两种模式：
1.哈希模式：如果哈希值随后发生变化，则浏览器不会在每次哈希值发生变化时向服务器发送请求或刷新浏览器。
2.历史模式：利用HTML5的新PushState()和replaceState()方法。这两个方法在现有的back、forward、go方法的基础上应用于浏览器的历史堆栈，并提供修改历史记录的能力。但是，当您执行更改时，浏览器不会立即将请求发送到后端，即使当前URL 已更改。
#### 30、Vuex 是什么？有哪几种属性？
1
、Vuex 是专为Vue设计的状态管理工具，采用集中式储存管理 Vue 中所有组件的状态。
2、属性
（1）state属性：基本数据
（2）getters属性：从 state 中派生出的数据
（3）mutation属性：更新 store 中数据的唯一途径，其接收一个以 state 为第一参数的回调函数
（4）action 属性：提交 mutation 以更改 state，其中可以包含异步操作，数据请求
（5）module 属性：用于将 store分割成不同的模块。
#### 31、axios封装请求拦截器和响应拦截器
interceptors：【ɪntərˈsɛptərz】
1、项目中会在utils文件中，封装一个request.js文件
2、通过axios.create()配置baseURL，并得到一个request实例
3、通过request.interceptors.request.use来配置请求拦截
4、通过request.interceptors.response.use来配置响应拦截
#### 32、webpack在项目中的常见配置
1、 配置兼容编译ES6转成ES5
用babel来编译，npm i babel-core babel-loader babel-preset-env babel-polyfill babel-plugin-transform-runtime –save-dev
2、配置跨域代理服务
用proxy进行代理，在devServer里面配置，proxy:{\’/api\’:{target:代理的地址}}
3、配置打包路径
publicPath:\’/\’
4、配置打包出去文件
outputDir: \’dist\’
5、配置执行环境变量
启动的端口 const port = process.env.port || process.env.npm_config_port || 9528
1、 配置兼容编译ES6转成ES5
用babel来编译，npm i babel-core babel-loader babel-preset-env babel-polyfill babel-plugin-transform-runtime –save-dev
2、配置跨域代理服务
用proxy进行代理，在devServer里面配置，proxy:{\’/api\’:{target:代理的地址}}
3、配置打包路径
publicPath:\’/\’
4、配置打包出去文件
outputDir: \’dist\’
5、配置执行环境变量
启动的端口 const port = process.env.port || process.env.npm_config_port || 9528
第一.使用this.$forceUpdate强制重新渲染
<template>
<button @click=\”reload()\”>刷新当前组件</button>
</template>
<script>
export default {
name: \’comp\’,
methods: {
reload() {
this.$forceUpdate()
}
}
}
</script>
第二.使用v-if指令
<template>
<comp v-if=\”update\”></comp>
<button @click=\”reload()\”>刷新comp组件</button>
</template>
<script>
import comp from \’@/views/comp.vue\’
export default {
name: \’parentComp\’,
data() {
return {
update: true
}
},
methods: {
reload() {
// 移除组件
this.update = false
// 在组件移除后，重新渲染组件
// this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
this.$nextTick(() => {
this.update = true
})
}
}
}
</script>第一.使用this.$forceUpdate强制重新渲染
<template>
<button @click=\”reload()\”>刷新当前组件</button>
</template>
<script>
export default {
name: \’comp\’,
methods: {
reload() {
this.$forceUpdate()
}
}
}
</script>
第二.使用v-if指令
<template>
<comp v-if=\”update\”></comp>
<button @click=\”reload()\”>刷新comp组件</button>
</template>
<script>
import comp from \’@/views/comp.vue\’
export default {
name: \’parentComp\’,
data() {
return {
update: true
}
},
methods: {
reload() {
// 移除组件
this.update = false
// 在组件移除后，重新渲染组件
// this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
this.$nextTick(() => {
this.update = true
})
}
}
}
</script>
#### 34、在使用计算属性的时,函数名和data数据源中的数据可以同名吗?
不可以,
在初始化vm的过程，因为不管是计算属性还是data还是props 都会被挂载在vm实例上，会把data覆盖了,因此 这三个都不能同名
#### 35、vue中data的属性可以和methods中的方法同名吗?
不可以
vue源码中的 initData() 方法会取出 methods 中的方法进行判断，如果有重复的就会报错
#### 36、你知道style加scoped属性的用途和原理吗?
用途：防止全局同名CSS污染
原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式.
scoped会在元素上添加唯一的属性（data-v-x形式），css编译后也会加上属性选择器，从而达到限制作用域的目的
#### 37、如何在子组件中访问父组件的实例?
Vue中子组件调用父组件的方法，这里有三种方法提供参考：
1：直接在子组件中通过this.$parent.event来调用父组件的方法
2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件
3：父组件把方法传入子组件中，在子组件里直接调用这个方法
#### 38、watch的属性用箭头函数定义结果会怎么样
不应该使用箭头函数来定义 watch :
例如：
watch: {
a: () => { // 这里不应该用箭头函数
console.log(this);
this.sum = this.a + this.b;
}
})。
理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，
this.a 将是 undefined。
注意：methods里面定义的方法也不要用箭头函数
#### #### 39、怎么解决vue打包后静态资源图片失效的问题
在vue-cli 需要在根目录下建一个vue.config.js 在里面配置publicPath即可
默认值为/，更改为./就好了
40、怎么解决vue动态设置img的src不生效的问题
因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。
<img :src=\”require(\’@/assets/images/xxx.png\’)\” />
#### 41、EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢?
原因：因为我们的事件是全局的，它并不会随着组件的销毁而自动注销，需要我们手动调用注销方法来注销。
解决：我们可以在组件的 beforeDestroy ,或 destroy 生命周期中执行注销方法，手动注销事件
#### 43、你认为vue的核心是什么?
组件化
双向数据绑定
#### 44、在.vue文件中style是必须的吗？那script是必须的吗?
在.vue 文件中，template是必须的，而script与style都不是必须的。都没有的话那就是一个静态网页
#### 45、说说vue的优缺点
优点：
1.数据驱动
2.组件化
3.轻量级
4.SPA(单页面)
5.版本3.0的界面化管理工具比较好使
6.vue易入门
7.中文社区强大，入门简单，提升也有很多的参考资料。
缺点：
1.不支持IE8及以下浏览器
2.吃内存（每个组件都会实例化一个Vue实例，实例的属性和方法很多）
3.定义在data里面的对象，实例化时，都会递归的遍历转成响应式数据，然而有的响应式数据我们并不会用到，造成性能上的浪费
#以上关于vue阶段高频面试题的相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91751.html
