Vue3
2022-02-10 11:29:58 0 举报AI智能生成
Vue图谱
作者其他创作
大纲/内容
组件注册
Props
非 Prop 的 Attribute
自定义事件
组件内添加 <slot></slot> 作为承载分发内容的出口
组件
使用组件名称做为标签进行引用如 <todo-button></todo-button>
引用
基础插槽（单个/默认插槽的场景）
<slot> 元素有一个特殊的 attribute：name
一个不带 name 的 <slot> 出口会带有隐含的名字“default”
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
具名插槽（多个插槽的场景）
组件可以配置指定参数提供给引用方的插槽内容使用（v-slot:xxx或者 #xxx后的等于号）
<li v-for=\
绑定在 <slot> 元素上的 attribute 被称为插槽 prop
<todo-list> <template v-slot:default=\"slotProps\">
默认使用方法：插槽使用完整的基于 <template> 的语法
<todo-list v-slot=\"slotProps\">
只有默认插槽时，组件的标签才可以被当作插槽的模板来使用
<todo-list v-slot=\"{ item }\">
补充：通过解构可以更方便获取插槽 prop
使用带值的 v-slot 来定义我们提供的插槽 prop 的名字
作用域插槽 / 插槽 prop
插槽不能访问组件作用域内容，需要通过「插槽 prop」
渲染作用域
<slot></slot> 标签中添加备用内容，在引用时插槽内容为空时默认显示备用内容
备用内容
其它
组件内容开放由引用方进行设置
插槽
Provide / Inject
// ... components: { AsyncComponent: defineAsyncComponent(() => import('./components/AsyncComponent.vue') ) }
异步组件
<suspense> <template #default> <component :is=\"type\" :gameName=\"search\" :type=\"type\" /> </template> <template #fallback> <my-inner-loading /> </template></suspense>
<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。
动态组件 & 异步组件
需要直接访问 JavaScript 中的子组件，可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。
模板引用
`setup` 选项在组件创建之前执行，一旦 `props` 被解析，就将作为`组合式 API 的入口`。
注册生命勾子
watch 响应式监听
computed
`setup` 选项是一个接收 `props` 和 `context` 的函数，将 `setup` 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
Setup
组合式API
Vue
在 store 声明类似组件的 `data() { return {} }`
声明
在组件中的 `computed()` 暴露为一个计算属性，并使用 `this.$store.state.N` 的方式进行访问
通过 `...mapState()` 为生成计算属性，参数对象的成员可以是一个函数 `function(state: any)`
组件使用
State
getters 的成员为 `function(state: any)` 的函数
getter 也可以接受其它 getter 作为第二个参数如： font color=\"#b71c1c\
getter 可以返回一个函数，用来给 getter 传参数如： `getTodoById: (state) => (id) => {...}
在 store 声明类似组件的 `computed: {}` ，声明对 state 进行计算属性
在组件中的 `computed()` 暴露为一个计算属性，并使用 `this.$store.getters.N` 的方式进行访问
通过 `...mapGetters()` 将 getter 映射为计算属性，参数为 getters 列表
Getter
mutations 的成员为 `function(state: any)` 的函数(必须是同步函数)
mutation 也可以接受 payload 作为第二个参数如： font color=\"#b71c1c\
在 store 声明类似组件的 `methods:{}`，并通过 `store.commit('xxx')` 来调用对应的执行事件
通过 `...mapMutations()` 将 `mutation` 在 `methods: {}` 中暴露为一个方法，参数为 mutations 列表。
Mutation
actions 的成员为 `function(context: any)` 的函数，可以简化为 `function({commit})`
action 也可以接受 payload 作为第二个参数如： font color=\"#b71c1c\
通过 `...mapActions` 将 `action` 在 `methods: {}` 中暴露为一个方法，参数为 actions 列表。
Action
对于模块内部的 mutation 和 getter，接收的第一个参数是*模块的局部状态对象*。
对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 `context.rootState`
对于模块内部的 getter，根节点状态会作为第三个参数暴露出来
可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名(启用了命名空间的 getter 和 action 会收到局部化的 `getter`，`dispatch` 和 `commit`)
使用全局 state 和 getter，`rootState` 和 `rootGetters` 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action
若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可
访问全局内容
当使用 `mapState`、`mapGetters`、`mapActions` 和 `mapMutations` 这些函数来绑定带命名空间的模块时，可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。
也可以通过使用 `createNamespacedHelpers` 创建基于某个命名空间辅助函数。
带命名空间的绑定函数
命名空间
Module
核心
组件式API
插件
Vuex
同一动态路由规则下的组件复用问题
匹配语法
入门动态路由匹配路由的匹配语法
视图内组件嵌套以及同一视图内多组件
嵌套路由命名视图
路由命名以及手动跳转的方式
编程式导航命名路由
Vue Router
一个全局安装的 npm 包，提供了终端里的 vue 命令
@vue/cli
构建于 webpack 和 webpack-dev-server 之上
一个 npm 包，局部安装在每个 @vue/cli 创建的项目中
@vue/cli-service
组成
名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头
命名
插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令
作用
在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件
运行
webpack4.X 实战（一）：全面认识webpack、核心概念
Webpack
Vue-cli
一个开发服务器
一套构建指令
使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项
Rollup
揭秘 Vite 的原理
Vite
开发/打包
dependencies
开发/打包工具需要使用某些扩展
devDependencies
package.json
Node.js
生态
ECMAScript5.1
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现
ECMAScript 和 JavaScript 的关系
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等
ES6 与 ECMAScript 2015 的关系
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。
Babel 转码器
ECMAScript 6简介
for循环的计数器，就很合适使用let命令。
let声明的变量只在它所在的代码块有效。
let 和 const 命令
变量的解构赋值
字符串的扩展
字符串的新增方法
正则的扩展
数值的扩展
函数参数的默认值
rest 参数（形式为...变量名）
箭头函数
函数的扩展
它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列
扩展运算符（spread）是三个点（...）
数组的扩展
属性的简洁表示法
属性名表达式
对象的扩展运算符
对象的扩展
对象的新增方法
**
指数运算符
?.
链判断运算符
||
??
Null 判断运算符
运算符的扩展
Promise 对象
Generator 函数的语法
Generator 函数的异步应用
解决同一个代码块内多个异步操作的执行顺序管理
javascript中async/await常用场景
async 函数
异步相关
ES6 入门教程
ECMAScript6
Javascript
TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。
概念
let isDone: boolean = false;
布尔值
let decLiteral: number = 6;
数字
let name: string = \"bob\";name = \"smith\";
模版字符串
字符串
在元素类型后面接上 []
数组泛型
数组
表示一个已知元素数量和类型的数组，各元素的类型不必相同
元组 Tuple
枚举
为那些在编程阶段还不清楚类型的变量指定一个类型
Any
void类型像是与any类型相反，它表示没有任何类型
Void
Null 和 Undefined
Never
Object
基础类型
针对var在作用域存在的问题提供的「块作用域」的替换方案
let
与 let相同的作用域规则，但是不能对它们重新赋值
const
所有变量除了你计划去修改的都应该使用const
解构
变量声明
需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。
在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
在可选属性名字定义的后面加一个?符号
可选属性
在属性名前用 readonly来指定只读属性
只读属性
用于描述一个函数的外形...
函数类型
可索引的类型
类类型
其它外形检测
继承接口
混合类型
接口继承类
其它特性
接口
继承
公共，私有与受保护的修饰符
readonly修饰符
存取器
静态属性
抽象类
类
可选参数和默认参数
剩余参数
this在函数中使用的问题
重载
函数
类型变量，它是一种特殊的变量，只用于表示类型而不是值
function identity<T>(arg: T): T { return arg;}
泛型函数
interface GenericIdentityFn<T> { (arg: T): T;}function identity<T>(arg: T): T { return arg;}let myIdentity: GenericIdentityFn<number> = identity;
泛型接口
泛型类
泛型类型
泛型约束
泛型
值默认从0开始进行递增
数字枚举
enum Direction { Up = \"UP\
字符串枚举
Person & Serializable & Loggable同时是 Person 和 Serializable 和 Loggable
交叉类型（Intersection Types）
type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else { return n(); }}
类型别名
高级类型
Typescript
语言
VsCode从零开始配置一个属于自己的Vue开发环境
vscode
用于api还未正式提供时，模拟请求并随时生成相关数据
Vue3项目配置Mock模拟接口数据
mock.js
用于在git提交commit时，配合检测工具检测代码或者message的规范
vue 项目集成 husky+commitlint+stylelint
husky+commitlint+stylelint
Prettier vs. Linters
Prettier vs. Linters
工作流
vueuse
lodash
工具集
axios
库
工具
Vue3
0 条评论
回复 删除
下一页
