vue面试题（自用）

VUE

1. 生命周期

• _init_

  • initLifecycle/Event，往vm上挂载各种属性

  • callHook: beforeCreated: 实例刚创建

  • initInjection/initState: 初始化注入和 data 响应性

  • created: 创建完成，属性已经绑定， 但还未生成真实dom

  • 进行元素的挂载： $el / vm.$mount()

  • 是否有template: 解析成render function

    • *.vue文件: vue-loader会将<template>编译成render function

  • beforeMount: 模板编译/挂载之前

  • 执行render function，生成真实的dom，并替换到dom tree中

  • mounted: 组件已挂载

• update:

  • 执行diff算法，比对改变是否需要触发UI更新

  • flushScheduleQueue

    • watcher.before: 触发beforeUpdate钩子 - watcher.run(): 执行watcher中的 notify，通知所有依赖项更新UI

  • 触发updated钩子: 组件已更新

• actived / deactivated(keep-alive): 不销毁，缓存，组件激活与失活

• destroy:

  • beforeDestroy: 销毁开始

  • 销毁自身且递归销毁子组件以及事件监听

    • remove(): 删除节点
    • watcher.teardown(): 清空依赖
    • vm.$off(): 解绑监听

  • destroyed: 完成后触发钩子

生命周期	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive 专属，组件被激活时调用
deactivated	keep-alive 专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

1.1 在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面 loading 时间；
• ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

1.2 父组件可以监听到子组件的生命周期吗？

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

typescript
 体验AI代码助手
 代码解读
复制代码
// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

typescript
 体验AI代码助手
 代码解读
复制代码
//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},
    
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},    
    
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ... 

当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听。

1.3 父子组件生命周期钩子执行顺序

1. 组件挂载阶段
beforeCreate（父组件）=> created（父组件）=> beforeCreate（子组件）=> created（子组件）=> 
beforeMount（父组件）=> beforeMount（子组件）=> mounted（子组件）=> mounted（父组件）

2. 组件更新阶段
子组件更新父组件 
beforeUpdate（父组件）=> beforeUpdate（子组件）=> updated（子组件）=> updated（父组件）
父组件更新父组件
beforeUpdate（父组件）=> updated（父组件）

3. 组件销毁阶段
beforeUnmount（父组件）=> beforeUnmount（子组件）=> unmounted（子组件）=> unmounted（父组件）
beforeDestroy  destroyed

错误捕获阶段

当子组件中发生未捕获的错误时，可以通过父组件的 errorCaptured 钩子捕获错误。顺序如下：

1. 子组件发生错误，触发 errorCaptured 钩子：

   • 父组件的 errorCaptured 钩子会被调用。
   • 如果父组件没有捕获错误，错误会继续向祖先组件传播。

2. 全局错误捕获：

   • 如果没有任何组件捕获错误，全局错误捕获器（config.errorHandler）会处理它。

2.双向数据绑定

2.1 什么是 MVVM？

Model–View–ViewModel （MVVM） 是一个软件架构设计模式。MVVM 源自于经典的 Model–View–Controller（MVC）模式 ，MVVM 的出现促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率，MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

（1）View 层

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建 。

（2）Model 层

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。

（3）ViewModel 层

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

（1）View 层

xml
 体验AI代码助手
 代码解读
复制代码
<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

（2）ViewModel 层

javascript
 体验AI代码助手
 代码解读
复制代码
var app = new Vue({
    el: '#app',
    data: {  // 用于描述视图状态   
        message: 'Hello Vue!', 
    },
    methods: {  // 用于描述视图行为  
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;
        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                vm.message = res;
            }
        });
    }
})

（3） Model 层

json
 体验AI代码助手
 代码解读
