Vue（Vuex）常见面试题_vuex面试题

1、请解释什么是Vue.js以及其主要特点和优势。

    Vue.js是一种用于构建用户界面的渐进式JavaScript框架。它的主要特点和优势包括：

• 渐进式框架：Vue.js可以逐步引入项目中，从一个页面的一小部分开始使用，而不必全面改变现有的项目。
• 轻量级：Vue.js的核心库非常小巧，并且可以与其他库或现有项目集成，降低学习和使用成本。
• 双向数据绑定：Vue.js使用了双向数据绑定机制，数据的变化会立即反映在视图上，同时视图中的变化也会更新到数据模型中。
• 组件化开发：Vue.js支持以组件化的方式编写代码，可以将一个页面拆分为多个可复用的组件，提高代码的可维护性和重用性。
• 虚拟DOM：Vue.js使用虚拟DOM来提高页面的渲染性能，通过比对虚拟DOM的差异来最小化真实DOM的操作次数。
• 生态系统：Vue.js拥有一个庞大的生态系统，包括Vue Router、Vuex、Vue CLI等众多扩展和工具，能够满足各类应用的需求。

2、Vue.js中的生命周期钩子函数是什么？（vue2.0）

     Vue.js中的生命周期钩子函数是为了在组件不同阶段执行代码而提供的方法。常见的生命周期钩子函数包括：

• beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。
• created：在实例创建完成后调用，此时实例已经完成了数据观测，可以访问data、computed、methods和watcher，但DOM还未进行编译。
• beforeMount：在挂载开始之前调用，相关的render函数首次被调用。
• mounted：在实例挂载到DOM元素后调用，此时DOM已经编译完成，可以进行DOM操作。
• beforeUpdate：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。
• updated：在数据更新之后调用，发生在虚拟DOM重新渲染和打补丁之后。
• beforeDestroy：在实例销毁之前调用，此时实例仍然完全可用。
• destroyed：在实例销毁之后调用，此时实例已经解除了事件监听和子组件的引用。

3、Vue.js中的computed和watch的区别是什么？

    computed和watch都可以用于监听数据的变化，但它们的使用场景和功能略有不同。

• computed：计算属性是根据对应的依赖值自动计算得出的属性。计算属性通过提供一个函数，将计算逻辑放在函数内，当依赖值发生变化时，计算属性会自动重新计算。计算属性会根据依赖值的变化进行缓存，只有在依赖值发生变化时才进行重新计算。计算属性通常用于处理需要根据其他属性计算得出的值。
• watch：监视是一种观察数据变化并执行相应操作的功能。通过提供一个函数，当被监视的数据发生变化时，watch函数会被调用。watch可以监听一个或多个数据的变化，并执行相应的操作，例如触发异步请求、更新数据等。watch通常用于监听数据的变化并执行复杂的业务逻辑。

4、Vue.js中如何实现父子组件之间的通信？

    Vue.js中提供了多种方式实现父子组件之间的通信，包括：

• 父组件向子组件传递数据：可以通过props将父组件的数据传递给子组件，在子组件中通过props接收数据。
• 子组件向父组件传递数据：可以通过在子组件中使用$emit方法触发一个自定义事件，并通过$emit传递数据给父组件，在父组件中通过在子组件标签上监听自定义事件来接收数据。
• 使用vuex进行状态管理：vuex是一个专为Vue.js应用程序开发的状态管理模式。可以在实例化Vuex.Store对象时定义state，并在子组件中通过this.$store.state访问state中的数据。
• 在共同的父组件中使用事件总线：可以在共同的父组件中创建一个Vue实例，作为事件总线，子组件可以通过$emit触发事件，父组件通过$on监听事件并接收数据。
• 使用provide和inject：可以通过父组件提供provide属性，子组件通过inject属性接收父组件提供的数据。

5、请解释Vue.js的路由是如何工作的？

      Vue.js的路由采用了Vue Router插件来实现。在Vue.js中使用路由可以实现单页应用的页面跳转和切换。

