2024面试题【vue2】

好喝的西北风

于 2024-06-15 08:21:12 发布

阅读量917

点赞数 22

分类专栏： vue 文章标签： javascript 前端 vue 面试

本文链接：https://blog.csdn.net/weixin_43340372/article/details/139668094

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1.关于生命周期

1.1生命周期有哪些？发送请求是在created还是mounted

beforeCreate：创建之前（el、data和message都还是undefined,不可用的）

created：创建完毕（能读取到数据data的值,但是DOM还没生成）

beforeMount：挂载之前（生成DOM,但此时{{ message }}还没有挂载data中的数据）

mounted：挂载完毕（{{ message }}已经成功挂载渲染data的值）

beforeUpdate：更新之前

updated：更新完毕

beforeDestroy：销毁之前

destroyed：销毁完毕

activated：keep-alive 组件激活时调用

deactivated：keep-alive 组件停用时调用

注意：

activated 和 deactivated 是比较特殊的两个钩子，需要keep-live配合使用
当引入 keep-alive 的时候，页面第一次进入，钩子的触发顺序 created => mounted => activated，退出时触发 deactivated。当再次进入（前进或者后退）时，只触发activated。

如果我们的请求不需要获取/借助/依赖/改变DOM，这时请求可以放在Created

反之则可以放在Mounted里

1.2 一旦进入组件会执行哪些生命周期

beforeCreate
created
beforeMount
mounted

1.3父组件引入子组件生命周期的执行顺序是？

父：beforeCreate created beforeMount

子：beforeCreate created beforeMount mounted

父：mounted

1.4 为什么发送请求不在beforeCreate中？beforeCreate和created有什么区别

因为如果请求封装在methods中，在beforeCreate调用的时候，这个阶段时拿不到methods中的方法的所以不行。

beforeCreate中没有data

created中有data

2.关于组件

2.1 组件的通信方式

父子组件之间的通信

props

$emit/v-on

attrs/listeners

ref (http://t.csdn.cn/AGOIR)

.sync

v-model

children/parent

兄弟组件之间的通信

EventBus

Vuex

$parent

2.2 如何找到根组件

this.$root

2.3 slot

默认插槽、具名插槽、作用域插槽

默认插槽：

父组件

<template>
	<div class="container">
        <!--默认插槽-->
        <!--写在标签上的是父组件以props形式向子组件传递的属性,与插槽无关-->
        <Category title="美食" :listDate="foods">
            <!--希望向子组件中插入的内容-->
    		<img src="img1.jpg">
    	</Category>
    </div>
</template>

<script>
	import Category from './components/Category'
    export default{
        name:'App',
        components:{Category}
    }
</script>

子组件

<template>
	<div class="category">
        <slot></slot>
    </div>
</template>
<script>
    export default{
        name:'Category'
    }
</script>

具名插槽

有时候会同时需要多个插槽，并将其渲染到不同的位置上，此时就需要使用具名插槽

父组件

<template>
	<div class="container">
        
        <Category title="美食" :listDate="foods">
            <!--添加名称-->
            <template v-slot:center>
    			<img src="img1.jpg">
  			</template>
            <!--添加名称-->
			<template v-slot:footer>
    			<a href="www.baidu.com">百度</a>
  			</template>
    	</Category>
        
    </div>
</template>

<script>
	import Category from './components/Category'
    export default{
        name:'App',
        components:{Category}
    }
</script>

子组件

<template>
	<div class="category">
        <!--指定名称-->
        <slot name="center"></slot>
        <!--指定名称-->
        <slot name="footer"></slot>
    </div>
</template>
<script>
    export default{
        name:'Category'
    }
</script>

作用域插槽

当数据在组件的自身，而根据数据生成的结构需要组件的使用者来决定时，就要用作用域插槽

假设子组件<current-user>具有user对象数据，此时有如下代码

父组件

<current-user>
    <template v-slot:default="ScopeData">
		{{ ScopeData.user.firstName }}
    </template>
</current-user>

子组件

<span>
  <slot :user="user"></slot>
</span>

3.Vuex

3.1 对vuex的理解

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

3.2 vuex有哪些属性

有五种，分别是 State、 Getter、Mutations 、Actions、 Modules

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

各模块在流程中的功能：
Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
dispatch：操作行为触发方法，是唯一能执行action的方法。
actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。可以定义异步函数，并在回调中提交mutation,就相当于异步更新了state中的字段
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations：状态改变操作方法，由actions中的commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。
state：state中存放页面共享的状态字段
getters：相当于当前模块state的计算属性

3.3 Vuex 为什么要分模块并且加命名空间

模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

3.4 Vuex和单纯的全局对象有什么区别？

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

3.5 为什么 Vuex 的 mutation 中不能做异步操作？

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

action 可以进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）

3.6 Vuex中 action 和 mutation 的区别

mutation中的操作是一系列的同步函数，用于修改state中的变量的的状态。它会接受 state 作为第一个参数，第二个参数是参数。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++      // 变更状态
    }
  }
})

