2023前端vue面试题汇总_2023-02-27

Vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

• state => 基本数据(数据源存放地)
• getters => 从基本数据派生出来的数据
• mutations => 提交更改数据的方法，同步
• actions => 像一个装饰器，包裹mutations，使之可以异步。
• modules => 模块化Vuex

Vue中修饰符.sync与v-model的区别

sync的作用

• .sync修饰符可以实现父子组件之间的双向绑定，并且可以实现子组件同步修改父组件的值，相比较与v-model来说,sync修饰符就简单很多了
• 一个组件上可以有多个.sync修饰符

<!-- 正常父传子 -->
<Son :a="num" :b="num2" />

<!-- 加上sync之后的父传子 -->
<Son :a.sync="num" :b.sync="num2" />

<!-- 它等价于 -->
<Son 
  :a="num" 
  :b="num2" 
  @update:a="val=>num=val" 
  @update:b="val=>num2=val" 
/>

<!-- 相当于多了一个事件监听，事件名是update:a, -->
<!-- 回调函数中，会把接收到的值赋值给属性绑定的数据项中。 -->

v-model的工作原理

<com1 v-model="num"></com1>
<!-- 等价于 -->
<com1 :value="num" @input="(val)=>num=val"></com1>

• 相同点
  • 都是语法糖，都可以实现父子组件中的数据的双向通信
• 区别点
  • 格式不同：v-model="num", :num.sync="num"
  • v-model: @input + value
  • :num.sync: @update:num
  • v-model只能用一次；.sync可以有多个

Vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

• beforeEach主要有3个参数to，from，next。
• to：route即将进入的目标路由对象。
• from：route当前导航正要离开的路由。
• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

对Vue SSR的理解

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

SSR也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端

• 优点 ：SSR 有着更好的 SEO、并且首屏加载速度更快
  • 因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面
  • 更快的内容到达时间（首屏加载更快）： SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间
• 缺点 ： 开发条件会受到限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。服务器会有更大的负载需求
  • 在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略

其基本实现原理

• app.js 作为客户端与服务端的公用入口，导出 Vue 根实例，供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上，服务端 entry 除了创建和返回实例，还进行路由匹配与数据预获取。
• webpack 为客服端打包一个 Client Bundle ，为服务端打包一个 Server Bundle 。
• 服务器接收请求时，会根据 url，加载相应组件，获取和解析异步数据，创建一个读取 Server Bundle 的 BundleRenderer，然后生成 html 发送给客户端。
• 客户端混合，客户端收到从服务端传来的 DOM 与自己的生成的 DOM 进行对比，把不相同的 DOM 激活，使其可以能够响应后续变化，这个过程称为客户端激活 。为确保混合成功，客户端与服务器端需要共享同一套数据。在服务端，可以在渲染之前获取数据，填充到 stroe 里，这样，在客户端挂载到 DOM 之前，可以直接从 store里取数据。首屏的动态数据通过 window.__INITIAL_STATE__发送到客户端

Vue SSR 的实现，主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的

Vue SSR需要做的事多点（输出完整 HTML），除了complier -> vnode，还需如数据获取填充至 HTML、客户端混合（hydration）、缓存等等。相比于其他模板引擎（ejs, jade 等），最终要实现的目的是一样的，性能上可能要差点

Vue组件之间通信方式有哪些

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。 Vue 组件间通信只要指以下 3 类通信 ：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信

组件传参的各种方式

组件通信常用方式有以下几种

• props / $emit 适用 父子组件通信
  • 父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的
• ref 与 $parent / $children(vue3废弃) 适用 父子组件通信
  • ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
  • $parent / $children：访问访问父组件的属性或方法 / 访问子组件的属性或方法
• EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信
  • 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件
• $attrs / $listeners(vue3废弃) 适用于 隔代组件通信
  • $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用
  • $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
• provide / inject 适用于 隔代组件通信
  • 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题， 不过它的使用场景，主要是子组件获取上级组件的状态 ，跨级组件间建立了一种主动提供与依赖注入的关系
• $root 适用于 隔代组件通信 访问根组件中的属性或方法，是根组件，不是父组件。$root只对根组件有用
• Vuex 适用于 父子、隔代、兄弟组件通信
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )
  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  • 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

