Vue2 与 Vue3的面试题

℡古壹

已于 2024-04-15 21:31:45 修改

阅读量1.2k

点赞数 23

文章标签：前端 javascript vue.js

于 2024-03-24 11:13:42 首次发布

本文链接：https://blog.csdn.net/weixin_65251013/article/details/136908672

版权

本文概述了Vue.js中的Promise状态、生命周期管理、组件间通信方法、keep-alive的使用、v-if/v-show差异、Vue3与Vue2区别等内容，还涉及了Vue开发中的性能优化技巧和前端常见问题解决方案。

摘要由CSDN通过智能技术生成

1.Promise有几种状态

pending(进行中) fulfilled(已成功) rejected(已失败)

data(){
		return{

		}
	},
	create(){
		const result = this.ganaretor()
		result.next.value.then((res)=>{console.log(res);}) // 解决一直.then()方法问题
	},
	methods:{
		* ganaretor(){
			yield axios.get('httpts')
			yield axios.get('https')
		}

2.Vue2.x 生命周期

2. 进入到页面或者组件，会执行哪些生命周期，顺序。
 beforeCreate
 created
 beforeMount
 mounted
3. 在哪个阶段有$el，在哪个阶段有$data
    beforeCreate 啥也没有
    created  有data没有el
    beforeMount 有data没有el
    mounted 都有
4. 如果加入了keep-alive会多俩个生命周期
    activated、deactivated
5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？
 beforeCreate
 created
 beforeMount
 mounted
 activated
6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
只执行一个生命周期：activated

3.谈谈你对keep-alive的了解

1. 是什么
功能：是来缓存组件的。===》提升性能
2. 使用场景
就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓存起来就可以了，当然如果点击的不是同一个，那么就直接请求。

当用户在首页点击不同页面时，可以根据数据或者id来判断是否重新发送请求，激活时会触发actived钩子函数

4.v-if和v-show区别

1. 展示形式不同
v-if是 创建一个dom节点
v-show 是display:none 、 block

2. 使用场景不同
初次加载使用v-if，页面不会加载盒子
频繁切换使用v-show，因为创建和删除的开销太大了

5.v-if和v-for优先级

在Vue2中v-for的优先级比v-if高 在源码中的genElement()提现

6.ref是什么？

获取dome元素的

$ref通信弊端我认为是两个：
1.因为获取组件实例是要在组件渲染的情况下才能回去，所以如果你想在组件未渲染的时候去通过$ref调用子组件里面的内容的话，会报错，因为此时子组件还没渲染，所以ref拿到的是undefined
2.如果通过ref去修改子组件的数据的话，会导致在子组件里面排查数据来源的时候，来源不好分析，混乱，使得接收数据的来源难以被定位，尤其是在vue2里面，不像vue3那样能直接在子组件里面显式的暴露属性便于排查
这是我认为的ref的两个缺点

7.nextTick是什么?

把回调函数推迟到下次DOM周期更新后再执行

使用场景:页面dom内容发生改变，但是获取dom内容还是不变的

8.路由导航守卫有那些?

见20

9.scoped原理?

1. 作用：让样式在本组件生效，不影响其他组件。
2. 原理：给DOM节点添加自定义属性data-hash值，然后在css使用属性选择器来添加样式。

10.Vue中如何做样式穿透

11.computed、watcht有什么区别?

1. computed vs watch 区别
    computed是有缓存的 watch没有缓存
    computed不能做异步请求，watch可以做异步请求，computed可以做到的，watch也可以做到
2. computed vs watch区别
    watch是监听数据或者路由发生了改变才可以执行
    computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回

12.props和data优先级谁高？

props ===>  methods ===> data ===> computed ===>watch
从源码可以看出

<template>
  <div class="child">
    {{msg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '我是子组件'
    }
  },
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  created() {
    console.log(this.msg) // hello world
  }
}
</script>

<style>
</style>

13.Vuex有哪些属性

state、getters、mutations、actions、modules

state 类似于组件中data，存放数据
getters 类型于组件中computed
mutations 类似于组件中methods
actions 提交mutations的
modules 把以上4个属性再细分，让仓库更好管理

14.Vuex是单向数据流还是双向数据流？

Vuex是单向数据流

15.Vuex如何做持久化存储

Vuex本身不是持久化存储

1. 使用localStorage自己写
2. 使用vuex-persist插件

16.Vue设置代理

创建. vue.config.js

module.exports = {
  publicPath:'./',
  devServer: {
    proxy: 'http://localhost:3000'
  }
}
这样打包后请求路径是不对的
项目打包后出现404的原因，因为项目打包后会生成index.html文件，但是请求跟路径是login

17.Vue项目打包上线

1. 自测==>修改路由模式
2. 代理不生效，使用ENV
3. 修改路径

项目打包出现404、空白页问题
1、路径问题  解决办法 vue.config.js{ publicPath: './' } // 默认是'/'
2、路由模式问题 解决方法:需要后端做重定向 因为我们打包是生成index.html文件，重定向到这个路径


代理和环境变量

感觉可以从多方面分析这个问题吧？比如打包分包压缩或者封装或者用户体验或者懒加载精灵图 svg 重回重流或者cdn这些?

图片资源懒加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

（1）安装插件

npm install vue-lazyload --save-dev

（2）在入口文件 man.js 中引入并使用

import VueLazyload from 'vue-lazyload'

然后再 vue 中直接使用

Vue.use(VueLazyload)

或者添加自定义选项

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

(3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：

<img v-lazy="/static/img/1.png">

以上为 vue-lazyload 插件的简单使用，如果要看插件的更多参数选项，可以查看 vue-lazyload 的 github 地址。

18.Vue路由模式

路由模式有俩种：history、hash
区别：
    1. 表现形态不同
            history:http://localhost:8080/about
            hash:http://localhost:8080/#/about
    2. 跳转请求
            history : http://localhost:8080/id   ===>发送请求
            hash       : 不会发送请求
    3. 打包后前端自测要使用hash，如果使用history会出现空白页

19.Vue路径传值

1. 显式
    http://localhost:8080/about?a=1
    1.1 传：this.$router.push({
              path:'/about',
              query:{
                  a:1
              }
          })
  1.2 接：this.$route.query.a

2. 隐式
    http://localhost:8080/about
    2.1 传：this.$router.push({
              name:'About', // 这个name要跟路由配置name要一致
              params:{
                  a:1
              }
          })
  2.2 接：this.$route.params.a

20.路由导航守卫有哪些

全局、路由独享、组件内

1. 前置路由守卫
    beforeEach、beforeResolve、afterEach
2. 路由独享
    beforeEnter
3. 组件内
    beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

使用场景：判断是否登录，如果登录就next否则就跳转到登录页面

21.Vue组件之间通信有哪些

1.父子之间组件传递

props $emit

$parent $root

ref

$attrs

2. 兄弟组件

$parent $root \ eventButs \ vuex

3.跨层级组件传递

eventBus \ vuex \ provide inject

22.Vue的双向绑定

23.v-model原理