• 首先，需要在Vue项目中安装和配置Vue Router插件。
• 在路由配置文件中，定义路由表，即指定路由路径和对应的组件。
• 在入口文件中，引入Vue Router插件，并创建Vue实例时传入路由配置。
• 在页面中，可以使用<router-link>标签生成链接，通过to属性指定目标路由的路径。
• 在组件中，可以使用<router-view>标签渲染对应的组件，router-view将根据当前路由路径渲染对应的组件。
• 使用Vue Router提供的API，可以通过编程的方式进行路由跳转、参数传递等操作。

6、请解释Vue.js中的v-model指令的使用和原理。

• v-model指令是Vue.js中用于双向数据绑定的指令。它可以用于在表单元素和自定义组件上创建双向数据绑定。
• 在表单元素上，v-model指令会自动绑定表单元素的value属性和Vue实例中指定的数据。当表单元素的值变化时，v-model会将新的值同步到Vue实例中的数据。反过来，当Vue实例中的数据发生变化时，v-model会将新的数据同步到表单元素的value属性。
• 在自定义组件上，v-model指令是一种抽象的语法糖，实际上是通过props和events来实现数据的传递和更新。通过在组件上定义prop和emit事件，可以实现自定义组件和父组件之间的双向数据绑定。
• 原理上，v-model指令就是将表单元素的value属性和input事件通过一种约定的方式与数据进行绑定，实现双向数据的更新。不同的表单元素有不同的value属性和input事件，Vue.js会根据表单元素的类型来动态绑定对应的value属性和input事件。

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

• 两者都可以动态控制Dom元素的显示和隐藏
• v-if显示和隐藏是将Dom元素整个添加或删除，而隐藏之后在文档流中是不存在的
• v-show 隐藏则是为该元素添加css样式 display：none，元素在文档流中是存在的
• 频繁使用时推荐使用v-show，运行较少时使用v-if

8、Vue中如何让css样式只在当前组件中生效使用

在组件中的style标签中添加属性:scoped=scoped (简写：scoped )

• <style scoped lang="scss"></style>
  

9、vue-loader是什么？使用它的用途有哪些？

    vue-loader 是一个 webpack 的 loader，用于将.vue 文件转换为 JavaScript 模块。使用 vue-loader 可以实现以下功能：

• 支持在vue 文件中使用单文件组件的方式编写 Vue 组件。
• 支持在vue 文件中使用 ES6 的 import/export 语法导入/导出模块。
• 支持在vue 文件中使用 CSS 预处理器（如 LESS、SASS 等）编写样式。
• 支持在vue 文件中使用自定义模板语言编写模板。
• 支持在vue 文件中使用 TypeScript 编写脚本。
• 可以通过配置文件对.vue 文件进行自定义的转换处理。

     总的来说，vue-loader 可以使开发者能够更方便地使用.vue 文件编写 Vue 组件，并且支持更多高级的语法和功能。

10、vue组件中的data为什么必须是一个函数

• 因为JavaScript的特性所导致，在从component中data必须是以函数的形式存在，不可以是对象
• 在Vue组件中，data选项必须是一个函数。这是因为每个Vue组件实例都是独立的，拥有自己的数据对象。如果data选项是一个对象，那么所有的组件实例将共享同一个数据对象，导致数据混乱和不可预测的行为。
• 通过将data选项设置为一个函数，每个组件实例都会调用该函数来返回自己的数据对象。这样就确保了每个组件实例都有自己独立的数据，并且不会相互影响。
• 另外，使用函数返回数据对象的方式还可以在每次创建组件实例时重新初始化数据，避免数据的副作用和缓存问题。这在组件复用和动态组件等场景下是非常有用的。

11、vue中的双向绑定是如何实现的？

• vue双向数据绑定是通过数据劫持，结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之改变的
• 关于bue双向数据绑定其核心是object.definePropety()方法

12、vue-router跳转和location.href有什么区别

• 使用location跳转简单方便，但是刷新了页面
• 使用history.pushState('/url')无刷新页面，静态跳转
• 引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了Dom的消耗

13、页面第一次加载会触发哪些钩子函数？

   beforeCreate 、created、 beforeMount、mounted

14、created与mounted的区别

     在Vue.js中，created和mounted是两个不同的生命周期钩子函数，它们有以下区别：