复制代码
{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

2.2 Vue 是如何实现数据双向绑定的？

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：

即：

• 输入框内容变化时，Data 中的数据同步变化。即 View => Data 的变化。
• Data 中的数据变化时，文本节点的内容同步变化。即 Data => View 的变化。

其中，View 变化更新 Data ，可以通过事件监听的方式来实现，所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

2.3 数据响应(数据劫持)

看完生命周期后，里面的watcher等内容其实是数据响应中的一部分。数据响应的实现由两部分构成: 观察者( watcher ) 和 依赖收集器( Dep ) ，其核心是 defineProperty这个方法，它可以 重写属性的 get 与 set 方法，从而完成监听数据的改变。

• Observe (观察者)观察 props 与 state

  • 遍历 props 与 state，对每个属性创建独立的监听器( watcher )

• 使用 defineProperty 重写每个属性的 get/set(defineReactive）

  • get: 收集依赖

    • Dep.depend()

      • watcher.addDep()

  • set: 派发更新

    • Dep.notify()
    • watcher.update()
    • queenWatcher()
    • nextTick
    • flushScheduleQueue
    • watcher.run()
    • updateComponent()

大家可以先看下面的数据相应的代码实现后，理解后就比较容易看懂上面的简单脉络了。

 体验AI代码助手
 代码解读
复制代码
let data = {a: 1}
// 数据响应性
observe(data)

// 初始化观察者
new Watcher(data, 'name', updateComponent)
data.a = 2

// 简单表示用于数据更新后的操作
function updateComponent() {
    vm._update() // patchs
}

// 监视对象
function observe(obj) {
	 // 遍历对象，使用 get/set 重新定义对象的每个属性值
    Object.keys(obj).map(key => {
        defineReactive(obj, key, obj[key])
    })
}

function defineReactive(obj, k, v) {
    // 递归子属性
    if (type(v) == 'object') observe(v)
    
    // 新建依赖收集器
    let dep = new Dep()
    // 定义get/set
    Object.defineProperty(obj, k, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
        	  // 当有获取该属性时，证明依赖于该对象，因此被添加进收集器中
            if (Dep.target) {
                dep.addSub(Dep.target)
            }
            return v
        },
        // 重新设置值时，触发收集器的通知机制
        set: function reactiveSetter(nV) {
            v = nV
            dep.nofify()
        },
    })
}

// 依赖收集器
class Dep {
    constructor() {
        this.subs = []
    }
    addSub(sub) {
        this.subs.push(sub)
    }
    notify() {
        this.subs.map(sub => {
            sub.update()
        })
    }
}

Dep.target = null

// 观察者
class Watcher {
    constructor(obj, key, cb) {
        Dep.target = this
        this.cb = cb
        this.obj = obj
        this.key = key
        this.value = obj[key]
        Dep.target = null
    }
    addDep(Dep) {
        Dep.addSub(this)
    }
    update() {
        this.value = this.obj[this.key]
        this.cb(this.value)
    }
    before() {
        callHook('beforeUpdate')
    }
}

2.4 Vue 框架怎么实现对象和数组的监听？

如果被问到 Vue 怎么实现数据双向绑定，大家肯定都会回答 通过 Object.defineProperty() 对数据进行劫持，但是 Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持，同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue 能检测到对象和数组（部分方法的操作）的变化，那它是怎么实现的呢？我们查看相关代码如下：

scss
 体验AI代码助手
 代码解读
复制代码
/**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])  // observe 功能为监测数据的变化
    }
  }

  /**
   * 对属性进行递归遍历
   */
  let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

通过以上 Vue 源码部分查看，我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

2.5 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 重写。

2.6 Proxy 相比于 defineProperty 的优势

• 数组变化也能监听到
• 不需要深度遍历监听

2.7 v-model 的原理？

我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

以 input 表单元素为例：

ini
 体验AI代码助手
 代码解读
复制代码
<input v-model='something'>
    
相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

javascript
 体验AI代码助手
 代码解读
复制代码
父组件：
<ModelChild v-model="message"></ModelChild>

子组件：
<div>{{value}}</div>

props:{
    value: String
},
methods: {
  test1(){
     this.$emit('input', '小红')
  },
}

2.8 数据更新但页面没有更新,强制更新

• this.$set(目标值，属性，值) 小属性
• object.assign({目标对象},{对象一},{对象二}) 大数据
• this.$forceUpdate

object.defineProperty导致，vue3不会有这个问题，因为使用了proxy

2.9 怎样理解 Vue 的单向数据流？

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

有两种常见的试图改变一个 prop 的情形 :

• 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

