Vuex的几个核心概念state、getters、mutations、actions、modules

17 阅读5分钟

JavaScript

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。

  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)

  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?

  • JS常见的dom操作api

  • 解释一下事件冒泡和事件捕获

  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?

  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?

  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?

  • call,apply,bind

  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链

  • 创建对象的多种方式

  • 实现继承的多种方式和优缺点

  • new 一个对象具体做了什么

  • 手写Ajax,XMLHttpRequest

  • 变量提升

  • 举例说明一个匿名函数的典型用例

  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?

  • attribute和property的区别

  • document load和document DOMContentLoaded两个事件的区别

  • JS代码调试

开源分享:docs.qq.com/doc/DSmRnRG…

mutations: {

increment(state){

this.state.counter++

},

decrement(state){

this.state.counter--

}

},

getters:{

powerCounter(state){

return state.counter * state.counter

},

ageMore20(state){

return state.students.filter(s => s.age > 20)

},

ageMore20length(state,getters){

return getters.ageMore20.length

},

moreAgeStu(state){

// return function(age){

// return state.students.filter(s => s.age > 9)

// }

// 简便写法(箭头函数)

return age => {

return state.students.filter(s => s.age>age)

}

}

}

})

// 3、导出store对象

export default store

在这里插入图片描述

src/components/HelloBuex.vue

src/APP.vue

3、vuex-mutations的携带参数

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

在这里插入图片描述

3.1、携带一个参数


在这里插入图片描述

在这里插入图片描述

3.2、如果传递多个数据时,将数据放到一个对象中


在这里插入图片描述

在这里插入图片描述

点击前:

在这里插入图片描述

点击后:

在这里插入图片描述

3.3、vuex-mutations的其他提交风格


在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打印效果:

在这里插入图片描述

3.4、数据的响应式原理


如下图所示,在index.js页面定义了info对象

在这里插入图片描述在APP.vue页面使用这些属性

在这里插入图片描述

在HelloVuex.vue页面使用这些属性

在这里插入图片描述

修改index.js中的info属性值

在这里插入图片描述打开浏览器页面,我们发现,App.vue和HelloVuex.vue页面的数据都跟着发生了改变。这里使用了vuex-数据的响应式原理。

在这里插入图片描述

3.5、Mutations的响应规则


修改属性

在这里插入图片描述

4、vuex-actions的使用详解

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

5、vuex-modules的使用详解

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

刷面试题

刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。

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

  • 前端字节跳动真题解析

  • 【269页】前端大厂面试题宝典

最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。