• created钩子函数在Vue实例被创建之后立即调用，而mounted钩子函数在Vue实例被挂载到DOM元素之后调用
• created钩子函数主要用于在实例被创建之后进行一些初始化操作，例如对数据的处理、对事件的监听等。而mounted钩子函数主要用于在Vue实例被挂载到DOM元素之后进行一些DOM操作，例如获取DOM元素、操作DOM元素等。
• created钩子函数中的操作是在Vue实例被创建之后立即进行的，因此在这个钩子函数中无法保证DOM元素已经被完全渲染出来。而mounted钩子函数中的操作是在Vue实例被挂载到DOM元素之后进行的，因此可以保证DOM元素已经被完全渲染出来。

      综上所述，created和mounted钩子函数的主要区别在于它们执行的时机和主要用途。在一般情况下，可以将数据的初始化操作放在created钩子函数中，将DOM的操作放在mounted钩子函数中。

15、vue 获取数据在那个周期函数？

   一般在created 、beforeMount 、mounted 皆可，比如你要操作Dom，那肯定mounted时候才能操作

16、vue-router有那几种导航钩子？

• beforeEach：在路由跳转之前调用，可以用来进行全局的导航守卫，可以在这里进行登录验证等操作。
• afterEach：在路由跳转之后调用，可以用来进行页面切换之后的一些操作，比如页面标题的修改等。
• beforeEnter：在单个路由配置中使用，在该路由进入之前调用，可以用来进行路由独享的导航守卫。
• beforeRouteEnter：在组件被激活之前调用，但是此时导航还没开始，所以此时无法获取到组件实例（this）。
• beforeRouteUpdate：在组件被复用时调用，比如在同一个组件切换不同的参数时调用。
• beforeRouteLeave：在组件离开之前调用，可以用来进行路由离开时的一些操作，比如弹窗提示是否保存修改等。

17、简述一下Less、Sass，及其区别？

      Less和Sass都是CSS预处理器，它们提供了一些扩展功能，使得CSS编写更加简洁和灵活。          Less是一种动态样式语言，使用类似于CSS的语法，但是增加了一些功能，比如变量、混合（mixins）、嵌套规则等。Less由JavaScript编写，需要在客户端通过JavaScript解析执行。

     Sass（Syntactically Awesome Style Sheets）是一种成熟的、稳定的CSS预处理器，它使用了类似于CSS的语法，但是增加了一些功能和语法糖，比如变量、嵌套规则、混合、继承等。Sass由Ruby编写，需要通过Ruby解析执行。

区别：

1. 语法：Less使用类似于CSS的语法，而Sass使用类似于Ruby的语法。
2. 解析器：Less由JavaScript解析执行，Sass由Ruby解析执行。
3. 继承：Sass支持通过继承来构建样式，而Less不支持。
4. 错误处理：Sass具有更好的错误处理机制，能够提供更准确的错误提示和调试信息。
5. 生态圈：Sass拥有更庞大的生态圈，有更多的第三方库和插件可供使用。

总的来说，Less和Sass在功能上是非常相似的，但是在语法及解析器上有所不同，选择哪一个取决于个人的偏好和项目需求。

---

18、Vuex是什么？怎么使用？那种功能场景使用它？

Vuex是一个用于管理Vue.js应用程序状态的状态管理库。它将应用程序的状态存储在一个中央的地方，并以响应式的方式进行更新。通过使用Vuex，开发者可以更方便地在不同组件间共享和修改状态。

要使用Vuex，首先要安装和引入它。可以使用npm或者yarn进行安装：

npm install vuex
# 或者
yarn add vuex

然后在Vue.js应用程序的入口文件中引入Vuex，并将其作为Vue的插件来使用：

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)

接下来，需要创建一个Vuex store实例，用于存储和管理应用程序的状态：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

在上面的例子中，我们定义了一个包含count状态的state，以及一个用于修改count状态的mutation，还有一个用于触发mutation的action，以及一个用于获取派生状态的getter。

最后，通过在Vue组件中使用Vuex提供的辅助函数（如mapState、mapMutations、mapActions、mapGetters等），可以方便地在组件中访问和修改状态。

Vuex适用于以下场景：

• 多个组件需要共享和修改同一个状态。
• 需要在状态发生变化时进行响应式更新。
• 需要对状态进行一些处理或计算，以生成派生状态（如计算属性）。
• 需要对状态的变化进行一些异步操作（如发起AJAX请求）。