kotlin
 体验AI代码助手
 代码解读
复制代码
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

• 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性

javascript
 体验AI代码助手
 代码解读
复制代码
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

2.10直接给一个数组项赋值，Vue 能检测到变化吗？

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

scss
 体验AI代码助手
 代码解读
复制代码
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二个问题，Vue 提供了以下操作方法：

scss
 体验AI代码助手
 代码解读
复制代码
// Array.prototype.splice
vm.items.splice(newLength)

3. vue-router

• 跳转

  • this.$router.push()
  • <router-link to=""></router-link>

• 占位

  • <router-view></router-view>

3.1 vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract， hash模式兼容性好，但是不美观，不利于SEO，history美观，historyAPI+popState，但是刷新会出现404，abstract在不支持浏览器的API换景使用

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
• history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
• abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

3.2 能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

（1）hash 模式的实现原理

早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 '#search'：

www.word.com#search 复制代码

hash 路由模式的实现主要是基于下面几个特性：

• URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
• hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
• 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
• 我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

window.history.pushState(null, null, path); window.history.replaceState(null, null, path); 复制代码

history 路由模式的实现主要基于存在下面几个特性：

• pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
• 我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
• history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

3.3 vue-router有几种钩子函数？执行流程如何？

钩子函数有三种：

• 全局守卫
• 路由守卫
• 组件守卫

第一种：全局钩子函数

router.beforeEach((to, from, next) => {
  // ...在跳转前做一些事
  next() //正常跳转，不写的话，不会跳转
})
router.afterEach(() => { 
  if (width <= 500){
        menuVisible.value = false
})//在跳转后做一些事情

router.beforeResolve(全局解析守卫)

to:router即将进入的路由对象

from:当前导航即将离开的路由

next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

• next()：如果一直正常，则调用该方法进入下一个钩子；
• next(false)：中断当前导航，即路由地址不发生变化；
• next('/xxx') 或 next({path: '/xxx'})：强制跳转到指定路径；
• next(error)：如果传入的是一个Error实例，则导航会被中断且该错误会被传递给 router.onError() 注册过的回调。

第二种：针对单个路由钩子函数

写在路由配置中，只有访问到这个路径，才能触发钩子函数

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
        next() //正常跳转，不写的话，不会跳转
      }
    }
  ]
})

这些钩子与全局 before 钩子的方法参数是一样的

第三种：组件内的钩子

写在组件中,访问路径，即将渲染组件的时候触发的

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 渲染 前调用
    // 不能获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
     next((vm) =>{
                vm就是实例// next来访问组件实例,就可以访问实例‘this’，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
        })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

注意： beforeRouteEnter 是支持给 next 传递回调的唯一守卫。

一些使用场景：

beforeRouteLeave():

1.beforeRouteLeave():通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。 清除定时器,清除缓存

javascript
 体验AI代码助手
 代码解读
复制代码
beforeRouteLeave (to, from, next) {
 window.clearInterval(this.timer) //清除定时器
 next()
}

2.禁止用户在还未保存修改前突然离开。

scss
 体验AI代码助手
 代码解读
复制代码
beforeRouteLeave (to, from, next) {
 const answer = window.confirm('你的修改内容未保存，你确定要离开吗？')
 if(answer){
 next()
 }else{
 next(flase)
 } 
}

3.当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中

scss
 体验AI代码助手
 代码解读
复制代码
beforeRouteLeave (to, from, next) {
  localStorage.setItem(name, content); //保存到localStorage中
  next()
}

beforeEach()

使用该函数，一定要调用 next()，否则钩子函数不能 resolve；

1.验证用户访问权限。一个系统需要先验证用户是否登录，如果登录了就可以访问，否则直接跳转到登录页面。

javascript
 体验AI代码助手
 代码解读
复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@Utils/session.utils' // 登录用户的token
import Login from '../pages/Login.vue' //引入登录页
const Home = () => import('../pages/Home.vue') //引入首页
 
Vue.use(VueRouter) // 全局注入router
 
// 配置路由参数
const routes = [
 { path: '/login', name: 'login', component: Login },
 { path: '/home', name: 'home', component: Home }
]
 