根据组件之间关系讨论组件通信最为清晰有效

• 父子组件：props/$emit/$parent/ref
• 兄弟组件：$parent/eventbus/vuex
• 跨层级关系：eventbus/vuex/provide+inject/$attrs + $listeners/$root

下面演示组件之间通讯三种情况: 父传子、子传父、兄弟组件之间的通讯

1. 父子组件通信

使用props，父组件可以使用props向子组件传递数据。

父组件vue模板father.vue:

<template>
  <child :msg="message"></child>
</template>

<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</script>

子组件vue模板child.vue:

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

回调函数（callBack）

父传子：将父组件里定义的method作为props传入子组件

// 父组件Parent.vue：
<Child :changeMsgFn="changeMessage">
methods: {
    changeMessage(){
        this.message = 'test'
    }
}

// 子组件Child.vue：
<button @click="changeMsgFn">
props:['changeMsgFn']

子组件向父组件通信

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

父组件vue模板father.vue:

<template>
    <child @msgFunc="func"></child>
</template>

<script>
import child from './child.vue';
export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

子组件vue模板child.vue:

<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
          //........
          this.$emit('msgFunc');
        }
    }
}
</script>

2. provide / inject 跨级访问祖先组件的数据

父组件通过使用provide(){return{}}提供需要传递的数据

export default {
  data() {
    return {
      title: '我是父组件',
      name: 'poetry'
    }
  },
  methods: {
    say() {
      alert(1)
    }
  },
  // provide属性 能够为后面的后代组件/嵌套的组件提供所需要的变量和方法
  provide() {
    return {
      message: '我是祖先组件提供的数据',
      name: this.name, // 传递属性
      say: this.say
    }
  }
}

子组件通过使用inject:[“参数1”,”参数2”,…]接收父组件传递的参数

<template>
  <p>曾孙组件</p>
  <p>{{message}}</p>
</template>
<script>
export default {
  // inject 注入/接收祖先组件传递的所需要的数据即可 
  //接收到的数据 变量 跟data里面的变量一样 可以直接绑定到页面 {{}}
  inject: [ "message","say"],
  mounted() {
    this.say();
  },
};
</script>

3. $parent + $children 获取父组件实例和子组件实例的集合

• this.$parent 可以直接访问该组件的父实例或组件
• 父组件也可以通过 this.$children 访问它所有的子组件；需要注意 $children 并不保证顺序，也不是响应式的

<!-- parent.vue -->
<template>
<div>
  <child1></child1>   
  <child2></child2> 
  <button @click="clickChild">$children方式获取子组件值</button>
</div>
</template>
<script>
import child1 from './child1'
import child2 from './child2'
export default {
  data(){
    return {
      total: 108
    }
  },
  components: {
    child1,
    child2  
  },
  methods: {
    funa(e){
      console.log("index",e)
    },
    clickChild(){
      console.log(this.$children[0].msg);
      console.log(this.$children[1].msg);
    }
  }
}
</script>

<!-- child1.vue -->
<template>
  <div>
    <button @click="parentClick">点击访问父组件</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:"child1"
    }
  },
  methods: {
    // 访问父组件数据
    parentClick(){
      this.$parent.funa("xx")
      console.log(this.$parent.total);
    }
  }
}
</script>

<!-- child2.vue -->
<template>
  <div>
    child2
  </div>
</template>
<script>
export default {
  data(){
    return {
     msg: 'child2'
    }
  }
}
</script>

4. $attrs + $listeners多级组件通信

$attrs 包含了从父组件传过来的所有props属性

// 父组件Parent.vue：
<Child :name="name" :age="age"/>

// 子组件Child.vue：
<GrandChild v-bind="$attrs" />

// 孙子组件GrandChild
<p>姓名：{{$attrs.name}}</p>
<p>年龄：{{$attrs.age}}</p>

$listeners包含了父组件监听的所有事件

// 父组件Parent.vue：
<Child :name="name" :age="age" @changeNameFn="changeName"/>

// 子组件Child.vue：
<button @click="$listeners.changeNameFn"></button>

5. ref 父子组件通信

// 父组件Parent.vue：
<Child ref="childComp"/>
<button @click="changeName"></button>
changeName(){
    console.log(this.$refs.childComp.age);
    this.$refs.childComp.changeAge()
}

