2024年最全Vue8-Vuex与Router(1)，2024年最新网络前端面试知识

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

import Vue from ‘vue’

import Vuex from ‘vuex’

// 使用核心插件 Vuex

Vue.use(Vuex)

// 创建 Store

const store = new Vuex.Store({

state: { // 组件间共享的数据

todos: [],

},

mutations: { // 唯一进行同步更新状态数据的方法

/**

• 添加新待办事项

*/

addTodoItem(state, payload) {

state.todos.push({

id: Math.random(),

title: payload.title,

completed: false,

})

},

},

})

export default store

向根实例中注入 store

import Vue from ‘vue’

// 引入 store

import store from ‘./store’ // import store from ‘./store/index.js’

new Vue({

store, // 注入 store，这样，在所有后代组件中，都可以使用 this.$store 获取 vuex 的 Store 使用

// render: h => h(App),

}).$mount(‘#app’)

在组件中使用 store

1. this.$store.state.todos // 类似于data拿里面数据

2. this.$store.commit(mutationType, payload) // 类似于触发事件

3. this.$store.getters.allChecked // 类似于计算属性

辅助函数

import { mapState, mapGetters, mapMutations, mapActions } from ‘vuex’ // 解构出来vuex仓库中保存的数据

Vue Router

=============================================================================

SPA

---

single page application（单页面应用程序），即在整个应用中，只有一个 html 页面，在用户与应用之间实现交互时能够动态更新页面内容。

前端路由

---

利用 hash 或 history 改变不会向后端发起新的 html 请求

模式

---

1. hash：利用 URL 中 #hash hash 值改变后，不会发送新的网络请求的特点，来实现的路由。使用如 #/home、#/login 类似的方式来表示所请求的前端 URL 资源

2. history：利用 h5 中 history 新增的 API pushState()、replaceState() 来实现。其路由的格式与服务端路由 URL 格式一致（比 hash 模式来说，没有多余的如 # 之类的符号），这种路由模式要用好，还需要服务端配置

3. Vue Router是 Vue.js 官方的路由管理器，是一个核心插件，与 Vue.js 高度集成

安装

---

• npm安装$ npm i vue-router@3.5.3

• yarn安装$ yarn add vue-router@3.5.3

定义 VueRouter 对象

---

import Vue from ‘vue’

import VueRouter from ‘vue-router’

import Home from ‘@/views/Home’

import Login from ‘@/views/Login’

// 使用路由插件

Vue.use(VueRouter)

// 创建 VueRouter 对象

const router = new VueRouter({

mode: ‘hash’, // 路由模式，可取 hash、history，默认为 hash

routes: [ // 静态路由的配置信息

{

path: ‘/home’, // 当 URL 中访问地址为 /home 时

component: Home, // 拿 Home 组件渲染

},

{

path: ‘/login’,

component: Login,

},

],

})

// 导出路由对象

export default router

在 Vue 组件中使用 VueRouter 时，可使用 VueRouter 提供的两个内置组件：

---

1. router-link：链接，相当于

2. router-view：视图，用于渲染访问路径所对应的组件

3. 注入 router 到 vue 根实例

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。