Vue面试题

1.diff算法：通过同层树结构进行对比的较高算法

diff算法是通过同级进行比较，不会进行跨级比较
策略: 深度优先，同级比较
特点:比较只会在同级进行，不会跨级比较，在diff算法的比较过程中，是循环两边向中间进行

2.Vue3中怎么设置全局变量

• config.globalProperties
• provide/inject

3.刷新浏览器后Vuex的数据是否会存在？如何解决？

在vue项目中使用vuex进行状态管理，刷新页面后保存在vuex实例中store里的数据丢失
；两种方法解决：使用Vuex-along；使用localStorage或者是sessionStorage

4.说下Vite的原理

基于esbuild与Rollup,依靠浏览器自身ESM编译功能，实现极致开发体验的新一代构建工具

5.Vue中$route和$router有什么区别

$route是routers实例,通过this.$router访问路由器，具有实例方法
$router获取当前激活路由的信息对象

6.说说 vue3 中的响应式设计原理

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值得读写，属性的增加，属性的删除等
通过Reffect(反射)： 对源对象的属性进行操作

7.vue路由中，history和hash两种模式有什么区别？

• hash模式
  是一种吧前端路由的路径用#拼接在真实URL后的模式，当#后面的路径发生变化时，浏览器不会重新发起请求，而是触发hashchange事件
  优点：浏览器兼容性比较好，支持兼容IE8
  缺点：路径在#后，比较丑
• history模式
  historyAPI是H5提供的新特性，允许开发者直接更改前端路由，即更新浏览器的URL地址而不是发起请求
  优点：路径比较正规，没有#
  缺点：兼容性不如hash，且需要服务端支持，否则刷新页面就404了

8.Vue2.0为什么不能检查数组的变化，该怎么解决？

Vue检测数据的变动是通过Object.definedProperty实现的，所以无法监听数组的添加操作，因为是在构造函数中就已经为所有属性做了这个检测绑定操作
解决：
数组：使用this.$set(array,index,data)、splice、利用临时变量进行中转对象：使用this.$set(obj, key, value)可实现增、改，watch时添加deep:true进行深度监听，只能监听到属性值的变化，新增、删除属性无法监听，watch时直接监听某个key

9.说说Vue 页面渲染流程

初始化调用$mount挂载组件，构建VNode(_render)，完成构建(_update)，patch阶段根据VNode创建真实节点树

10.react 和 vue 有什么区别？

• React的思路是HTML in Javascript 也可以说是All in Javascript，通过Javascript来生成HTML，所以设计了JSX语法，还通过JS来进行CSS,React整体是函数式的思想，在React中是单向数据流，推崇结合immutable来实现数据不可变。
• Vue是把HTML、CSS、javascript组合到一起，用各自的处理方式，Vue有单文件组件，可以把HTML、CSS、JS写到一个文件中，HTML提供了模板引擎处理，Vue的思想是响应式，就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应虚拟DOM

11.vue中computed和watch区别

• computed：初始化显示或者相关的data、props等属性数据发生变化时候调用；计算属性不在data、props中，他是基于data或props中的数据通过计算获取到一个新的值，这个新值根据已知值得变化而变化；computed属性对象中定义计算属性的方法，和取data对象里的数据属性一样，以属性访问的形式调用；如果computed属性值是函数，则默认会走get方法，必须要有一个返回值，函数的返回值就是属性的属性值；computed属性值默认会缓存计算结果，在重复调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改变，computed才会重新结算；computed中的属性都有一个get和set方法，当数据变化时，调用set方法
• watch:主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体；可以监听数据来源：data、props、computed内的数据；watch支持异步；不支持缓存，监听的数据改变，直接回触发想要的操作；监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值。

12.自定义指令是什么？有哪些应用场景？

Vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统

13.Vue 中，假设 data 中有一个数组对象，修改数组元素时，是否会触发视图更新？

不会触发视图更新
触发视图更新可以用以下几种：

• Vue.set：可以设置对象或数组的值，通过key或者数组索引，可以触发视图更新

  数组修改：Vue.set(array, indexOfItem, newValue)
  对象修改：Vue.set(obj, keyOfItem, newValue)

• Vue.delete：删除对象或者数组中元素，通过key或者数组索引，可以触发视图更新

  数组修改：Vue.delete(array, indexOfItem)
  对象修改：Vue.delete(array, keyOfItem)

• 数组对象直接修改属性，可以触发视图更新

this.array[0].isShow = true
this.array.forEach(function(item) {
  item.isShow = true
})

• 数组赋值为新数组，可以触发视图更新

this.array = this.array.filter(...)
this.array = this.array.concat(...)