// 子组件Child.vue：
data(){
    return{
        age:20
    }
},
methods(){
    changeAge(){
        this.age=15
  }
}

6. 非父子, 兄弟组件之间通信

vue2中废弃了broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。Bus.js可以是这样:

// Bus.js

// 创建一个中央时间总线类  
class Bus {  
  constructor() {  
    this.callbacks = {};   // 存放事件的名字  
  }  
  $on(name, fn) {  
    this.callbacks[name] = this.callbacks[name] || [];  
    this.callbacks[name].push(fn);  
  }  
  $emit(name, args) {  
    if (this.callbacks[name]) {  
      this.callbacks[name].forEach((cb) => cb(args));  
    }  
  }  
}  

// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
// 另一种方式  
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能  

<template>
    <button @click="toBus">子组件传给兄弟组件</button>
</template>

<script>
export default{
    methods: {
    toBus () {
      this.$bus.$emit('foo', '来自兄弟组件')
    }
  }
}
</script>

另一个组件也在钩子函数中监听on事件

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$bus.$on('foo', (msg) => {
      this.message = msg
    })
  }
}

7. $root 访问根组件中的属性或方法

• 作用：访问根组件中的属性或方法
• 注意：是根组件，不是父组件。$root只对根组件有用

var vm = new Vue({
  el: "#app",
  data() {
    return {
      rootInfo:"我是根元素的属性"
    }
  },
  methods: {
    alerts() {
      alert(111)
    }
  },
  components: {
    com1: {
      data() {
        return {
          info: "组件1"
        }
      },
      template: "<p>{{ info }} <com2></com2></p>",
      components: {
        com2: {
          template: "<p>我是组件1的子组件</p>",
          created() {
            this.$root.alerts()// 根组件方法
            console.log(this.$root.rootInfo)// 我是根元素的属性
          }
        }
      }
    }
  }
});

8. vuex

• 适用场景: 复杂关系的组件数据传递
• Vuex作用相当于一个用来存储共享变量的容器

• state用来存放共享变量的地方
• getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
• mutations用来存放修改state的方法。
• actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

• 父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
• 复杂关系的组件数据传递可以通过vuex存放共享的变量

Vue的事件绑定原理

原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过 Vue 自定义的$on 实现的。如果要在组件上使用原生事件，需要加.native 修饰符，这样就相当于在父组件中把子组件当做普通 html 标签，然后加上原生事件。

$on、$emit 是基于发布订阅模式的，维护一个事件中心，on 的时候将事件按名称存在事件中心里，称之为订阅者，然后 emit 将对应的事件进行发布，去执行事件中心里的对应的监听器

EventEmitter(发布订阅模式--简单版)

// 手写发布订阅模式 EventEmitter
class EventEmitter {
  constructor() {
    this.events = {};
  }
  // 实现订阅
  on(type, callBack) {
    if (!this.events) this.events = Object.create(null);

    if (!this.events[type]) {
      this.events[type] = [callBack];
    } else {
      this.events[type].push(callBack);
    }
  }
  // 删除订阅
  off(type, callBack) {
    if (!this.events[type]) return;
    this.events[type] = this.events[type].filter(item => {
      return item !== callBack;
    });
  }
  // 只执行一次订阅事件
  once(type, callBack) {
    function fn() {
      callBack();
      this.off(type, fn);
    }
    this.on(type, fn);
  }
  // 触发事件
  emit(type, ...rest) {
    this.events[type] && this.events[type].forEach(fn => fn.apply(this, rest));
  }
}


// 使用如下
const event = new EventEmitter();

const handle = (...rest) => {
  console.log(rest);
};

event.on("click", handle);

event.emit("click", 1, 2, 3, 4);

event.off("click", handle);

event.emit("click", 1, 2);

event.once("dbClick", () => {
  console.log(123456);
});
event.emit("dbClick");
event.emit("dbClick");

源码分析

1. 原生 dom 的绑定
2. Vue 在创建真是 dom 时会调用 createElm ,默认会调用 invokeCreateHooks
3. 会遍历当前平台下相对的属性处理代码,其中就有 updateDOMListeners 方法,内部会传入 add 方法

