vue相关面试题整理（仅供参考！！！）

一、vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图

二、组建中data为什么是个函数

一般来说实例对象中的data可以是对象也可以是函数，不会造成页面污染，但是组件中为了防止多个组件中的对象公用一个data，所以它（data）必须是个函数，否则会产生数据污染

三、v-if和v-show的区别

当条件为真时没有区别
当条件为假时：

1. v-if通过创建或删除DOM节点来实现元素的显示隐藏
2. v-show 通过css中的display来显示隐藏
3. v-if更适合数据的筛选和初始渲染
4. v-show更适合元素的切换

四、v-if和v-for的优先级

当v-if和v-for处于同一标签中，v-for的优先级是大于v-if的，一般来说v-for遍历之后v-if才会执行的，如果在一个大的vue项目中，这样使用的话会造成没必要的资源浪费。
若想解决这个问题的话就把v-if放在v-for的父级标签上。

五、 v-for中的key值的作用

key值可以提升v-for的渲染效率，vue不会改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去，同时在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识，给key赋值的内容不能是可变的。

六、 修改数据页面不更新的原因和解决方案

正常情况可以用
this.$forceUpdate();

在进行页面强制渲染，如果遇到特殊情况 可以配合this.$nextTick 使用强制渲染
this.$nextTick(function(){
	this.$forceUpdate();
})

如果 在碰到更特殊的情况 ，比如在模板中的数据即使在本页强制渲染了，也无法生效，那就直接在模板页面的 触发函数里面调用

methods: {
    setEventTest(row,index,type){
        this.$emit('TapsetEvent',row,index,type);
        this.$nextTick(function(){
            this.$forceUpdatr()
        })
    }
}

这个函数 就是在模板内部 触发父页面的 函数，触发后父页数据修改成功，但是模板页面 不会重新渲染，直接加上 这段代码 就可以实现强制渲染数据

七、$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
意思就是说我们在Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新，如果没有 nextTick 更新机制，那么 num每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略。

八、vue-router钩子函数和执行顺序

vue-router钩子函数
1.全局钩子
router.beforeEach
router.afterEach
2.单个路由里面的钩子
beforeEnter
3.组件路由里面的钩子
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
具体点击链接
链接: 点击.

九、 vuex的核心概念和运行机制

什么是vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据
Vuex有什么好处？及使用场景
在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex
vuex的五个核心概念
1、State：所有的数据都存储在state，state是一个对象
2、mutations：mutations可以操作state中的数据
3、actions：只能调用mutations 的方法，也可以做异步操作获取数据
4、getters：类似于计算属性，可以对state做一些逻辑性操作
5、Module：将仓库分模块存储
vuex的运行机制
在组件中通过dispach来调用actions中的方法；
commit来调用mutations中的方法，在mutatios中可以直接操作State中的数据；
State中数据只要发生改变就立即响应到组件中。

十、axios的封装

在使用 axiso 的过程中，为保证 解耦，需要对 axios 进行封装，在封装后的类中使用，直接引用即可：
代码如下：

//1. 导入axios对象
import Vue from 'vue'
import axios from "axios";

//2. 创建对象实例，create方法
const  Server = axios.create({
    baseURL: "https://www.liulongbin.top:8888/api/private/v1/",//请求接口的基础地址
    timeout: 3000,//超时时间
})


// 3. 定义请求拦截器
Server.interceptors.request.use(config=>{

    console.log(config);
    let token =sessionStorage.getItem('token')
    console.log(token)

    // 给管理后台的接口设置header头添加Authorzation属性
    // let token =JSON.parse(sessionStorage.getItem('token'))
    // console.log(token)
    config.headers[`Authorization`] = token //给header添加token值

    return config;
}, function(error){
    return Promise.reject(error);
});
// // http request 拦截器
// Server.interceptors.request.use(
//     config => {
//       const token = sessionStorage.getItem('03B_token')
//       if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
//         config.headers.Authorization = token  //请求头加上token
//       }
//       return config
//     },
//     err => {
//       return Promise.reject(err)
//     })
// 时间过滤器
Vue.filter('times',function(val){
    var date = new Date()
    //年
    var y = date.getFullYear()
    //月
    var m = date.getMonth()+1
    //日
    var d = date.getDate()
    //小时
    var h = date.getHours()
    //分
    var mm = date.getMinutes()+''
    mm = mm.padStart(2,0)
    //秒
    var s = date.getSeconds()+''
    s = s.padStart(2,0)
      return `${y}-${m}-${d} ${h}:${mm}:${s}`
    })

//4. 定义相应拦截器
Server.interceptors.response.use(function(response){
    console.log(response);
    //过滤出data的数据
    if(response.status == 200){
        return response.data;
    }
    return response;
},function(error){
    return Promise.reject(error);
});
Vue.prototype.$axios = axios
//5. 抛出对象即可
export default Server;