2022vue面试的葵花宝典，面试必读

不同点： 实现本质方法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了。而且 v-if 不停的销毁和创建比较消耗性能。

总结：如果要频繁切换某节点，使用 v-show (切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用 v-if（初始渲染开销较小，切换开销比较大）。

5.watch 和计算属性(computed)有什么区别？

wach和computed都是监听数据，推荐使用computed，因为他具有缓存功能

computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；

wach监听的是已经在 data 中定义的变量，当该变量变化时，会触发 wach中的方法。

简单是说就是computed监听没有data声明的变量，wach监听在data声明的变量

6.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？

看实际情况，一般请求数据是在 created 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

在 created 的时候，视图中的 html 并没有渲染出来，所以此时如果直接去操作 html 的 dom 节点，一定找不到相关的元素。

而在 mounted 中，由于此时 html 已经渲染出来了，所以可以直接操作 dom 节点。

7.说出几种vue当中的指令和它的用法？

1.v-model 双向数据绑定；

2.v-for 循环；

3.v-if v-show 显示与隐藏；

4.v-on 事件；v-once : 只绑定一次

5.v-bind 单向数据绑定

8.为什么使用key?

因为需要使用 key 来给每个节点做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

9.v-bind和v-model区别

1.v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。

2.v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。

10.v-if和v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐 v-if 和 v-for 同时使用。如果 v-if 和 v-for 一起用的话，vue中的的会自动提示 v-if 应该放到外层去。

11.Vue中双向数据绑定是如何实现的

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；核心：关于VUE双向数据绑定，其核心是 Object.defineProperty() 方法。

12.vue的两个核心点

数据驱动： ViewModel，保证数据和视图的一致性。

组件系统： 应用类UI可以看作全部是由组件树构成的。

13.vue和jQuery的区别

jQuery是使用选择器 ' $ ' 选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val(); ,它还是依赖DOM元素的值。Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

14.delete和Vue.delete删除数组的区别

delete是删除元素以后变undefind,不影响其他键值

vue.delete是删除数组，还会影响其他元素键值

15.介绍一下Vue的生命周期

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

将要创建 ===>调用beforeCreate函数
创建完毕 ===>调用created函数
将要挂载 ===>调用beforeMount函数
挂载完毕 ===>调用mounted函数
将要更新 ===>调用beforeUpdate函数
更新完毕 ===>调用uodated函数
将要销毁 ===>调用beforeDestory函数
销毁完毕 ===>调用destroyed函数

16.vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

17.第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

18.DOM 渲染在哪个周期中就已经完成?

dom在mounted时就渲染完毕

19.简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这⾥，如在这结束loading事件，异步请求也适宜在这⾥调⽤
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统⼀处理，在这⾥写上相应函数
beforeDestroy : 可以做⼀个确认停⽌事件的确认框
nextTick : 更新数据后⽴即操作dom

20.Vue.cli中怎样使用自定义的组件

在 components 目录新建组件文件
在需要用到的页面import中导入
使用component注册
在 template 视图中使用组件标签

21.Vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure( )来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义方式进行引入。
不进行页面按需加载引入方式 import home from ../../common/home.vue
进行页面按需加载的引入方式：const home = r =>require.ensure([],() =>require('../../common/home.vue)))

22.scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？

css的预编译语言。

使用步骤：

第一步：先装css-loader、node-loader、sass-loader等加载器模块；
第二步：在build目录找到webpack.base.config.js，在extends属性中加一个拓展.scss；
第三步：在同一个文件，配置一个module属性；
第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”；
特性:

可以用变量，例如（$变量名称=值）；

可以用混合器；

可以嵌套；

23.如何让 CSS 只在当前组件中起作用？

将当前组件的<style>修改为<style scoped>

24.聊聊你对Vue.js的template编译的理解？

简⽽⾔之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
⾸先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是⽤以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，⾥⾯有（标签名、⼦节点、⽂本等等）

25.Vue 路由跳转的几种方式

第一种方式：router-link （声明式路由）
第二种方式：router.push(编程式路由)
第三种方式：this.$router.push() (函数里面调用)
第四种方式：this.$router.replace() (用法同上,push)
第五种方式：this.$router.go(n)

26.vue-router中导航守卫有哪些？

全局前置守卫、路由独享守卫、组件内守卫

27.什么是 MVVM ？

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

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

vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

29.`vuex`有哪几种属性？

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

30.不用`Vuex`会带来什么问题？

1.可维护性会下降，想修改数据要维护三个地方；

2.可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

3.增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背

31.vue-loader 是什么？用途有哪些？

解析.vue文件的一个加载器。

用途：js 可以写es6、style样式可以scss或less、template可以加jade等。

32.params和query的区别?

⽤法：query要⽤path来引⼊，params要⽤name来引⼊，接收参数都是类似的，分别是this. $router.query.name 和 this.$router.params.name。url地址显⽰：query更加类似于我们ajax中get传参，params则类似于post，说的再简单⼀点，前者在浏览器地址栏中显⽰参数，后者则不显⽰
注意点：query刷新不会丢失query⾥⾯的数据params刷新会丢失params⾥⾯的数据

33.vue初始化页⾯闪动问题

使⽤vue开发时，在vue初始化之前，由于div是不会vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然⼀般情况下这个时间很短暂，但是我们还是有必要解决这个问题的。
⾸先：在css⾥加上[v-cloak]{display:none;}，如果没有彻底解决问题，则在根元素加上style=“display:none;” :style="{display:block}"