当触发一个类型为 increment 的 mutation 时，需要调用此函数：

increment: function() {
	this.$store.commit('increment')
}

而Action类似于mutation，不同点在于：

Action 可以包含任意异步操作。
Action 提交的是 mutation，而不是直接变更状态。

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

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch

methods: {
	increment() {
		this.$store.dispatch('increment')
	}
}

3.7 vuex的持久化存储

Vuex是一个仓库，是vue的状态管理工具，存放公共数据，任何组件都可以使用vuex里的公共数据。Vuex提供了插件系统，允许我们使用 vuex-persistedstate插件，将Vuex的状态持久化到本地存储中，解决页面刷新或重新打开应用时状态丢失的问题；

方法一：通过手写函数和plugins，实现状态、数据持久化话；

新建pluginPersist.js文件，并导出存储函数

/**
 * 
 * @param {状态、数据持久化} store 
 */
export default function (store) {
    // console.log(store);
    // 存
    const KEY = 'VUEX:STATE';
    //这里表示 页面关闭 或 刷新 时存储
    window.addEventListener("beforeunload", () => {
        localStorage.setItem(KEY, JSON.stringify(store.state))
    })
    // 取
    try {
        const state = JSON.parse(localStorage.getItem(KEY));
        if (state) {
            store.replaceState(state);
        }
    } catch (err) {
        console.log(err);
    }
}

在store中，在plugins里引入挂载使用；plugins插件中的函数会在创建仓库时执行，插件的本质就是一个函数

import Vue from 'vue'
import Vuex from 'vuex'
import pluginPersist from "./pluginPersist"
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: {  
    // ...状态、数据 
  },  
  mutations: {  
    // ...修改状态、数据
  },  
  actions: {  
    // ...动作函数 
  },  
  getters: {  
    // ...计算属性
  },  
  modules: {
    // ...模块化
  },
    //这里使用
  plugins: [pluginPersist],
 
})
 
export default store;

方法二：通过手写db对象方法，实现数据、状态持久化；

新建localStorage.js文件，创建db对象，然后导出db方法

var localStorage = window.localStorage;
const db = {
    /** 
     * 更新状态 
     */
    save(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    /** 
     * 获取状态，如果有状态值，获取最新状态值；如果没有，获取默认值 
     */
    get(key, getSaveVal = null) {
        try {
            return JSON.parse(localStorage.getItem(key)) || getSaveVal;
        } catch (err) {
            console.log(err);
        }
    },
    /** 
     * 移除状态 
     */
    remove(key) {
        localStorage.removeItem(key);
    },
    /** 
     * 清空状态 
     */
    clear() {
        localStorage.clear();
    }
};
export default db;

在store中引入使用

import Vue from 'vue'
import Vuex from 'vuex'
import db from './localStorage';
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: {
    // 初始化时 默认获取
    state1: db.get('STATE1') || null,
  },
  mutations: {
    SET_STATE1: (state, value) => {
      state.state1++
      //调用SET_STATE1方法时 这里存储
      db.save('STATE1', state.state1);
    },
  },
  actions: {  
    // 动作函数 
  },  
  getters: {  
    // 计算属性
  },  
  modules: {
    // 模块化
  },
    // 插件
  plugins: [],
 
})
 
export default store

方法三：通过vue插件vuex-persistedstate 或 vuex-plugin-persistedstate实现数据、状态持久化；

安装依赖

npm install vuex-persistedstate --save  
//或者  
cnpm install vuex-persistedstate --save 
//或者
yarn add vuex-persistedstate
 
--save是安装在生产环境，开发和生产都需要用到
 
//查看插件的依赖项
npm ls vuex-persistedstate

vuex-persistedstate 和 vuex-plugin-persistedstate 是同一个插件的不同引用方式，它们都是用来持久化 Vuex 状态管理的插件，可以将 Vuex 中的状态保存到本地存储（如 localStorage 或 sessionStorage）中，以便在刷新页面或重新打开应用时恢复这些状态；persist目前已经弃用；

使用

import Vue from 'vue';  
import Vuex from 'vuex';  
import createPersistedState from 'vuex-persistedstate';  
  
Vue.use(Vuex);  
  
export default new Vuex.Store({  
  state: {  
    // ...你的状态定义  
  },  
  mutations: {  
    // ...你的变更函数定义  
  },  
  actions: {  
    // ...你的动作函数定义  
  },  
  getters: {  
    // ...你的计算属性定义  
  },  
  modules: {
    // ...模块化
  },
  plugins: [  
    createPersistedState({  
      storage: window.localStorage, // 或者使用 sessionStorage  
    }),  
  ],  
});