vue中一些常见的面试题

前言

　　一位正在学习前端的菜鸟，虽菜，但还未放弃。

内容

　　1，说一下vue中的指令

　　答：

　　　　①，v-html：主要用来渲染html节点，其作用与原生的innerHtml基本一致

　　　　②，v-text：主要用来渲染文本，其作用与原生的innerText基本一致

　　　　③，v-on：主要用来绑定事件， 简写是@ 支持多个事件一起绑定 如   v-on="{click:fun,dbclick:fun1}"

　　　　④，v-bind：主要用来绑定属性，简写是 : 

　　　　⑤，v-model：主要是用来跟表单进行双向数据绑定

　　　　⑥，v-for：主要用来多次渲染节点 注意：官网不推荐跟v-if一起使用，因为v-for的优先级更高 所以v-for每次在循环的时候都会进行v-if 这样很影响性能

　　　　⑦，v-if：主要用来判断是否创建和删除节点，可以搭配v-else 和v-else-if 一起使用

　　　　⑧，v-show：主要用来显示和隐藏原理，其主要原理根据css属性中的display为block和none来决定的

　　　　⑨，v-once：主要用来渲染元素或者组件一次的，绑定完一次后就不会再有相关联了，所以性能更好

　　　　⑩，v-block：主要用来解决插值表达式中的闪烁问题

　　

　　2，vue生命周期的的理解

　　　　答：vue的生命周期主要分为8个阶段，3大状态（其中第一个状态一定会触发，二三阶段需要特点的条件才会触发）

　　　　　　第一个状态有四个生命周期函数

　　　　　　　　①，创建前(beforeCreate)/创建后(created) 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。 

　　　　　　　　②，载入前(beforeMount)/载入后(mounted) 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

　　　　　　第二个状态有俩个生命周期函数

　　　　　　　　①，更新前(beforeUpdate)/更新后(updated) 这个阶段主要是data里面的数据发生改变时，就会触发这俩个方法

　　　　　　第三个状态有俩个生命周期函数

　　　　　　　　①，销毁前(beforeDestroy)/销毁后(destroyed) 这个阶段主要就是销毁vue实例已经解除了事件监听以及和dom的绑定才会触发，触发完以后该实例将不会再产生任何生命周期函数，但是dom依旧存在

 

　　3，为什么vue组件里面的data必须是一个函数

　　　　答：因为vue的组件化开发主要就是为了自己的代码自己管理，复用性高等优点，要是data里面不是作为一个函数的话，那么所有的数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改，而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），对象都是存在于堆内存里面的，他们的内存地址不一样，所以则不会出现这种问题

 

　　4，vue中的computed和watch有什么区别？

　　　　答：

　　　　computed：①，支持缓存，就是只有当依赖效果发生改变时，才会重新计算，否则就是使用缓存效果，性能较好

　　　　　　　　　   ②，不支持异步，当computed里面有异步的时候操作是无效的，无法监听数据的变化

　　　　　　　　　　③，如果computed写的是一个函数的话，默认是走get方法，如果需要set方法，则这俩个都要写

　　　　　　　　　　④，computed在实际开发中，更多的用于多个属性计算一个属性的时候使用

　　　　watch:①，不支持缓存，每次data数据发生改变，都会触发该方法

　　　　　　　②，支持异步，watch里面可以写异步的操作

　　　　　　　③，监听的函数默认会传俩个参数过来，第一个是新的数据，第二个是之前的数据

　　　　　　　④，在实际开发中，一般用在一个数据改变多个数据的时候比较推荐使用

 

　　5，vue的双向数据绑定原理是什么?

　　　　答：vue的双向数据绑定原理主要是结合了数据劫持和观察者模式来进行互绑的，也就是数据层改变，视图层也就跟着改变，视图层改变，数据层也就随着改变，他内部主要的原理是运用了Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

　　6,vuex中有几个核心属性，分别是什么？

　　　　答，一共有5个核心属性

　　　　　　①：state 唯一数据源,Vue 实例中的 data 遵循相同的规则

　　　　　　②：getters 可以认为是 store 的计算属性,就像computed属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值

　　　　　　③：mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发

　　　　　　④：action action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作

　　　　　　⑤：module  由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块!