const router = new VueRouter({
 routes
})
 
// 全局挂载路由导航守卫：验证用户是否登录
router.beforeEach((to, from, next) => {
 if (to.name !== 'login' && !getToken()) next('/login') // 如果用户不是访问登录页且没有登录，则强制跳转到登录页
 else next()
})
 
export default router

afterEach()

1.路由切换，将页面的滚动位置返回到顶部。页面比较长，当滚动到某个位置后切换路由，这时跳转的页面滚动条位置默认是前一个页面离开时停留的位置，可以通过该钩子函数将滚动条位置重置。

javascript
 体验AI代码助手
 代码解读
复制代码
// 切换路由，页面返回到顶部
router.afterEach((to, from) => {
 window.scrollTo(0, 0)
})

2.当页面跳转后，判断当前页面的宽度大小后，选择是否隐藏侧边栏

ini
 体验AI代码助手
 代码解读
复制代码
 const width = document.documentElement.clientWidth;
 const menuVisible = ref(width > 500);
 provide('menuVisible',menuVisible)//set
 router.afterEach(()=> {
      if (width <= 500){
        menuVisible.value = false
      }

beforeRouteEnter()

从一个列表页进入到详情页，然后再返回到列表页，要求保留离开列表页之前访问的数据及滚动位置，从其他页面重新进入列表页，获取最新的数据，

（在组件切换过程中将状态保留在内存中，等再次访问的时候，还保持着离开之前的所有状态，而不是重新初始化。）使用的是vue缓存之<keep-alive>

完整的导航解析流程

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

4. 谈谈对组件的理解

• 组件化开发能大幅提高应用开发效率、测试性、复用性
• 常用的组件化技术：属性、自定义事件、插槽
• 降低更新范围，值重新渲染变化的组件
• 高内聚、低耦合、单向数据流

4.1 组件写name有啥好处？

• 增加name属性，会在components属性中增加组件本身，实现组件的递归调用。
• 可以表示组件的具体名称，方便调试和查找对应的组件。

4.2 组件的传值方式有哪些？

1. props / $emit 适用 父子组件通信
2. parent,children获取当前组件的父组件和当前组件的子组件
3. $ref获取实例
4. attrs和listeners 。$attrs是为了实现批量传递数据。
5. 父组件通过provide提供，子组件通过inject注入变量，跨级组件间的通信问题
6. eventBus平级组件数据传递
7. Vuex

• attrs：包含了父作用域中不被prop所识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v−bind="attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="attrs：包含了父作用域中不被prop所识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v−bind="attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
• listeners：包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="listeners：包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners" 传入内部组件

4.3 vuex

store， Vuex 的状态存储是响应式的

• state: 状态中心
• getters: 获取状态，允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• mutations: 是唯一更改 store 中状态的方法，且必须是同步函数。
• actions: 异步更改状态，用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
• modules: 允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

5.一些区别

5.1 computed和watch的区别是什么？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

5.2 v-if和v-show的区别

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

• 控制手段不同 css dom节点控制
• 编译过程编译条件 v-if会重建和销毁内部监听和子组件，从而触发生命周期，v-show则不会
• 性能消耗 v-if切换消耗 v-show初始消耗大 v-if消耗性能更大

5.3 v-for和v-if哪个优先级更高？

首先，v-for和v-if 不能在同一个标签中使用。

先处理v-for，再处理v-if。

如果同时遇到的时候，应该考虑先用计算属性处理数据，在进行v-for，可以减少循环次数。

6. 虚拟Dom

6.1 Vue为什么要用虚拟Dom

• 虚拟dom就是用js对象来描述真实Dom，是对真实Dom的抽象
• 由于直接操作Dom性能低，但是js层的操作效率高，可以将Dom操作转化成对象操作。最终通过diff算法比对差异进行更新Dom
• 虚拟Dom不依赖真实平台环境，可以实现跨平台

6.2 virtual dom 原理实现

虚拟 DOM 的实现原理主要包括以下 3 部分：

• 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
• diff 算法 — 比较两棵虚拟 DOM 树的差异；
• pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

详细步骤

• 创建 dom 树
• 树的diff，同层对比，输出patchs(listDiff/diffChildren/diffProps)
  • 没有新的节点，返回
  • 新的节点tagName与key不变， 对比props，继续递归遍历子树
    • 对比属性(对比新旧属性列表):
      • 旧属性是否存在与新属性列表中
      • 都存在的是否有变化
      • 是否出现旧列表中没有的新属性
  • tagName和key值变化了，则直接替换成新节点
• 渲染差异
  • 遍历patchs， 把需要更改的节点取出来
  • 局部更新dom

实际上diff算法它的前提一定是同层级和同类型的节点，核心一定是列表循环中的diff算法，加key之后元素怎么移动，删除和创建。

vue2 双端交叉指针，新老vdom各有两个指针，分别是队头队头，队尾队尾 ，队头队尾，队尾队头，就跟一个x一样，会对比四次，如果说四次寻找到元素的key相同，就回去进行复用，移动元素的位子，如果说这四种情况都没有匹配，就会在vdom的队头开始，再去寻找，看老的vdom里有没有对应的元素，进行相应的移动删除和创建

vue3 双端快速diff，两个指针，新老vdom，只对比两种情况，队头队头，队尾队尾，能够匹配上和2.0是完全一样的，一旦没有匹配上，会触发对新的vdom去进行最长递增子序列的计算，在新的vdom里寻找依次递增的元素有哪些，找到之后，那这些元素它的顺序就是固定的，去寻找不在这些列表里面的元素和老的vdom进行对比，再进行移动删除和创建

目的：为了减少dom的移动，提升了js的消耗，但节省了浏览器的性能，总体利大于弊

Vue2 采用了双端 Diff 算法，算法流程主要是：

1. 对比头头、尾尾、头尾、尾头是否可以复用，如果可以复用，就进行节点的更新或移动操作。
2. 如果经过四个端点的比较，都没有可复用的节点，则将旧的子序列保存为节点 key 为 key ，index 为 value 的 map 。
3. 拿新的一组子节点的头部节点去 map 中查找，如果找到可复用的节点，则将相应的节点进行更新，并将其移动到头部，然后头部指针右移。
4. 然而，拿新的一组子节点中的头部节点去旧的一组子节点中寻找可复用的节点，并非总能找到，这说明这个新的头部节点是新增节点，只需要将其挂载到头部即可。
5. 经过上述处理，最后还剩下新的节点就批量新增，剩下旧的节点就批量删除。

Vue3 的 Diff 算法与 Vue2 的 Diff 算法一样，也会先进行双端比对，只是双端比对的方式不一样。Vue3 的 Diff 算法借鉴了字符串比对时的双端比对方式，即优先处理可复用的前置元素和后置元素。 Vue3 的 Diff 算法的流程如下

1. 处理前置节点
2. 处理后置节点
3. 新节点有剩余，则挂载剩余的新节点
4. 旧节点有剩余，则卸载剩余的旧节点
5. 乱序情况（新、旧节点都有剩余），则构建最长递增子序列
6. 节点在最长递增子序列中，则该节点不需移动
7. 节点不在最长递增子序列中，则移动该节点

6.3 虚拟 DOM 的优缺点？

优点：

• 保证性能下限
• 无需手动操作 DOM
• 跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

• 无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

6.4 Vue 中的 key 有什么作用？

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。

Vue 的 diff 过程可以概括为：oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它们会新节点和旧节点会进行两两对比，即一共有4种比较方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，如果以上 4 种比较都没匹配，如果设置了key，就会用 key 再进行比较，在比较的过程中，遍历会往中间靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。

• Vue在patch过程中，通过key可以判断两个虚拟节点是否是相同节点。
• 没有key会导致更新的时候出问题
• 尽量不要采用索引作为key

function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

7. 谈谈Vue的性能优化有哪些？

7.1 说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 基于上面一点，SPA 相对对服务器压力小；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

• 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
• 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
• SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

7.2 你有对 Vue 项目进行哪些优化？

（1）代码层面的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• 长列表性能优化，数据层级不要过深，合理的设置响应式数据
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染
• 使用keep-alive来缓存组件
• 虚拟滚动、时间分片等策略

（2）Webpack 层面的优化

• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

（3）基础的 Web 技术的优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

7.3 谈谈你对 keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：

• 一般结合路由和动态组件一起使用，用于缓存组件，避免组件重新创建；
• 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
• 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

使用有两个场景，一个是动态组件，一个是router-view

这里创建了一个白名单和一个黑名单。表明哪些需要需要做缓存，哪些不需要做缓存。以及最大的缓存个数。

缓存的是组件的实例，用key和value对象保存。

加载的时候，监控include和exclude。

如果不需要缓存，直接返回虚拟节点。

如果需要缓存，就用组件的id和标签名，生成一个key，把当前vnode的instance作为value，存成一个对象。这就是缓存列表

如果设置了最大的缓存数，就删除第0个缓存。新增最新的缓存。

并且给组件添加一个keepAlive变量为true，当组件初始化的时候，不再初始化。

7.4 使用过 Vue SSR 吗？说说 SSR？

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

即：SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染 SSR 的优缺点如下：

（1）服务端渲染的优点：

• 更好的 SEO： 因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；
• 更快的内容到达时间（首屏加载更快）： SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

（2) 服务端渲染的缺点：

• 更多的开发条件限制： 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同，服务端渲染应用程序，需要处于 Node.js server 运行环境；
• 更多的服务器负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

8. Vue的组件data为什么必须是一个函数?

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

new Vue是一个单例模式，不会有任何的合并操作，所以根实例不必校验data一定是一个函数。 组件的data必须是一个函数，是为了防止两个组件的数据产生污染。 如果都是对象的话，会在合并的时候，指向同一个地址。 而如果是函数的时候，合并的时候调用，会产生两个空间。

javascript
 体验AI代码助手
 代码解读
复制代码
// data
data() {
  return {
	message: "子组件",
	childName:this.name
  }
}

// new Vue
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App}
})