function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) { 
    if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) { 
        return 
    }
    const on = vnode.data.on || {} 
    const oldOn = oldVnode.data.on || {} 
    target = vnode.elm normalizeEvents(on) 
    updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context) 
    target = undefined 
}
function add ( name: string, handler: Function, capture: boolean, passive: boolean ) {
    target.addEventListener( // 给当前的dom添加事件 
        name, 
        handler, 
        supportsPassive ? { capture, passive } : capture 
    ) 
}

vue 中绑定事件是直接绑定给真实 dom 元素的

1. 组件中绑定事件

export function updateComponentListeners ( vm: Component, listeners: Object, oldListeners: ?Object ) {
    target = vm updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
    target = undefined 
}
function add (event, fn) { 
    target.$on(event, fn) 
}

组件绑定事件是通过 vue 中自定义的 $on 方法来实现的

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题 ？你能说说如下代码的实现原理么？

1）Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题

1. Vue使用了Object.defineProperty实现双向数据绑定
2. 在初始化实例时对属性执行 getter/setter 转化
3. 属性必须在data对象上存在才能让Vue将它转换为响应式的（这也就造成了Vue无法检测到对象属性的添加或删除）

所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)

2）接下来我们看看框架本身是如何实现的呢?

Vue 源码位置：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知，vm.$set 的实现原理是：

1. 如果目标是数组，直接使用数组的 splice 方法触发相应式；
2. 如果目标是对象，会先判读属性是否存在、对象是否是响应式，
3. 最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理

defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法

对SSR的理解

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端

SSR的优势：

• 更好的SEO
• 首屏加载速度更快

SSR的缺点：

• 开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子；
• 当需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境；
• 更多的服务端负载。

MVVM的优缺点?

优点:

• 分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑
• 提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
• ⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动dom中解放

缺点:

• Bug很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得⼀个位置的Bug被快速传递到别的位置，要定位原始出问题的地⽅就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的
• ⼀个⼤的模块中model也会很⼤，虽然使⽤⽅便了也很容易保证了数据的⼀致性，当时⻓期持有，不释放内存就造成了花费更多的内存
• 对于⼤型的图形应⽤程序，视图状态较多，ViewModel的构建和维护的成本都会⽐较⾼。

Vue 组件通讯有哪几种方式

1. props 和$emit 父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的
2. $parent,$children 获取当前组件的父组件和当前组件的子组件
3. $attrs 和$listeners A->B->C。Vue 2.4 开始提供了$attrs 和$listeners 来解决这个问题
4. 父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中使用，但是写组件库时很常用)
5. $refs 获取组件实例
6. envetBus 兄弟组件数据传递 这种情况下可以使用事件总线的方式
7. vuex 状态管理

如何保存页面的当前的状态

既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况：

• 前组件会被卸载
• 前组件不会被卸载

那么可以按照这两种情况分别得到以下方法：

组件会被卸载：

（1）将状态存储在LocalStorage / SessionStorage

只需要在组件即将被销毁的生命周期 componentWillUnmount （react）中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。

比如从 B 组件跳转到 A 组件的时候，A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性，用来控制 A 组件是否读取 Storage 中的状态。

优点：

• 兼容性好，不需要额外库或工具。
• 简单快捷，基本可以满足大部分需求。

缺点：

• 状态通过 JSON 方法储存（相当于深拷贝），如果状态中有特殊情况（比如 Date 对象、Regexp 对象等）的时候会得到字符串而不是原来的值。（具体参考用 JSON 深拷贝的缺点）
• 如果 B 组件后退或者下一页跳转并不是前组件，那么 flag 判断会失效，导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage，会造成很奇怪的现象

（2）路由传值

通过 react-router 的 Link 组件的 prop —— to 可以实现路由间传递参数的效果。

在这里需要用到 state 参数，在 B 组件中通过 history.location.state 就可以拿到 state 值，保存它。返回 A 组件时再次携带 state 达到路由状态保持的效果。

优点：

• 简单快捷，不会污染 LocalStorage / SessionStorage。
• 可以传递 Date、RegExp 等特殊对象（不用担心 JSON.stringify / parse 的不足）

缺点：

• 如果 A 组件可以跳转至多个组件，那么在每一个跳转组件内都要写相同的逻辑。

组件不会被卸载：

（1）单页面渲染

要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。

优点：

