Vue 常见面试题

keep-alive 的三个属性

1. include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

2. exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

3. max - 数字。最多可以缓存多少组件实例。

keep-alive 触发的两个生命周期：activated 和 deactivated

Vue3中 ref 和 reactive 的区别

	ref()	reactive()
定义	返回一个相应的，可更改的ref对象，只有一个指向其內部值的属性.value	返回一个对象的响应式代理
参数	基本数据类型或者对象类型 如果参数是对象类型时，其底层本质还是reactive	对象或者数组
响应式原理	Object.defineProperty()的 get() 和 set()	通过Proxy实现响应式，并且通过Reflect操作源对象内部的数据

Vue 的优缺点

优点：响应式、组件化、单页面应用加快访问速度和提升用户体验

缺点：首次加载慢，单页面应用不利于搜索引擎优化、虚拟dom过多会导致运行变慢

Vue 中 v-if 和 v-for 优先级

vue2：当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

vue3：处于同一节点时，v-if 的优先级比 v-for 更高

Vue 路由模式

1. hash 模式（默认模式）

基于 location.hash 实现

利用 window.onhashchange 事件来监听 hash 变化

2. history 模式

history模式不带 # ，基于 history.pushState API 来完成URL调整而无需重新加载页面。

通过 pushState() 和 replaceState() 来操作url，修改浏览器访问记录

pushState() 和 replaceStatus() 不会触发popState事件，需要手动触发

当匹配不到页面，会出现404情况

3. abstract 模式

适用于所有js环境

Vue2 和 Vue3 的区别

1. 双向数据绑定的原理不同
2. 是否支持碎片（多个根节点）
3. 组合式API
4. 定义数据变量方法不同
5. 生命周期不同
6. 传值不同
7. 指令和插槽不同
8. main.js 不同

Vue2 和 Vue3 有关 diff 算法的区别

稍后。。。

Vue 路由的钩子函数

全局前置守卫：beforeEach

全局解析守卫：beforeResolve

全局后置钩子：afterEach

路由独享守卫：beforeEnter

组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

Vue 创建项目过程

稍后。。。

Vue 计算属性和侦听器的区别和用法

	computed	watch
定义	计算属性	监听回调
是否有缓存	属性没有变化，会从缓存中读取	每次值发生变化都会执行回调
首次监听	第一次加载开始监听	默认不监听
是否支持异步	computed内有异步时，无法监听数据变化	支持异步操作

Vue 动态路由怎么加载

添加路由

来源：动态路由 | Vue Router

动态路由主要通过两个函数实现 router.addRoute() 和 removeRoute()

如果需要等待新的路由显示，可以使用 await router.replace()

在导航守卫中添加路由，不应该调用 router.replace()，而是通过返回新的位置来触发重定向 

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // 触发重定向
    return to.fullPath
  }
})

查看现有路由

• router.hasRoute()：检查路由是否存在
• router.getRoutes()：获取一个包含所有路由记录的数组

delete 和 vue.delete 的区别

delete 虽然删除了元素但没有删除键值

vue.delete 是直接删除了数组的值，并改变了键值

vue组件通信方式有哪些

1. props / $emit（适用于父子组件）

2. vuex

3. EventBus（适用于兄弟组件）

4. $refs（适用于父子组件）

5. $attrs / $listteners （响应式）

$attrs 只读

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

$listteners 只读

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

// 父组件
<template>
  <div id="app">
    <compA :name.sync="str" @one="triggerOne" />
  </div>
</template>
export default {
    data() {
        return {
            str: '你好，小傻瓜'
        }
    },
    methods: {
        // e 为子组件的参数
        triggerOne(e) {
            console.log('one', e);  // one, 参数1
        }
    }
}

// 子组件 compA
export default {
    created() {
        // 访问父组件的 name 属性
        console.log(this.$attrs.name); // 你好，小傻瓜
        // 访问父组件的 one 方法
        this.$listenters.one('参数1'); // one
    }
}

 6. provide / inject（非响应式）

主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

// 父组件
export default {
    provide: {
        money: 123
    },
}

// 子组件
export default{
    inject: ['money'],
    created() {
        console.log(this.money);
    }
}

7. $parent / $children