9. 请说明nextTick的原理。

nextTick是一个微任务。

• nextTick中的回调是在下次Dom更新循环结束之后执行的延迟回调
• 可以用于获取更新后的Dom
• Vue中的数据更新是异步的，使用nextTick可以保证用户定义的逻辑在更新之后执行

10. vue中使用了哪些设计模式？

• 单例模式：new多次，只有一个实例

• 工场模式：传入参数就可以创建实例（虚拟节点的创建）
• 发布订阅模式：eventBus
• 观察者模式：watch和dep
• 代理模式：_data属性、proxy、防抖、节流
• 中介者模式：vuex
• 策略模式
• 外观模式

11. Vue.use是干什么的？

Vue.use是用来使用插件的。我们可以在插件中扩展全局组件、指令、原型方法等。 会调用install方法将Vue的构建函数默认传入，在插件中可以使用vue，无需依赖vue库

12. vue的修饰符有哪些？

• .stop
• .prevent
• .capture
• .self
• .once
• .passive
• .right
• .center
• .middle
• .alt

13. 如何理解自定义指令？

• 在生成ast语法树时，遇到指令会给当前元素添加directives属性
• 通过genDirectives生成指令代码
• 在patch前，将指令的钩子提取到cbs中，在patch过程中调用对应的钩子
• 当执行cbs对应的钩子时，调用对应指令定义方法