• 代码量少
• 不需要考虑状态传递过程中的错误

缺点：

• 增加 A 组件维护成本
• 需要传入额外的 prop 到 B 组件
• 无法利用路由定位页面

除此之外，在Vue中，还可以是用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</kepp-alive>

router.js

{
  path: '/',
  name: 'xxx',
  component: ()=>import('../src/views/xxx.vue'),
  meta:{
    keepAlive: true // 需要被缓存
  }
},

Vue-router 除了 router-link 怎么实现跳转

声明式导航

<router-link to="/about">Go to About</router-link>

编程式导航

// literal string path
router.push('/users/1')

// object with path
router.push({ path: '/users/1' })

// named route with params to let the router build the url
router.push({ name: 'user', params: { username: 'test' } })

回答范例

• vue-router导航有两种方式：声明式导航和编程方式导航
• 声明式导航方式使用router-link组件，添加to属性导航；编程方式导航更加灵活，可传递调用router.push()，并传递path字符串或者RouteLocationRaw对象，指定path、name、params等信息
• 如果页面中简单表示跳转链接，使用router-link最快捷，会渲染一个a标签；如果页面是个复杂的内容，比如商品信息，可以添加点击事件，使用编程式导航
• 实际上内部两者调用的导航函数是一样的

diff算法

