首页  思维导图  详情

Vue3

2022-02-10 11:29:58   0  举报





仅支持查看

AI智能生成

为你推荐

查看更多



Vue d'ensemble du systeme

vue设计模式应用场景

vue源码流程图

Vue图谱

vue

javascript

typescript

作者其他创作

大纲/内容

组件注册

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> 组件有两个插槽。它们都只接收一个直接子节点。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