• Vue提供了如下的数组的变异方法，可以触发更新视图
  Vue将被真挺的数组的变更方法进行了包裹，所以他们也将会触发视图更新。包括

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

14.Vuex有几种属性，它们存在的意义分别是什么？

有五种，分贝时state、getter、mutation、action、module

• state 属性时Vuex的单一状态树
• Getter 类似于Vue的computed对象。是根据业务逻辑来处理State，使得生成业务所需的属性
• Mutation 是唯一用来更改Vuex中状态的方法
• Action 类似于mutation，不同在于：
  • Action 提交的是mutation，而不是直接变更状态
  • Action 可以包含任意异步操作
    Action 是用来解决异步操作而产生的，它提交的是Mutation
• Module 是将Vue模块化的对象，目的是更好的维护。

15.nextTick

官方定义：在下次DOM更新循环结束之后指向延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
Vue在更新DOM时是异步指向的。当数据发生变化，Vue将开启一个异步更新对了，视图需要等待对了中所有数据变化完成之后，再统一进行更新。

16.Vue.set()的原理及使用

Vue.set()：添加响应式属性
vm.set()：添加响应式属性

• 原理：每个组件实例都有相应的watcher实例对象，它会在组件渲染过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
  使用：
  $set()与Vue.set()
  1.通过Vue.set()改写
  语法：

Vue.set(target, propertyName/index, value)
参数：
{ Object | Array } target
{ string | number } propertyName/index
{ any } value
返回值：设置的值

2.通过$set()改写
语法：

vm.$set(target, propertyName/index, value)
参数：
{ Object | Array } target
{ string | number } propertyName/index
{ any } value
返回值：设置的值
用法： 这是全局Vue.set的别名，参考Vue.set

3.Vue.set()和this.$set()的区别

Vue.set()源码：
import { set } from '../observer/index'
Vue.set = set

this.$set()源码
import { set } '../observer/index'
Vue.prototype.$set = set

可以发现Vue.set()和this.$set()这两个API的实现原理基本上是一模一样，都是使用了set函数。set函数时从../observer/index文件中导出的区别：Vue.set()是将set函数绑定在Vue构造函数上，this.$set()是将set函数绑定在Vue原型上

17.谈谈对Vue中双向绑定的理解

Vue中的双向绑定是指数据的改变可以自动更新到视图，同时视图中数据的改变也可以自动更新到数据。这种特性可以让开发者更加便捷地进行视图的渲染和数据的操作。

Vue中实现双向绑定的方式是通过一个称为“数据劫持”的技术。当一个Vue实例创建时，Vue会遍历这个实例的所有属性，将这些属性都转化为getter和setter，以便于Vue能够监听到数据的变化。

当我们对数据进行修改时，Vue会自动调用setter方法，从而触发视图的更新。而当视图中的数据发生变化时，Vue会通过监听DOM事件，自动调用getter方法获取最新的数据，然后更新到数据模型中。

双向绑定可以使得我们在开发中更加快速高效地处理数据和视图之间的交互，而不需要手动去操作DOM。但是需要注意的是，在数据量很大的情况下，过度使用双向绑定可能会影响性能，因此需要合理使用。

18.vue 双向数据绑定

Vue双向数据绑定是Vue框架中的一个核心特性，它可以实现数据的响应式更新。当数据模型发生变化时，视图会自动更新；反之，当视图发生变化时，数据模型也会自动更新。

Vue双向数据绑定的实现原理是通过使用数据劫持（Object.defineProperty()）和发布/订阅模式（Dep）来实现的。具体来说，Vue通过对数据对象进行递归遍历，对每个属性都通过Object.defineProperty()方法设置getter和setter方法。当数据发生变化时，setter方法会被触发，通知订阅了这个数据的视图进行更新。同时，Vue还会对每个数据对象创建一个对应的观察者对象（Watcher），当数据发生变化时，观察者会收到通知，从而触发相应的更新操作。

Vue双向数据绑定的基本语法是使用v-model指令。v-model指令可以将表单控件（如input、textarea、select等）的值与Vue实例中的数据进行双向绑定。当表单控件的值发生变化时，数据模型也会自动更新；反之，当数据模型发生变化时，表单控件的值也会自动更新。

例如，以下是一个基本的双向数据绑定的示例：

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

在上面的示例中，输入框的值与message属性进行了双向绑定，当输入框的值发生变化时，message属性也会自动更新；反之，当message属性发生变化时，输入框的值也会自动更新。由于Vue的双向数据绑定机制，开发者不需要手动操作DOM，就可以实现页面上数据和视图的自动同步，大大提高了开发效率。