面试题（vue）

1、v-if与v-show的区别

v-if：惰性的，在页面初始化如果条件是false，不会渲染；适用于条件渲染，不适用与频繁的显隐切换

v-show：不管初始化条件是什么，都会渲染元素，css切换，适用于频繁切换

2、路由实现方式

（1）router-link：to

（2）this.$router.push()

（3）this.$router.replace() 直接替换掉当前的路由，此时再使用浏览器的前进后退按钮，不会回到之前的路由链接

（4）this.$router.go(1)

参数：params（post）   query（get）

3、生命周期函数，每个生命周期做了什么

（1）beforeCreate

    vue实例创建之前，读不到data与method。

（2）created

    完成数据观测，属性和方法运算；watch与event事件回调，但是还未挂载，因此$el是读不到的。

    ajax请求异步数据，初始化数据

（3）beforeMount

    挂载之前被调用，render函数开始调用

（4）mounted

    el选项的DOM节点被vm.$el代替，挂载到vue实例上，此时数据被渲染到DOM上。

    可以获取挂载的DOM元素节点

（5）beforeUpdate

    数据更新调用，但不进行重新渲染。

（6）updated

    数据更新并重新 渲染DOM

（7）beforeDestory

    组件销毁之前被调用；（v-if为false；路由跳转；页面关闭；改变key值）

（8）destoryed

4、双向数据绑定实现的原理

     vue是一个MVVM框架， 即model view viewmodel，是一个数据驱动模型；数据改变，视图也会相应的变化。是通过Object.defineProperty来实现数据劫持的。

     每一个属性都有一个get与set方法，这两个方法是在Object.defineProperty中定义的，可以控制对象的属性的特有操作，比如读写，枚举等等。

5、vuex的实现

state mutations actions getters modules 

6、组件之间数据传递方式（ 链接：https://blog.csdn.net/qq_39623518/article/details/112918507 ）

7、watch与computed的区别

computed：页面初始化即执行，可缓存数据，双向绑定

watch：可异步，不能缓存，值改变才会执行

8、vuex与localStorage的区别及应用

9、vue2与3的区别

10、搭建vue项目的流程

11、$nextTick的原理及应用

12、路由的hash与history的区别，什么场景下应用，实现原理

13、为什么vue检测不到对象及数组元素的数据变化

14、为什么要使用set，原理是什么

        在实例创建之后，添加新的属性到实例上时，视图不会更新，因此使用set方法来更新视图；

        vue在遍历data时，会使用Object.defineProperty为每一个属性添加getter与setter，但是在实例创建之后，再增加的属性并没有生成getter、setter，因此不会被监听；

        可以用Vue.set或者vm.$set两种方式来修改属性。

15、axios如何在全局定义token，每次请求都携带token

16、vue如何做SEO

17、vue的扩展方法

18、keep-alive使用方式及作用，链接（https://blog.csdn.net/qq_39623518/article/details/113182663）

19、import与require的区别

      （1）遵循的规范： import是AMD规范；require是es6的语法

      （2）调用的时间：import是编译时调用；require是运行时调用

      （3）本质：import是解构过程，目前引擎不支持import，会被转换为require；require是赋值过程，返回的结果就是对象、数字、字符串等

      （4）写法上：             

require
require fs from 'fs'
export.fs = fs
module.exports = fs

import 
import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

 20、父级组件数据变化，子组件数据更新发生在哪个生命周期

       父组件传递给子组件的数据发生变化，子组件数据的更新会发生在 beforeUpdate 阶段。

21、多次调用子组件的按钮，会渲染几次

       渲染多次

22、v-if与v-for同时使用会出现什么问题，为什么，怎么解决

      v-for的优先级高于v-if，同时使用会重复生成n个v-if，如果只是判断是否要展示列表，可以在循环元素的父级添加v-if

23、for循环中key的作用

      方便diff算法；高效的更新虚拟DOM。

      在数据发生改变，例如插入一条新数据时，diff算法会对原有的节点与新的节点进行比较，相同则复制，不相同则会直接替换，然后发生改变的节点后面的节点就全都会重新渲染一次，非常消耗性能。如果给节点一个id，diff算法就能唯一标识需要修改的节点，不会重新渲染其他节点。