<details open=""><summary><b>答案</b></summary>
<p>
</p><p><strong>时间复杂度：</strong> 个树的完全<code> diff</code> 算法是一个时间复杂度为<code> O(n*3）</code> ，vue进行优化转化成<code> O(n)</code> 。</p>
<p><strong>理解：</strong></p>
<ul>
<li>
<p>最小量更新，<code> key</code> 很重要。这个可以是这个节点的唯一标识，告诉<code> diff</code> 算法，在更改前后它们是同一个DOM节点</p>
<ul>
<li>扩展<code> v-for</code> 为什么要有<code> key</code> ，没有<code> key</code> 会暴力复用，举例子的话随便说一个比如移动节点或者增加节点（修改DOM），加<code> key</code> 只会移动减少操作DOM。</li>
</ul>
</li>
<li>
<p>只有是同一个虚拟节点才会进行精细化比较，否则就是暴力删除旧的，插入新的。</p>
</li>
<li>
<p>只进行同层比较，不会进行跨层比较。</p>
</li>
</ul>
<p><strong>diff算法的优化策略</strong>：四种命中查找，四个指针</p>
<ol>
<li>
<p>旧前与新前（先比开头，后插入和删除节点的这种情况）</p>
</li>
<li>
<p>旧后与新后（比结尾，前插入或删除的情况）</p>
</li>
<li>
<p>旧前与新后（头与尾比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后）</p>
</li>
<li>
<p>旧后与新前（尾与头比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前）</p>
</li>
</ol>
<p></p>
</details>

--- 问完上面这些如果都能很清楚的话，基本O了 ---

以下的这些简单的概念，你肯定也是没有问题的啦😉

router-link和router-view是如何起作用的

分析

vue-router中两个重要组件router-link和router-view，分别起到导航作用和内容渲染作用，但是回答如何生效还真有一定难度

回答范例

1. vue-router中两个重要组件router-link和router-view，分别起到路由导航作用和组件内容渲染作用
2. 使用中router-link默认生成一个a标签，设置to属性定义跳转path。实际上也可以通过custom和插槽自定义最终的展现形式。router-view是要显示组件的占位组件，可以嵌套，对应路由配置的嵌套关系，配合name可以显示具名组件，起到更强的布局作用。
3. router-link组件内部根据custom属性判断如何渲染最终生成节点，内部提供导航方法navigate，用户点击之后实际调用的是该方法，此方法最终会修改响应式的路由变量，然后重新去routes匹配出数组结果，router-view则根据其所处深度deep在匹配数组结果中找到对应的路由并获取组件，最终将其渲染出来。

异步组件是什么？使用场景有哪些？

分析

因为异步路由的存在，我们使用异步组件的次数比较少，因此还是有必要两者的不同。

体验

大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们

import { defineAsyncComponent } from 'vue'
// defineAsyncComponent定义异步组件，返回一个包装组件。包装组件根据加载器的状态决定渲染什么内容
const AsyncComp = defineAsyncComponent(() => {
  // 加载函数返回Promise
  return new Promise((resolve, reject) => {
    // ...可以从服务器加载组件
    resolve(/* loaded component */)
  })
})
// 借助打包工具实现ES模块动态导入
const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

回答范例

1. 在大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们。
2. 我们不仅可以在路由切换时懒加载组件，还可以在页面组件中继续使用异步组件，从而实现更细的分割粒度。
3. 使用异步组件最简单的方式是直接给defineAsyncComponent指定一个loader函数，结合ES模块动态导入函数import可以快速实现。我们甚至可以指定loadingComponent和errorComponent选项从而给用户一个很好的加载反馈。另外Vue3中还可以结合Suspense组件使用异步组件。
4. 异步组件容易和路由懒加载混淆，实际上不是一个东西。异步组件不能被用于定义懒加载路由上，处理它的是vue框架，处理路由组件加载的是vue-router。但是可以在懒加载的路由组件中使用异步组件

Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:

• Proxy 可以直接监听对象而非属性；
• Proxy 可以直接监听数组的变化；
• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

• 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

Computed 和 Methods 的区别

可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

• computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；
• method 调用总会执行该函数。

双向绑定的原理是什么

我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成

• 数据层（Model）：应用的数据及业务逻辑
• 视图层（View）：应用的展示效果，各类UI组件
• 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理

理解ViewModel

它的主要职责就是：

• 数据变化后更新视图
• 视图变化后更新数据

当然，它还有两个主要部分组成

• 监听器（Observer）：对所有数据的属性进行监听
• 解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

vue-loader是什么？它有什么作用？

回答范例

1. vue-loader是用于处理单文件组件（SFC，Single-File Component）的webpack loader
2. 因为有了vue-loader，我们就可以在项目中编写SFC格式的Vue组件，我们可以把代码分割为<template>、<script>和<style>，代码会异常清晰。结合其他loader我们还可以用Pug编写<template>，用SASS编写<style>，用TS编写<script>。我们的<style>还可以单独作用当前组件
3. webpack打包时，会以loader的方式调用vue-loader
4. vue-loader被执行时，它会对SFC中的每个语言块用单独的loader链处理。最后将这些单独的块装配成最终的组件模块

原理

vue-loader会调用@vue/compiler-sfc模块解析SFC源码为一个描述符（Descriptor），然后为每个语言块生成import代码，返回的代码类似下面

// source.vue被vue-loader处理之后返回的代码

// import the <template> block
import render from 'source.vue?vue&type=template'
// import the <script> block
import script from 'source.vue?vue&type=script'
export * from 'source.vue?vue&type=script'
// import <style> blocks
import 'source.vue?vue&type=style&index=1'

script.render = render
export default script

我们想要script块中的内容被作为js处理（当然如果是<script lang="ts">被作为ts理），这样我们想要webpack把配置中跟.js匹配的规则都应用到形如source.vue?vue&type=script的这个请求上。例如我们对所有*.js配置了babel-loader，这个规则将被克隆并应用到所在Vue SFC

import script from 'source.vue?vue&type=script

将被展开为：

import script from 'babel-loader!vue-loader!source.vue?vue&type=script'

类似的，如果我们对.sass文件配置了style-loader + css-loader + sass-loader，对下面的代码

<style scoped lang="scss">

vue-loader将会返回给我们下面结果：

import 'source.vue?vue&type=style&index=1&scoped&lang=scss'

然后webpack会展开如下：

import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

• 当处理展开请求时，vue-loader将被再次调用。这次，loader将会关注那些有查询串的请求，且仅针对特定块，它会选中特定块内部的内容并传递给后面匹配的loader
• 对于<script>块，处理到这就可以了，但是<template> 和 <style>还有一些额外任务要做，比如
  • 需要用 Vue 模板编译器编译template，从而得到render函数
  • 需要对 <style scoped>中的CSS做后处理（post-process），该操作在css-loader之后但在style-loader之前

实现上这些附加的loader需要被注入到已经展开的loader链上，最终的请求会像下面这样：

// <template lang="pug">
import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'

// <style scoped lang="scss">
import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

vue-router 路由钩子函数是什么 执行顺序是什么

路由钩子的执行流程, 钩子函数种类有:全局守卫、路由守卫、组件守卫

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入