Vue面试题

Vue

简述下MVVM

MVVM全称是MODEL-VIEW-VIEWMODEL
Vue是以数据为驱动，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，当数据发生变化，DOM也会发生变化
ViewModel是Vue的核心，它是Vue实例。Vue实例的作用域是某个HTML元素
DOMListeners和DataBindings是实现数据双向绑定的关键
DOMListeners监听View层DOM的变化，当发生变化，则Model的数据发生变化
DataBindings监听Model层的数据变化，当数据变化，则View层中DOM发生变化

什么是虚拟DOM

虚拟DOM是Vue和React的核心
它的本质是通过JS模拟DOM树
也就是DOM发生变化时放在JS层来操作，因为操作DOM代价很大。
虚拟DOM不会立即操作浏览器DOM，提升浏览器的性能

Vue的生命周期

开始创建-编译模板-挂载DOM-  渲染-更新-渲染

beforeCreat在实例初始化之后，此刻data和el是undefined
created实例创建完成，完成了data的初始化，el还是为undefined
beforeMounted挂载之前调用，完成data和el的初始化，把data和模板生成虚拟DOM，还没挂载到HTML中
mounted挂载完成，把虚拟DOM渲染到真实的DOM中，此时可以ajax操作
beforeUpdate,update数据data变化时候自动执行的钩子函数
beforeDestroy
destroyed 组件销毁时自动执行的钩子函数，主要执行定时器销毁等操作

简单概述下keep-alive，需要注意哪些问题

包囊动态组件，起到缓存作用，防止路由跳转发送额外服务器请求重新渲染页面
注意问题：1、每次进入新页面时，需要activated判断是否向服务器请求数据。2、exclude 匹配的组件都不会缓存，exclude=‘组件名’

什么是计算属性和方法调用有什么区别

模板内使用表达式非常方便，但是只能用于简单运算，而且计算属性可以完成复杂的逻辑运算。
计算属性只要依赖的数据发生变化时就会重新计算，具有缓存功能
而且方法调用在每次render之后都会执行，不具备缓存功能

v-if和v-show的区别

v-if和v-show是隐藏元素的
v-if是真正的条件渲染，也就是说销毁创建DOM让元素隐藏显示
v-show是通过display的css来控制隐藏显示

vue常用的修饰符

.lazy
.number
.trim
事件修饰符
stop/prevemt/capture/self/once/passive
按键修饰符
keyup.enter/tab/delete/esc/space/up/down/left/right

v-on可以监听多个方法吗

可以
<input @input @blur @focus />

vue中的key值作用

提供key来给每个节点做一个唯一标识，Diff算法正确的识别此节点，找到正确的位置重新渲染
key的主要作用是提高虚拟DOM的渲染

Vue组件中data为什么必须是函数

这样每个实例的data都是独立的，不会相互影响，这是js本身特性带来的。
返回唯一的对象，保证组件间数据不会互相影响

Vue组件间如何传值

父-子   通过prop
子-父   通过$emit
组件间使用vuex

更新数组触发视图更新的方法有哪些

数组的变异方法
push/pop/shift/unshift/sort/splice/reverse

Vue中对象更改检测的注意事项

Vue无法检测以下发生变化的数组
    1、利用索引直接设置一个项  vm.item[index] = value
    2、修改数组长度   vm.item.length = newLength
对象更改注意事项
    3、Vue无法检测到对象的属性添加删除

解决方案
    1、Vue.set(vm.items,index,newValue) / vm.items.splice(index, 1 , newValue)        
    2、vm.items.splice(newLength)
    3、Vue.set(object, key, value) / vm.$set(object, key, value)

Vue单页面的优缺点

优点：
    无刷新，提升用户体验
    完全的前端组件化
缺点:
    SEO差
    首屏加载慢

scoped的作用 

CSS只能在当前组件中起作用

mixin

主要作用是实现组件间  数据和方法的复用

Vuex

手写一个vuex

import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)

const state = { count : 1 }

const mutations = { 'SET_COUNT': (state, count) => { state.count=count } }

const actions = { setCount: ({commit}, count) => (commit('SET_COUNT'), count }

const store = new Vuex.Store({
   state,
   mutations,
   actions  
})

export default store

Vuex是什么

主要作用是存储组件间的数据状态
State：Vuex中的单一状态树，一个应用只有一个store
Getter：跟计算属性一样，返回的值根据它的依赖缓存起来，只要它的依赖发生改变时才会重新计算
Mutations：同步的，而且时唯一改变store数据的地方
Actions：异步的，不能直接修改store中的数据，只能提交给mutation
Module：将store分割成模块，每个模块有自己的state，mutations，actions

使用场景

单页面应用/音乐播放器/登录状态/购物车

Vuex模块化如何实现，组件如何引用

Vue-Router

手写一个vue-router

1、定义组件  或者import
Const Foo ={template：‘<div> foo</div>’ }
Const Bar ={template：‘<div> bar</div>’ }
2、定义路由  每个路由映射一个组件 
Const routes = [
    {path:’/foo’,component:Foo},
    {path:’/bar,component: Bar },
]
3、创建ruoter实例
Const router = new VueRouter({routers})
4、挂载
Const app = new Vue({
router}).$mount(‘#app’)

动态路由如何书写，组件如何接受动态路由参数

动态路由以冒号开头
Const routes=[{path:’/user/:id’,component:User},]
可以通过this.$route.params.id获取到