vuex

TypeScript 4.1 快要发布了，老爷子 Anders Hejlsberg[1] 加入了一项重大更新， 「字符串模板类型」 的支持。昨天看到这个更新的我特别兴奋，曾几何时，只要一遇到字符串拼接相关的类型，TypeScript 就束手无策了，比如： Vuex 中加了 namespace 以后， dispatch 一个 mutation type 会带上前缀 dispatch('cart/add') 。 lodash 的 get 方法，可以对一个对象进行 get(obj, 'a.b.c') 这样的读取。 现在 4.1 加入的这个新功能让这一切都拥有了可能。 基础语法 它的语法和 es 里的字符串模板很相似，所以上手成本也很低，先看几个例子： type EventName<T extends string> = `${T}Changed`; type T0 = EventName<'foo'>; // 'fooChanged' type T1 = EventName<'foo' | 'bar' | 'baz'>; // 'fooChanged' | 'barChanged' | 'bazChanged' type Concat<S1 extends string, S2 extends string> = `${S1}${S2}`; type T2 = Concat<'Hello

一、命名规则（英文-直译） 1、文件命名 文件夹/文件的命名统一用小写 保证项目有良好的可移植性，可跨平台 相关参考 2、文件引用路径 因为文件命名统一小写，引用也需要注意大小写问题 3、js变量 3.1 变量 命名方式：小驼峰 命名规范：前缀名词 命名建议：语义化 案例 // 友好 let maxCount = 10; let tableTitle = 'LoginTable'; // 不友好 let setCount = 10; let getTitle = 'LoginTable'; 3.2 常量 命名方式：全部大写 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词 命名建议：语义化 案例 const MAX_COUNT = 10; const URL = 'http://www.foreverz.com'; 3.3 函数 命名方式：小驼峰式命名法。 命名规范：前缀应当为动词。 命名建议：语义化 可以参考如下的动作 动词 含义 返回值 can 判断是否可执行某个动作(权限) 函数返回一个布尔值。true：可执行；false：不可执行 has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值 is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值 get 获取某个值 函数返回一个非布尔值 set

内容简介 # e3 D, S7 ]8 k; g+ d. T2 M& X Vue作为前端框架的佼佼者，已经受到广大开发者的青睐，因为Vue的简单易用，使得更多后端开发者，或者非开发人员都能上手一二。本课程通过对100多位开发者调查反馈，用心整理了课程大纲，确保每一节课都会在清晰讲解主要主干知识的同时，穿插Vue基础和ES6/7/8等知识，同时还会介绍一些本人在多个项目开发中总结的经验。 ) m$ {* p1 B. l- G7 p; E' F$ Z 本课程面对人群： ?* m; V' ` Q0 e2 R5 P. m1 } 对Vue最基础的知识有一定了解的开发者 对ES6+语法不了解但是想学习一些的开发者 有计算机使用基础的非开发人员 : r2 e# M- L6 B! |3 C- [ 想要开发Vue完整项目的人员 6 v; P/ j6 t6 Z 8 l7 W/ _4 n' e" C! ~. b 课程大纲： , v2 H# u% W& U' j1 z0 [! c 1. Vue技术栈开发实战-使用vue-cli3创建项目 使用Vue UI创建、管理项目 0 W8 u* A0 g% { 项目结构目录整理 初始文件添加 ( `, p2 G; u7 j7 f 基本配置详解 使用代理解决跨域 $ Y1 O$ n/ H" h W0 s 2. Vue技术栈开发实战-路由基础篇 ) ~% [ l: e;

1、active-class是哪个组件的属性？嵌套路由怎么定义？ 答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几种导航钩子？ 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件 4、scss是什么？安装使用的步骤是？有哪几大特性？ 答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader 4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？ 答：css的预编译。 使用步骤： 第一步：用npm 下三个loader（sass-loader、css-loader、node-sass） 第二步：在build目录找到webpack.base.config.js

Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count ++ } }, actions: { 　　 //接受一个与 store 实例具有相同方法和属性的 context 对象 increment ( context ) { context.commit ( ' increment ' ) } } //参数解构的简化写法 actions : { increment ( { commit } ) { commit ( 'increment' ) } } //action内部支持异步 actions: { incrementAsync ( { commit } ) { setTimeout (() => { commit ( ' increment ' ) }, 1000 ) } } }) Action 通过 store.dispatch 方法触发 store.dispatch( ' increment ' ) // 以载荷形式分发 store. dispatch ( ' incrementAsync

vue和react的区别 React严格上只针对MVC的view层，Vue则是MVVM模式 virtual（虚拟） DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制 组件写法不一样，React推荐的做法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in js'；Vue推荐的做法是webpack+vue-loader的单文件组件格式，即html，css，js写在同一个文件 数据绑定：vue实现了数据的双向绑定，react数据流动是单向的 state对象在react应用中不可变的，需要使用setState方法更新状态；在vue中，state对象不是必须的，数据由data属性在vue对象中管理 redux和vuex的区别 vuex是redux的基础上进行改变，对仓库的管理更加明确 使用mutation来替换redux中的reducer vuex有自动渲染的功能,所以不需要更新 vuex是专门为vue提供的状态管理工具,而redux是一个泛用的状态管理框架 vuex的实现原理 Vuex的状态存储是响应式的，当Vue组件从store中读取状态时