总之，Vuex提供了一种统一的方式来管理应用程序的状态，使得开发者能够更好地组织和维护状态逻辑。

19、v-for中key的作用

       在Vue的v-for中，key的作用是为每个被渲染的元素提供一个唯一的标识。这个标识可以帮助Vue识别哪些元素是已经被渲染的，哪些是新加入的，以便进行高效的元素更新和重用。

具体来说，key的作用有以下几点：

• 识别元素：通过key，Vue可以追踪每个元素的身份，确保元素的状态在列表中改变时正确更新。如果没有key，Vue会使用默认的更新策略，可能导致不必要的性能开销。
• 提高渲染效率：Vue使用key来进行就地复用，复用相同key的元素而不是从头开始渲染。这可以减少DOM操作，提升渲染性能。
• 维护组件状态：在使用v-for渲染组件列表时，使用key可以帮助Vue正确地维护组件的内部状态。如果不使用key或使用错误的key，可能会导致组件的状态错乱或不正确的渲染。

       需要注意的是，key必须是唯一且稳定的，通常使用数据的唯一标识符作为key。在使用v-for遍历对象时，可以使用对象的属性作为key。在使用v-for渲染组件列表时，通常使用列表中每个数据的唯一标识符作为key。

20、Vuex的store特性是什么

• vuex就是一个仓库，仓库里放了很多对象，其中state就是数据源存放地，对应与一般vue对象里面的data
• state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
• 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

21、vuex 的 getter 特性是什么

• getter 可以对 state 进行计算操作，它就是 store 的计算属性

• 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用

• 如果一个状态只在一个组件内使用，是可以不用 getters

22、vuex 的 mutation 特性是什么

• action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
• action 可以包含任意异步操作 

23、vuex的state、getter、mutation、action、module特性分别是什么？

• state：存放公共数据的地方
• getter：获取根据业务场景处理返回的数据
• mutations：唯一修改state的方法，修改过程是同步的
• action：异步处理，通过分发操作触发mutation
• module：将store模块分割，减少代码臃肿

24、你觉得要是不用vuex的话会带来哪些问题 

• 组件之间传值麻烦复杂
• 可维护性会下降，你要修改数据，你得维护 3 个地方
• 可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
• 增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

25、vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中？请求数据是写在组件的methods中还是在vuex的action中？

• 如果请求的数据是多个组件共享的，为了方便只写一份，就写vuex里面，如果是组件独用的就写在当前组件里面。
• 如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里
• 如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

 26、ref 、toRef 、toRefs的区别

    在Vue 3中，ref、toRef和toRefs都是与响应式数据相关的API。

• ref：用于创建一个可响应的数据引用。它接收一个参数作为初始值，并返回一个ref对象。这个对象包含了一个value属性，用于访问和修改引用的值。当使用ref创建一个引用时，Vue会自动追踪对引用的更改。

import { ref } from 'vue'
 
const count = ref(0) // 创建一个引用
 
console.log(count.value) // 访问引用的值
 
count.value++ // 修改引用的值

• toRef：用于创建一个响应式的对象属性引用。它接收一个对象和一个键名作为参数，并返回一个引用。这个引用可以访问和修改原对象中对应键名的值，并且会与原对象的相应属性保持同步。

import { reactive, toRef } from 'vue'
 
const state = reactive({ count: 0 })
 
const countRef = toRef(state, 'count') // 创建一个对count属性的引用
 
console.log(countRef.value) // 访问引用的值
 
countRef.value++ // 修改引用的值
 
console.log(state.count) // 输出1，与引用的值保持同步

• toRefs：用于将一个响应式对象转换为普通对象，并使其所有属性都成为可响应的。它接收一个响应式对象作为参数，并返回一个包含所有属性的对象，每个属性都是一个引用。

import { reactive, toRefs } from 'vue'
 
const state = reactive({ count: 0 })
 
const refs = toRefs(state) // 将state对象转换为包含所有属性的对象
 
console.log(refs.count.value) // 访问属性的值
 
refs.count.value++ // 修改属性的值
 
console.log(state.count) // 输出1，与属性的值保持同步

总结一下：

• ref用于创建一个可响应的数据引用。
• toRef用于创建一个响应式的对象属性引用。
• toRefs用于将一个响应式对象转换为普通对象，并使其所有属性都成为可响应的。