首页  思维导图  详情

Vue3

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





仅支持查看

AI智能生成

Vue图谱

vue

javascript

typescript

作者其他创作

大纲/内容

生态

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

作用域插槽 / 插槽 prop

组件

组件可以配置指定参数提供给引用方的插槽内容使用（v-slot:xxx或者 #xxx后的等于号）

绑定在 <slot> 元素上的 attribute 被称为插槽 prop

引用

使用带值的 v-slot 来定义我们提供的插槽 prop 的名字

默认使用方法：插槽使用完整的基于 <template> 的语法

<todo-list>
<template v-slot:default="slotProps">

只有默认插槽时，组件的标签才可以被当作插槽的模板来使用

<todo-list v-slot="slotProps">

补充：通过解构可以更方便获取插槽 prop

<todo-list v-slot="{ item }">

其它

渲染作用域

插槽不能访问组件作用域内容，需要通过「插槽 prop」

备用内容

<slot></slot> 标签中添加备用内容，在引用时插槽内容为空时默认显示备用内容

Provide / Inject

动态组件 & 异步组件

异步组件

// ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }

<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。

模板引用

需要直接访问 JavaScript 中的子组件，可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。

组合式API

Setup

`setup` 选项在组件创建之前执行，一旦 `props` 被解析，就将作为`组合式 API 的入口`。

`setup` 选项是一个接收 `props` 和 `context` 的函数，将 `setup` 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

`ref`, `toRefs` 的用法

注册生命勾子

watch 响应式监听

computed

模板引用

Vuex

核心

State

声明

在 store 声明类似组件的 `data() { return {} }`

组件使用

在组件中的 `computed()` 暴露为一个计算属性，并使用 `this.$store.state.N` 的方式进行访问

通过 `...mapState()` 为生成计算属性，参数对象的成员可以是一个函数 `function(state: any)`

Getter

声明

在 store 声明类似组件的 `computed: {}` ，声明对 state 进行计算属性

getters 的成员为 `function(state: any)` 的函数

getter 也可以接受其它 getter 作为第二个参数如： `function(state: any, getters: any)`

getter 可以返回一个函数，用来给 getter 传参数如： `getTodoById: (state) => (id) => {...}

组件使用

在组件中的 `computed()` 暴露为一个计算属性，并使用 `this.$store.getters.N` 的方式进行访问

通过 `...mapGetters()` 将 getter 映射为计算属性，参数为 getters 列表

Mutation

声明

在 store 声明类似组件的 `methods:{}`，并通过 `store.commit('xxx')` 来调用对应的执行事件

mutations 的成员为 `function(state: any)` 的函数(必须是同步函数)

mutation 也可以接受 payload 作为第二个参数如： `function(state: any, payload: any)`

提交事件的方式可以为 `store.commit({type: 'xxx', payload})`

组件使用

通过 `...mapMutations()` 将 `mutation` 在 `methods: {}` 中暴露为一个方法，参数为 mutations 列表。

如： 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

Action

声明

类似于 mutation,不同于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。并通过 `store.dispatch('xxx')` 来触发相关的事件

actions 的成员为 `function(context: any)` 的函数，可以简化为 `function({commit})`

action 也可以接受 payload 作为第二个参数如： `function({commit}, payload: any)`

组件使用

通过 `...mapActions` 将 `action` 在 `methods: {}` 中暴露为一个方法，参数为 actions 列表。

如： 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

Module

对于模块内部的 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` 创建基于某个命名空间辅助函数。

组件式API

插件

Vue Router

入门
动态路由匹配
路由的匹配语法

同一动态路由规则下的组件复用问题

匹配语法

嵌套路由
命名视图

视图内组件嵌套以及同一视图内多组件

编程式导航
命名路由

路由命名以及手动跳转的方式

开发/打包

Vue-cli

组成

@vue/cli

一个全局安装的 npm 包，提供了终端里的 vue 命令

@vue/cli-service

一个 npm 包，局部安装在每个 @vue/cli 创建的项目中

构建于 webpack 和 webpack-dev-server 之上

插件

命名

名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头

作用

插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令

运行

在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件

Webpack

Vite

组成

一个开发服务器

一套构建指令

插件

使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项

Rollup

Node.js

package.json

dependencies

devDependencies

开发/打包工具需要使用某些扩展

工作流，如：eslint, csslint, commitlint...

语言

Javascript

ECMAScript5.1

ECMAScript6

ECMAScript 6简介

ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现

ES6 与 ECMAScript 2015 的关系

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等

Babel 转码器

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

let 和 const 命令

let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。

变量的解构赋值

字符串的扩展

字符串的新增方法

正则的扩展

数值的扩展

函数的扩展

函数参数的默认值

rest 参数（形式为...变量名）

箭头函数

数组的扩展

扩展运算符（spread）是三个点（...）

它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

对象的扩展

属性的简洁表示法

允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这时，属性名就是变量名, 属性值就是变量值。

属性名表达式

对象的扩展运算符

对象的新增方法

运算符的扩展

指数运算符

链判断运算符

Null 判断运算符

异步相关

Promise 对象

Generator 函数的语法

Generator 函数的异步应用

async 函数

解决同一个代码块内多个异步操作的执行顺序管理

Typescript

概念

TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。

基础类型

布尔值

let isDone: boolean = false;

数字

let decLiteral: number = 6;

字符串

let name: string = "bob";
name = "smith";

模版字符串

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

数组

在元素类型后面接上 []

let list: number[] = [1, 2, 3];

数组泛型

let list: Array<number> = [1, 2, 3];

元组 Tuple

表示一个已知元素数量和类型的数组，各元素的类型不必相同

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

枚举

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Any

为那些在编程阶段还不清楚类型的变量指定一个类型

Void

void类型像是与any类型相反，它表示没有任何类型

Null 和 Undefined

Never

Object

变量声明

声明

let

针对var在作用域存在的问题提供的「块作用域」的替换方案

const

与 let相同的作用域规则，但是不能对它们重新赋值

所有变量除了你计划去修改的都应该使用const

解构

接口

在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。

interface LabelledValue {
label: string;
}

function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可选属性

在可选属性名字定义的后面加一个?符号

只读属性

在属性名前用 readonly来指定只读属性

其它外形检测

函数类型

用于描述一个函数的外形...

interface SearchFunc {
(source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
let result = src.search(sub);
return result > -1;
}

可索引的类型

类类型

其它特性

继承接口

混合类型

接口继承类

类

继承

公共，私有与受保护的修饰符

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;

泛型类

class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型约束

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}

枚举

数字枚举

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

值默认从0开始进行递增

字符串枚举

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

高级类型

交叉类型（Intersection Types）

Person & Serializable & Loggable同时是 Person 和 Serializable 和 Loggable

类型别名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    }
    else {
        return n();
    }
}

工具

vscode

库

工作流

mock.js

用于api还未正式提供时，模拟请求并随时生成相关数据

husky+commitlint+stylelint

用于在git提交commit时，配合检测工具检测代码或者message的规范

Prettier vs. Linters

工具集

vueuse

lodash