vue前端面试题_pinia面试题

1.vue与react的选择

• React是库Vue是一个完整得框架
• 都能快速运行，都是轻量级前端框架
• 都有一个组件式系统架构
• 都使用virtual DOM
• 都可以放进一个HTML文件中或成为更复杂的Webpack设置模块
• 都有独立但通用的路由器和状态管理库
• React把组件定义为类Vue把组件定义为对象

2.vue特点

• 轻量级，相对于其他框架，vue学习成本低，简单易上手。
• 组件化，保留了 react 框架的优点，实现了封装和重用，且组件间可以相互嵌套。
• 虚拟 DOM。虚拟dom中存在diff算法，是 cpu 密集型运算，占用内存较少，可以提高运行效率，并压缩运行时体积。
• 单页面应用(SPA)。用户体验好，内容改变时不需要重新加载整个页面，不会进行多个 html 页面间的切换；服务器压力小等。
• vue是一个MVVM框架，数据绑定(v-bind、v-model)。
  v-bind => 单向绑定，视图更新驱动不更新
  v-model=> 双向绑定，视图更新驱动更新

优点:渐进式、组件化、轻量级、虚拟 DOM、响应式、单页面路由、数据与视图分开、用户体验好。
缺点:单页面不利于 seo 优化，不支持 IE8 以下，首屏加载时间长。
3.vuex、pinia(菠萝)的理解

• vuex跟pinia是vue的全局状态管理(pinia是vuex的精简版)。
• 多个组件中数据共享、数据缓存(通过创建一个全局new Vue)。

4.vue-router动态路由(定义、获取)

var path = '/index';//动态路由
path += '?id=1';
 
// vue2
const query = this.$route.query;//{id:1}
const routes = this.$router.options.routes;//获取路由
 
// vue3
import { useRouter } from 'vue-router';
const router = useRouter();
const query = router.currentRoute.query;//{id:1}
const routes = router.options.routes;//获取路由

5.$route和$router的区别

• $route包括path、hash、name、query、params、matched、fullPath等路由信息参数。
• $router是“路由实例”对象包括了路由的跳转方法，钩子函数(路由守卫)等。

6.css只在当前组件内起作用

• style标签中写入scoped即可，例：<style scoped></style>。

7.vue几种常用的指令

• v-if：为假时直接不渲染，为真时渲染(删除dom)
• v-on：可以绑定多个方法，绑定事件监听器
• v-for：循环数据(key为唯一标识时，高效的更新虚拟DOM)
• v-else：v-if 为假时渲染，为真时渲染(删除dom)
• v-bind：单向绑定，视图更新驱动不更新
• v-show：不删除dom节点，增加行级样式'display:none'来展示跟隐藏元素
• v-model：双向绑定，视图更新驱动更新

8.vue常用的事件修饰符

• self：触发其他事件之后才会触发当前事件
• stop：阻止单击事件冒泡(A元素包B元素时点击B事件(@click.stop="B")不会触发A事件)
• native：原生点击事件
• capture：事件侦听，事件发生的时候会调用
• prevent：提交事件不再重载页面

9.什么是vue的计算属性

注：过多的逻辑来进行数据处理就会使代码难以维护，这样的情况尽量采用计算属性来处理

• 依赖于数据但是并不会修改到数据源
• methods不管依赖变不变都会重新计算
• 计算属性来处理会使结构更加清晰，有利于维护。
• 在computed中可以通过get、set来获取数据跟更改数据
• 在template调用时，直接写计算属性名来渲染不更改数据源

10.vue等单页面应用及其优缺点

首先我们得知道Vue把组件定义为对象，vue得工作是把数据渲染到模板上在通过vue-cli挂载到app的标签上然后通过render函数插入到这个标签内，在通过签单路由来实现组件间得跳转

• vue是尽可能简单得通过APL来实现响应数据绑定和组合得视图组件
• 核心是一个响应数据绑定系统
• MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好
• 不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化
• 第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退

11.watch、computed、methods差异

• watch是进行数据监听，然后进行相应的操作，执行方法等
• computed依赖数据变化的时候才会进行相应的变化
• methods依赖数据变化的时候才会进行相应的变化(重新执行)

<div>{{ ab }}</div>
<div>{{ a }}computed直接改变</div>
<div>{{ b() }}调用，重新执行</div>
<div @click="onClick">{{ c('111', '222', '333') }}computed(传参方式)</div>
 
export default {
  components: {},
  data() {
    return { ab: 未改变 }
  },
  watch: {
    ab(val, oldVal) {
      console.log(`改变后: ${val}, 改变前: ${oldVal}`)
    },
  },
  computed: {
    a() {
      return this.ab + 'aaaa'
    },
    c() {
      return function (a, b, c) {
        return a + b + c
      }
    }
  },
  methods: {
    b() {
      return this.ab + 'bbbb'
    },
    onClick() {
      this.ab = '改变'
    }
  }
}

12.组件中data为什么是函数

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

因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

