算法面试题汇总，Vue组件通信原理剖析（二，2024一线互联网校招面试真题解析

import Vuex from ‘vuex’

Vue.use(Vuex)

export default = new Vuex.Store({

state: {

counter: 0

},

getters: {

doubleCounter(state) {

return state.counter * 2

}

},

mutations: {

add(state) {

state.counter ++

}

},

actions: {

add({commit}) {

setTimeout(() => {

commit(‘add’)

}, 1000);

}

}

})

• 第二步，挂载app

// main.js

import vue from ‘vue’

import App form ‘./App.vue’

import store from ‘./store’

new Vue({

store,

render: h => h(App)

}).$mount(‘#app’)

• 第三步：状态调用

// test.vue

double counter: {{ $store.getters.doubleCounter }}

从上面的例子，我们可以看出，vuex需要具备这么几个特点：

1. 使用Vuex只需执行 Vue.use(Vuex)，保证vuex是以插件的形式被vue加载。

2. state的数据具有响应式，A组件中修改了，B组件中可用修改后的值。

3. getters可以对state的数据做动态派生。

4. mutations中的方法是同步修改。

5. actions中的方法是异步修改。

那我们今天就去源码里探索以下，vuex是怎么实现的，又是怎么解决以上的问题的！

问题1：vuex的插件加载机制

所谓插件机制，就是需要实现Install方法，并且通过mixin形式混入到Vue的生命周期中，我们先来看看Vuex的定义

• 需要对外暴露一个对象，这样就可以满足new Vuex.Store()

// src/index.js

import { Store, install } from ‘./store’

import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from ‘./helpers’

export default {

Store,

install,

version: ‘VERSION’,

mapState,

mapMutations,

mapGetters,

mapActions,

createNamespacedHelpers

}

• 其次是定义store，并且实现vue的Install方法

// src/store.js

let Vue // bind on install

export class Store {

…

}

// 实现的Install方法

export function install (_Vue) {

if (Vue && _Vue === Vue) {

if (process.env.NODE_ENV !== ‘production’) {

console.error(

‘[vuex] already installed. Vue.use(Vuex) should be called only once.’

)

}

return

}

Vue = _Vue

applyMixin(Vue)

}

问题2：state的数据响应式

看懂了Vuex的入口定义，下面我们就针对store的定义来一探究竟，先看看state的实现

// src/store.js

export class Store {

constructor(options = {}) {

…

// strict mode

this.strict = strict

const state = this._modules.root.state

// initialize the store vm, which is responsible for the reactivity

// (also registers _wrappedGetters as computed properties)

// 看上面的注释可以得知，resetStoreVM就是初始化store中负责响应式的vm的方法，而且还注册所有的gettersz作为vm的计算属性

resetStoreVM(this, state)

}

}

我们来看看resetStoreVM的具体实现

// src/store.js

function resetStoreVM (store, state, hot) {

const oldVm = store._vm

// bind store public getters

store.getters = {}

// reset local getters cache

store._makeLocalGettersCache = Object.create(null)

const wrappedGetters = store._wrappedGetters

const computed = {}

// 这里是实现getters的派生

forEachValue(wrappedGetters, (fn, key) => {

// use computed to leverage its lazy-caching mechanism

// direct inline function use will lead to closure preserving oldVm.

// using partial to return function with only arguments preserved in closure environment.

computed[key] = partial(fn, store)

Object.defineProperty(store.getters, key, {

get: () => store._vm[key],

enumerable: true // for local getters

})

})

// use a Vue instance to store the state tree

// suppress warnings just in case the user has added

// some funky global mixins

// 这是是通过new一个Vue实例，并将state作为实例的datas属性，那他自然而然就具有了响应式

const silent = Vue.config.silent

Vue.config.silent = true

store._vm = new Vue({

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

对象篇

模块化编程-自研模块加载器

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

y82MTY4MzU2LWUyNWEzOGRhNTU1NTBmOGY?x-oss-process=image/format,png)

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-KMWuzKHS-1712562990267)]