14. vue3和vue2的区别

1. 根节点不同

vue2中必须要有根标签。

vue3中可以没有根标签，会默认将多个根标签包裹在一个fragement虚拟标签中，有利于减少内存。

2. 组合式API和选项式API

在vue2中采用选项式API，将数据和函数集中起来处理，将功能点切割了当逻辑复杂的时候不利于代码阅读。

在vue3中采用组合式API，将同一个功能的代码集中起来处理，使得代码更加有序，有利于代码的书写和维护。

3. 生命周期的变化

• 创建前：beforeCreate -> 使用setup()
• 创建后：created -> 使用setup()
• 挂载前：beforeMount -> onBeforeMount
• 挂载后：mounted -> onMounted
• 更新前：beforeUpdate -> onBeforeUpdate
• 更新后：updated -> onUpdated
• 销毁前：beforeDestroy -> onBeforeUnmount
• 销毁后：destroyed -> onUnmounted
• 异常捕获：errorCaptured -> onErrorCaptured
• 被激活：onActivated 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
• 切换：onDeactivated 比如从 A 组件，切换到 B 组件，A 组件消失时执行

我们通常会用 onMounted 钩子在组件挂载后发送异步请求，获取数据并更新组件状态。

这是因为onMounted钩子在组件挂载到DOM后调用，而发送异步请求通常需要确保组件已经挂载，以便正确地操作DOM或者更新组件的状态。