13.对于MVVM的理解？

MVVM 是 Model-View-ViewModel 的缩写。

• Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
• View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
• ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

14.VUE生命周期的几个阶段

1. beforeCreate
   在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created
   在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount
   在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted
   在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
5. beforeUpdate
   在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6. updated
   在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7. beforeDestroy
   在实例销毁之前调用。实例仍然完全可用。
8. destroyed
   在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

15.什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

16.vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

17.vue生命周期总共有几个阶段？

总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

18.第一次页面加载会触发哪几个钩子？
beforeCreate, created, beforeMount, mounted

18.DOM 渲染在 哪个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成了。

19.VUE实现数据双向绑定的原理：

• 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调
• 当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。
• 用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
• vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

20.VUE组件间的参数传递

// A父组件
const name = '逸尘';
<Components :name="name" @onFun="fun"></Components>
fun(e){
    console.log("e:", e);//自组建向父组件穿值的取值方法
}
 
// B父组件
// 兄弟组件之间传至可以通过vuex跟pinia全局状态管理
// 创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件
const arr= [];
export default arr
 
// A子组件
// props里面定义参数name
// 直接通过this.name 的形式去props中获取
this.$emit('onFun', '自组建向父组件穿值的取值方法')

21.VUE的路由实现：hash模式和history模式

hash模式：
在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：
history采用HTML5的新特性；且提供了两个新方法：pushState()，replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：
“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

22.VUEX是什么？怎么使用？哪种功能场景使用它

只用来读取的状态集中放在store中的state下,改变状态的方式是提交mutations，这是个同步的事物, 异步逻辑应该封装在actions中。
在main.js引入store，新建了一个目录store，….. export 。
使用场景：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

23.对keep-alive的理解

• keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
• 在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

注：include匹配到的组件进行缓存，exclude匹配到的组件不进行缓存(分隔字符串、正则表达式、数组)
24.vue的watch的深度使用

// watch deep => 深度监听 immediate => 侦听器创建时立即触发回调
export default {
  components: {},
  data() {
    return {
        a: true,
        b: { bb: 'bbbb' },
        c: { cc: 'cccc' }
    }
  },
  watch: {
    a(val, oldVal) {
      console.log(`改变后: ${val}, 改变前: ${oldVal}`)
    },
    b: {
        handler (newName, oldName) {
            console.log(newName)
        },
        deep: true
    },
    c: {
        handler (newName, oldName) {
            console.log(newName)
        },
        immediate: true
    },
  }
}

25.vuex中mutation和action的详细区别

• 流程顺序
  "相应视图—>修改State"拆分成两部分，视图触发Action，Action再触发Mutation。
• 触发方式
  mutation的触发通过store.commit来进行
  action的触发通过store.dispatch进行
• 角色定位
  基于流程顺序，二者扮演不同的角色。
  Mutation：专注于修改State，理论上是修改State的唯一途径。
  Action：业务代码、异步请求。
• 限制
  角色不同，二者有不同的限制。
  Mutation：必须同步执行。
  Action：可以异步，但不能直接操作State。

26.vue-router中导航守卫有哪些
注：三种导航守卫，分别是：全局导航守卫、路由独享的守卫、组件内的守卫

• 全局守卫： router.beforeEach => 页面加载前
• 全局守卫： router.afterEach=> 页面加载后
• 全局解析守卫： router.beforeResolve => router.beforeEach相同
• 路由独享的守卫： beforeEnter => 单独绑定到路由,只针对当前
• 组件内的守卫： beforeRouteEnter、beforeRouteUpdate 、beforeRouteLeave

to => 当前、to => 记录、next()=> 继续执行

const routes = [
    {
        path:'/index',//对应匹配的路径
        component: () => import('index/index.vue'),//页面路由
        beforeEnter: (to, from, next) => {}//钩子函数(单独绑定到路由,只针对当前)
    }
]
// 全局守卫(页面加载前)
router.beforeEach((to, from , next) => { })
// 全局守卫(页面加载后)
router.afterEach((to, from) => {})
// 组件内的守卫
beforeRouteEnter((to, from, next) => { }),
beforeRouteUpdate((to, from, next) => { }),
beforeRouteLeave((to, from, next) => { })

27.vue中虚拟DOM diff算法
diff算法：将两个模块进行差异化对比，修补更新差异的过程叫做patch打补丁，是一种优化手段。

• 渲染DOM性能消耗大，所以我们使用diff来实现针对性修改
• 通过真实DOM生成virtual DOM
• 通过virtual DOM来跟oldVnode来比较(对象的形式模拟树形结构)，并给virtual DOM打补丁
• 采取diff算法比较新旧节点，比较只会在同层级进行, 不会跨层级比较。

优点：

• 虚拟DOM可以保证性能下限提高开发效率。
• 虚拟DOM可以通过diff找出最小差异，然后批量进行patch。
• 虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发。

缺点：

• DOM无法进行极致优化，没有手动优化来得极致，但是可以保证优化得下线。