前端面试——VUE面试题型（一）

1、MVVM开发模式的理解：
MVVM是指Model，View，ViewModel三者，也就是把MVC中的Controller演变为ViewModel

• Model：代表数据模型，数据和业务罗技都在Model层定义；
• View：代表UI视图层，负责的是数据的展示；
• ViewModel：监听的是Model中数据的改变且控制视图的更新，处理用户交互操作；

Model和View是没有联系的，它们是通过ViewModel进行联系的Model和ViewModel直接实现双向数据绑定的关系。

2、Vue中的指令：
v-if、v-show、v-for、v-html、v-on、v-model、v-text、v-bind
用法：

• v-if:判断
• v-show:显示或隐藏
• v-for：数据循环
• v-html：渲染html结点以及字符串
• v-on：绑定事件
• v-model：实现数据的双向绑定
• v-text：渲染字符串
• v-bind：绑定属性

3、v-if和v-show的区别：.

• v-show仅仅控制元素的控制显示方式，将display属性通过block和none来回切换；
• v-if：是条件渲染，控制DOM结点的存在与否

使用区别：v-show会在使用上更加节省使用上的开销；当只需要一次显示或隐藏式，使用v-if更加合理；

4、VUE生命周期:
vue生命周期是指实例在创建和销毁的过程，由多个事件钩子函数组成，主要是创建、挂载、更新、卸载；第一次页面加载会触发创建和挂载的四个钩子函数（beforCreate、created、beforMount、Mounted），其中DOM渲染在mounted中完成；

• beforCreate：在创建实例之前发生，是第一个钩子函数，在此阶段data、methouds、computed、watch上的方法和数据都不可以访问。
• created：在实例创建完成之后发生，在当前阶段已完成的数据可观测到
• beforMount：在挂载之前发生
• mounted：在挂载完成之后发生
• beforUpdate：发生在更新之前
• update：发生在更新完成之后
• beforDestory：发生在实例销毁之前
• destoryed：发生在实例销毁之后，

var vm = new Vue({
el: '#app',
data: {
str:'测试'
},
methods: {},
// vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
// 加loading事件
beforeCreate() {
console.log("beforeCreate" + "------1");
},
// vue实例的数据对象data有了，$el还没有
// 结束loading、请求数据为mounted渲染做准备
created() {
console.log("created" + "-------2");
},
// vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
beforeMount() {
console.log("beforeMount" + "-------3");
},
// vue实例挂载完成，data.filter成功渲染
mounted() {
console.log("mounted" + "-------4");
},
// data更新前触发
beforeUpdate() {
console.log("beforeUpdate" + "-------5");
},
// data更新时触发
updated() {
console.log("updated" + "-------6");
},
// 组件销毁时触发
beforeDestroy() {
console.log("beforeDestroy" + "-------7");
},
// 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
destroyed() {
console.log("beforeDestroy" + "------app8");
},
});

5、让css只在当前组件起作用

在当前组件的style标签中添加scoped

6、vuex介绍
是vue框架中的状态管理器，在main.js中引入store；
vuex有5种属性：State、Getter、Mutation、Action、Module

• State：基本数据；
• Getter：从基本数据派生的数据；
• mutations：提交更改数据的方法，同步进行；
• actions：装饰器，包裹mutations，使其可以异步进行；
• modules：模块化Vuex
• actions去异步改变state的状态，mutations同步改变状态；

适用场景：登陆状态，组件之间的状态

7、Computed和Watch
computed叫做计算属性，而watch叫做侦听器。
computed：

• 是计算值，
• 应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
• 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

watch：

• 是观察的动作，
• 应用：监听props，$emit或本组件的值执行异步操作
• 无缓存性，页面重新渲染时值不变化也会执行

8、vue.js核心：
数据驱动和组件化

9、vue中组件传值方法

• 父组件与子组件传值：

父组件传给子组件：子组件通过props方法接受数据
子组件传给父组件：$emit方法传递参数

• 兄弟组件传值：

eventBus，相当于一个中转站，创建一个事件中心，用他来传递事件个接受事件。

10、vue双向绑定原理：
采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动是发布消息给订阅者，触发相应的监听回调

11、vue-router：
（1）全局路由：主要由两种：前置守卫，后置守卫

前置守卫注册：beforeEach

const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {

// do someting

});

参数 to 、from 、next 分别的作用：

• to: Route，代表要进入的目标，它是一个路由对象；
• from: Route，代表当前正要离开的路由，同样也是一个路由对象；
• next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数；

（2）路由独享的钩子
（3）组件内的导航钩子

12、axios：
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，用于请求后台资源的模块
使用：
（1）安装：npm install axios -s
（2）在main.js中引入import axios from（axios）
（3）挂载到vue实例中 vue.prototype.$axios=asios

13、vue中常见的修饰符：
.once：只触发一次
.self：当事件发生在该元素本身（非子元素）时触发
.stop:阻止单机事件冒泡
.prevent:提交事件不在重载页面
.captrue:事件发生时调用
14、v-if和v-for优先级
在v-if和v-for一起使用时，v-for具有比v-if更高的优先级，如果需要同时使用，v-if应该放在最外层。

15、scss介绍
scss是预处理css，须先下载三个loader：css-loader,node-loader,sass-loader;

16、的作用
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。