4.v-if和v-for的优先级

在vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费

在vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层

5.Teleport

vue3提供了Teleport组件可将部分Dom移动到vue app之外的位置，比如Dialog组件

6.diff算法不同

vue2中的diff算法

遍历每一个虚拟节点，进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方。 用patch记录的消息去更新dom

缺点：比较每一个节点，而对于一些不参与更新的元素，进行比较是有点消耗性能的。 特点：特别要提一下Vue的patch是即时的，并不是打包所有修改最后一起操作DOM，也就是在vue中边记录变更新。（React则是将更新放入队列后集中处理）。

vue3中的diff算法

在初始化的时候会给每一个虚拟节点添加一个patchFlags，是一种优化的标识。 只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用。

Vue3 相比于 Vue2 虚拟DOM 上增加patchFlag字段。 patchFlag字段帮助 diff 时区分静态节点，以及不同类型的动态节点。一定程度地减少节点本身及其属性的比对。

6. 响应式原理不同

vue2通过 Object.definedProperty() 的 get() 和 set() 来做数据劫持、结合和发布订阅者模式来实现，Object.definedProperty()会遍历每一个属性。

vue3通过proxy代理的方式实现。 通过reactive（）函数给每一个对象都包一层Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。

proxy的优势： 不需要像Object.definedProperty()的那样遍历每一个属性，有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。

当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历，会自动监听所有属性，有利于性能的提升

1.defineProperty只能监听某个属性，不能对全对象监听；可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

2.可以监听数组，不用再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美支持对数组的监听。

7.TypeScript支持

Vue3 由TS重写，相对于 Vue2 有更好地TypeScript支持。

8.事件缓存

Vue3 的cacheHandler可在第一次渲染后缓存我们的事件。相比于 Vue2 无需每次渲染都传递一个新函数，加一个click事件。

9.打包优化

tree-shaking：移除js中上下文未引用的代码，主要依赖import和export语句，用来检测代码模块是否被导入导出，且被js文件使用。

一些全局API在vue2中，是暴露在vue实例上，即使未用过，也无法通过tree-shaking消除

Vue3 中针对全局 和内部的API进行了重构，并考虑到tree-shaking的支持。因此，全局 API 现在只能作为ES模块构建的命名导出进行访问。

通过这一更改，只要模块绑定器支持tree-shaking，则 Vue 应用程序中未使用的api将从最终的捆绑包中消除，获得最佳文件大小。

10.自定义渲染API

Vue3 提供的createApp默认是将 template 映射成 html。但若想生成canvas时，就需要使用custom renderer api自定义render生成函数。

js
 体验AI代码助手
 代码解读
复制代码
//自定义runtime-render函数 import{createApp}from'./runtime-render' 
import App from './src/App' createApp(App).mount('#app')

11.异步组件

Vue3 提供Suspense组件，允许程序在等待异步组件时渲染兜底的内容，如 loading ，使用户体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default和fallback。Suspense确保加载完异步内容时显示默认插槽，并将fallback插槽用作加载状态。 若想在 setup 中调用异步请求，需在 setup 前加async关键字。这时，会受到警告async setup() is used without a suspense boundary。

解决方案：在父页面调用当前组件外包裹一层Suspense组件。

总结

• 更快的渲染性能

• 更小的体积 ，更容易被 Tree-shaking 优化

• 更好的 TypeScript 支持

• 更灵活的组合式 API

• 更好的响应式系统

  • Vue 3 使用了 Proxy 来重写响应式系统，相比 Vue 2 的 Object.defineProperty，更加直观和强大。
  • 在 Vue 3 中，可以在更深的层次上追踪响应式变量的变化，使得开发者能够更准确地监听数据变化。