2020前端VUE面试题二

1、vue与react的区别

vue和react的区别

两者本质的区别：模板和组件化的区别

Vue本质是MVVM框架，由MVC发展而来；

React是前端组件化框架，由后端组件化发展而来；

Vue使用模板

React使用JSX

React本身就是组件化

Vue是在MVVM上扩展的

共同点：都支持组件化，都是数据驱动视图

2、vue生命周期

生命周期函数

组件的创建（1次）

beforeCreate()  在这个钩子执行的时候，只有实例本身的一些事件和生命周期函数

created()	在这钩子函数执行的时候，data和methods中的数据已经能够使用了 最早使用data中的数据

组件的挂载（1次）

beforeMount() 在这个钩子执行的时候,已经在内存中渲染好模板，但是还没有输出页面上

这个时候指令已经解析完毕

mounted() 在这个钩子执行的时候 页面和内存已经同步 mounted是最早操作dom节点的函数

组件的运行（0到n次）

beforeUpdate()  当data中的数据发生改变的时候会被调用，这个函数中内存已经发生改变，但是页面还是旧的

updated() 内存中的数据已经和页面同步起来

组件的销毁

beforeDestroy() data中的数据还是能用的  一般情况下用来释放内存 比如清楚定时器

destroyed()	组件已经不复存在

还有三种不常用的生命周期知道就行平时用不到 1、activated(组件激活时) 2、deactivated(组件未激活时) 3、errorCaptured(错误调用)

3、created()和mounted()的区别

created()最早使用data中的数据 mounted()最早操作dom节点的函数

4、vue中data为什么必须是一个函数

data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了。

5、watch、computed和methods的区别

computed 计算属性 计算结果会缓存,只有当依赖值改变才会重新计算

watch 监听属性 一个值的改变  需要另一个值的改变而改变,结果不会缓存

methods 事件方法 调用一次，执行一次,结果不会缓存

6、vue组件通信

**第一种：父传子：主要通过 props 来实现的**

具体实现：父组件通过 import 引入子组件，并注册，在子组件标签

上添加要传递的属性，子组件通过 props 接收，接收有两种形式一是通过数

组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以

设置要传递的数据类型和默认值，而数组只是简单的接收

---

**第二种：子传父：主要通过$emit 来实现**

具体实现：子组件通过通过绑定事件触发函数，在其中设置

this.$emit(‘要派发的自定义事件’，要传递的值)，$emit 中有两个参数一

是要派发的自定义事件，第二个参数是要传递的值

---

**第三种：兄弟之间传值有两种方法：**

方法一：通过 event bus 实现

具体实现:创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当

作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的 bus，在组件 A

中通过 bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件 B

中通过 bus.$on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接

收数据

方法二：通过 vuex 实现

具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的

数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要

素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions

中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而

同步到组件，更新其数据状态

7、mvvm的理解

**MVVM就是Model-View-ViewModel的缩写，MVVM将视图和业务逻辑分开。**

View：视图层，Model数据模型，而ViewModel是把两者建立通信的桥梁。

在MVVM框架下，View和Model之间没有直接的联系，而是通过ViewModel进行交互。
View和ViewModel之间以及Model和ViewModel之间的交互都是双向的，
因此view数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。
可以说它们两者是实时更新的，互相影响。 
 ViewModel通过双向数据绑定把View层和Model层连接了起来，
 而View和Model之间的同步工作完全是自动的，
 因此开发者只需要关注业务逻辑，不需要手动操作DOM，也不需要关注数据状态的同步问题，这些都由MVVM统一管理。

8、vue双向数据绑定

使用v-model来实现

Vue 实现 双向数据绑定主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的setter，getter，在数据变动时发布消息给订阅者触发监听。

9、vuex

定义：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用场景：需要构建一个中大型单页应用，您很可能会考虑如何更好的在组件外部管理状态，Vuex将会成为自然而然的选择。

优点：当你在state中定义了一个数据之后，可以在所在项目中的任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。

Vuex的运行机制：在组件中通过this.$store.dispatch来调用actions中的方法，在action中通过commit来调用mutations中的方法，在mutations的方法中操作state中的数据，数据只要更新就会立即响应到组件上。

核心：

①state：定义初始数据。

②mutations：更改Vuex的store中的状态的唯一方法是提交mutation

③getters：可以对state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters。

④actions：异步操作初始数据，其实就是调用mutations里面的方法。

⑤module：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

10、vue路由模式

在vue-router路由对象中，路由有两种模式：hash和history，而默认的是hash模式.

hash路由原理：

通过onhashchange来检测hash的变化，
然后通过location.hash来获取到当前的hash值，
从而根据hash的变化来控制元素的显示和隐藏

history路由原理

通过onpopstate来检测浏览器历史堆栈的变化，
然后通过history.pushState("路径",null,"参数")向历史堆栈中添加信息

11、vue路由传参

1、query 方式

query要用path引入=====>this.$route.query.name

query类似于ajax的get传参==>浏览器地址栏中显示参数

传参:

取值:

2、params 方式

params要用name引入=====>this.$route.params.name

params类似于post===>浏览器地址栏中不显示参数

传参：

取值：

12、v-for 与 v-if 的优先级

v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

13、vue指令

⑴ v-bind：给元素绑定属性

⑵ v-on：给元素绑定事件

⑶ v-html：给元素绑定数据，且该指令可以解析html标签

⑷ v-text：给元素绑定数据，不解析标签

⑸ v-model：数据双向绑定

⑹ v-for：遍历数组

⑺ v-if：条件渲染指令，动态在DOM内添加或删除DOM元素

⑻ v-else：条件渲染指令，必须跟v-if成对使用

⑼ v-else-if：判断多层条件，必须跟v-if成对使用

⑽ v-cloak：解决插值闪烁问题

⑾ v-once：只渲染元素或组件一次

⑿ v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度

⒀ v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)

14、Vue中key值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟DOM。

15、vue-router有哪几种导航钩子

① 全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；

 beforeEach（）每次路由进入之前执行的函数。

 afterEach（）每次路由进入之后执行的函数。

 beforeResolve（）2.5新增

② 单个路由（实例钩子）：某个指定路由跳转时需要执行的逻辑。

 beforeEnter（）

 beforeLeave（）

③ 组件路由钩子：

beforeRouteEnter（）

beforeRouteLeave（）

beforeRouteUpdate（）

16、v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏；

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