vue面试题

1.什么是vue生命周期？有什么作用？
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行

2.vue生命周期的8个阶段？
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
3.第一次加载页面会触发哪些钩子？
beforeCreate， created， beforeMount， mounted

< keep-alive> < /keep-alive> 做缓存使用

跟keep-alive有关的生命周期是哪些？描述下这些生命周期

keep-alive的生命周期
1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

说说你对Object.defineProperty的理解

目前双向数据绑定都是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法赋值，获取触发get方法取值，并通过数据劫持发布信息.在属性被访问和修改时通知变化。
Object.defineProperty定义新属性或修改原有的属性；
vue的数据双向绑定的原理就是用的Object.defineProperty这个方法，里面定义了setter和getter方法，通过观察者模式（发布订阅模式）来监听数据的变化，从而做相应的逻辑处理。

var obj = {}
    obj.sex = 'men'
    Object.defineProperty(obj,'height',{
        enumerable:true, // 是否可枚举，默认为false
        // writable:false, // 默认为false，不可写入，即使下面写入了，遍历该对象也遍历不到
        // value:'jhon', //默认值
        configurable:true, // 是否可删除，默认false。
        set:function(val){
            console.log("设置值",val)
            _height = val
        },
        get:function(){
            console.log("获取值")
            return _height
        }
    })
    obj.height = 100
    console.log(obj)
    console.log(1,obj.height);
    console.log(2,obj._height)

    
    delete obj._height;
    console.log(obj)
    for (var k in obj){
        console.log(k)
        console.log(obj[k]);
    }

ajax、fetch、axios这三都有什么区别

• ajax是最早出现的发送后端请求数据的技术,属于原生js范畴,核心是XMLHttpRequest对象.使用较多并有先后顺序容易出现回调地狱
• fetch是基于ES6的promise设计的,参数和jQuery中的ajax类似，它并不是对ajax进一步封装，它属于原生js范畴。没有使用XMLHttpRequest对象。号称可以代替ajax技术
• axios不是原生js,使用时需要对其进行安装，客户端和服务器端都可以使用，可以在请求和相应阶段进行拦截，基于promise对象。

说说你对proxy的理解

vue的数据劫持有两个缺点:
1、无法监听通过索引修改数组的值的变化

2、无法监听object也就是对象的值的变化

所以vue2.x中才会有$set属性的存在

proxy是es6中推出的新api，可以弥补以上两个缺点，所以vue3.x版本用proxy替换object.defineproperty

SPA单页面的实现方式有哪些

1. .监听地址栏的hash变化驱动界面变化
2. 直接在界面用事件驱动界面的变化
3. .用pushsate记录浏览器的历史，驱动界面变化
   它们都是遵循同一种原则：div 的显示与隐藏

你有使用过vuex的module吗？主要是在什么场景下使用？
把状态全部集中在状态树上，非常难以维护。按模块分成多个module，状态树延伸多个分支，模块的状态内聚，主枝干放全局共享状态

vuex中actions和mutations有什么区别？

• acitons是用来触发mutaitions的,无法改变state,可以包含异步操作,只能通过store.dispatch来触发
• mutations可以直接修改state，但只能包含同步操作，同时，只能在actions中通过提交commit调用
• 使用vuex高级API {{mapxxxx}} 把state,mutations,数据映射到属性中

页面刷新后vuex的state数据丢失怎么解决
state公用数据，使用localStorage实现页面数据缓存， 使用 try catch 在隐私模式时防止本地缓存报错

你觉得vuex有什么缺点？
不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。比如就几个状态的话 不用比较好

请求数据是写在组件的methods中还是在vuex的action中
如果请求的数据是多个组件共享的，为了方便只写一份，就写vuex里面，如果是组件独用的就写在当前组件里面。

你理解的vuex是什么呢？哪些场景会用到？不用会有问题吗？有哪些特性？
状态管理, 当项目中有大量组件共用到一些状态的时候, 我就会考虑用.
其实不是每个项目都需要,不用就是参数控制比较麻烦, 比如多个兄弟组件公用参数.