vue常见面试题2020

vue常见面试题

说说vue的数据双向绑定
vue的数据双向绑定是通过object.defineproperty()来劫持各个属性的geter seter 方法，当数据发生变化时发布消息给订阅者，触发相应的回调

你对虚拟dom的理解
虚拟dom是对真实dom的抽象
当状态变更时，会记录新树和旧树差异
最后将差异更新到正真的dom中

vue中 key的作用
vue中key的作用是高效更新虚拟dom，否侧vue不会按数据排序dom。

说说vue的生命周期？
beforecreate （初始化界面前）
created （初始化界面后）
beforemount （渲染界面前）
mounted （渲染界面后）
beforeUpdate （更新数据前）
updated （更新数据后）
beforedestory （卸载组件前）
destroyed （卸载组件后）

vue父组件向子组件怎么传值？
父组件引入子组件键值对用v-bind绑定数据，子组件通过props获取

vue子组件向父组件件怎么传值？
子组件用$emit传值，父组件用v-on:xxx=xxx 的函数获取值

vuex的原理
vuex是vue的状态管理器，vue构建时会构建initState,initState里面初始化了initdata，initmethods等，但这只是状态管理并没有保存，如果要保存我们可以用localstorage的setitem。
VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念：
　　state, getters, mutations, actions, modules。
　　1. state：vuex的基本数据，用来存储变量
　　 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
　　 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
　　 4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
　　 5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
Vuex的用法：
　　新建vue项目testApp ==> 在testApp中建store文件 ==> store文件下又有modules文件夹和getter.js 和 index.js ==> store文件下建user.js
　　在项目的main.js中引入 import store from ‘./store’
　　 在store文件下的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

在store文件下的getters.js中引入

const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}

export default getters

在modules文件下的user.js写代码

const user = {
        state:{
            self: null,
            token: '',
        },
        mutations:{
            SET_SELF: (state, self) => {
                 state.self = self
             },
             SET_TOKEN: (state, token) => {
                 state.token = token
             }
        },
        actions:{
             login ({ commit }, res) {
                  commit('SET_SELF', res.self)
                  commit('SET_TOKEN', res.token
            }       
}
export default user 

使用下面这两种方法存储数据：
dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

说说mvc？
Model 处理应用程序数据逻辑的部分。
View 依据模型数据创建视图
Controller 是应用程序中处理用户交互的部分。

说说mvvm？
Model 处理应用程序数据逻辑的部分。
View 依据模型数据创建视图
ViewModel 虚拟dom和数据的混合体

MVVM优点编辑
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。