Java

Java常用数据结构与操作

数组

声明

1
2
3
String[] aArray = new String[5];
String[] bArray = {"a","b","c", "d", "e"};
String[] cArray = new String[]{"a","b","c","d","e"};

根据数组创建ArrayList

1
2
3
4
String[] stringArray = { "a", "b", "c", "d", "e" };
List<String> arrayList = new ArrayList<String>(Arrays.asList(stringArray));
System.out.println(arrayList);      // [a, b, c, d, e]

数组内是否包含某个值

1
2
3
String[] stringArray = { "a", "b", "c", "d", "e" };
boolean b = Arrays.asList(stringArray).contains("a");
System.out.println(b);

注意：

1
2
3
4
int[] int_arr = {1,2,3,4};
Integer[] integer_arr = {1,2,3,4};
System.out.println(Arrays.asList(int_arr).contains(1));     // false
System.out.println(Arrays.asList(integer_arr).contains(1)); // true

声明

声明

声明

声明

ArrayList

ArrayList 类是一个可以动态修改的数组，与普通数组的区别就是它是没有固定大小的限制，我们可以添加或删除元素。
ArrayList 继承了 AbstractList ，并实现了 List 接口。

常用操作

  • 添加元素：list.add(index, element)，（index不传入的话默认添加到List的最后）
  • 删除元素：list.remove(index)，删除指定位置的元素，或者使用list.removeAll()删除所有元素
  • 修改元素：list.set(index, element)，替换指定位置的元素
  • 获取元素：list.get(index)
  • 获取size：list.size()
  • 遍历：for(Type element : lists)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
List<Integer> list01 = new ArrayList<Integer>();
list01.add(1);
list01.add(2);
list01.add(3);
list01.add(4);
list01.add(5);
System.out.println(list01);         // [1, 2, 3, 4, 5]
System.out.println(list01.get(2));  // 3

list01.add(2, 6);             // 向ArrayList的索引值为2的元素前插入数值6
System.out.println(list01);   // [1, 2, 6, 3, 4, 5]

list01.remove(3);             // 删除ArrayList的索引值为3的元素
System.out.println(list01);   // [1, 2, 6, 4, 5]

list01.set(0, 10);            // 修改第一个元素为10
System.out.println(list01);   // [10, 2, 6, 4, 5]
System.out.println(list01.size());  // 5

其他常用操作

方法 描述
addAll() 添加集合中的所有元素到 arraylist 中
clear() 删除 arraylist 中的所有元素
clone() 复制一份 arraylist
contains() 判断元素是否在 arraylist
indexOf() 返回 arraylist 中元素的索引值
isEmpty() 判断 arraylist 是否为空
subList() 截取部分 arraylist 的元素
sort() 对 arraylist 元素进行排序
toArray() 将 arraylist 转换为数组
toString() 将 arraylist 转换为字符串
ensureCapacity() 设置指定容量大小的 arraylist
lastIndexOf() 返回指定元素在 arraylist 中最后一次出现的位置
retainAll() 保留 arraylist 中在指定集合中也存在的那些元素
containsAll() 查看 arraylist 是否包含指定集合中的所有元素
trimToSize() 将 arraylist 中的容量调整为数组中的元素个数
removeRange() 删除 arraylist 中指定索引之间存在的元素
replaceAll() 将给定的操作内容替换掉数组中每一个元素
removeIf() 删除所有满足特定条件的 arraylist 元素
forEach() 遍历 arraylist 中每一个元素并执行特定操作

Map

创建

1
Map<Integer, Integer> numMap = new HashMap<>();

添加元素

1
numMap.put(key, value);

判断是否包含key

1
2
3
if (numMap.containsKey(key)){
  // do something.
}
Python

Python常用数据结构与操作

元组（Tuple)

zip()函数

zip() 函数用于将可迭代的对象作为参数，将对象中对应的元素打包成一个个元组，然后返回由这些元组组成的对象，这样做的好处是节约了不少的内存。

我们可以使用 list() 转换来输出列表。

如果各个迭代器的元素个数不一致，则返回列表长度与最短的对象相同，利用 * 号操作符，可以将元组解压为列表。

语法：

1
zip([iterable, ...])

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
>>>a = [1,2,3]
>>> b = [4,5,6]
>>> c = [4,5,6,7,8]
>>> zipped = zip(a,b)     # 返回一个对象
>>> zipped
<zip object at 0x103abc288>
>>> list(zipped)  # list() 转换为列表
[(1, 4), (2, 5), (3, 6)]
>>> list(zip(a,c))              # 元素个数与最短的列表一致
[(1, 4), (2, 5), (3, 6)]

>>> a1, a2 = zip(*zip(a,b))          # 与 zip 相反，zip(*) 可理解为解压，返回二维矩阵式
>>> list(a1)
[1, 2, 3]
>>> list(a2)
[4, 5, 6]
>>>

另一个示例：

1
2
3
test_arr = ['a','b','c','d','e']
sorted_test_arr = sorted(zip(test_arr, range(len(test_arr))))
print(sorted_test_arr)  # [('a', 0), ('b', 1), ('c', 2), ('d', 3), ('e', 4)

列表（List）

列表（list）是python常用的四种collection数据类型之一，使用方括号括起来即可，方括号中的元素类型不需要相同

1
2
3
4
sample_list = [] # 空列表
list1 = ['张三','李四','王五']
list2 = [1, 2, 3, 4, 5]
list3 = [1, 2, 3, "a", "b", "c"]

列表的创建

列表取值、切片操作

1
2
3
4
5
6
7
8
9
10
list1 = [1,2,3,4,5]
print(list1[2])     # 3  （第三个元素）
print(list1[-2])    # 4  （倒数第二个元素）
print(list1[2:4])   # [3, 4]  （第三个元素到第四个元素）
print(list1[2:])    # [3, 4, 5]   （从第三个元素开始到最后）
print(list1[-2:])   # [3, 4, 5]   （从倒数第二个元素开始到最后）
print(list1[-4:3])  # [2, 3]  （从倒数第四个元素到正数第三个元素）
print(list1[::-1])  # [5, 4, 3, 2, 1]   反转
print(list1[::2])   # [1, 3, 5] （每隔两个截取一个元素）
print(list1[1:4:2]) # [2, 4]  （每隔两个截取一个元素，从第二个元素开始到第五个（不包括））

添加元素

使用list.append('new element')在列表末尾追加元素：

1
2
3
sample_list =[1,2,2,4,4,4]
sample_list.append(5)
print(sample_list)  # [1, 2, 2, 4, 4, 4, 5]

也可以使用list.insert(index, obj)来在列表索引值为index的元素前插入obj元素

1
2
3
sample_list =[1,2,2,4,4,4,5]
sample_list.insert(2, 3)
print(sample_list)    # [1, 2, 3, 2, 4, 4, 4, 5]

删除元素

1
2
3
list1 = [1,2,3,4,5]
del list1[2]
print(list1)  # [1,2,4,5]

可以使用list.pop([index=-1])方法来移除列表中的一个元素（默认最后一个元素）， 并且返回该元素的值：

1
2
3
4
5
6
7
sample_list = [1, 2, 3, 4, 5]
print(sample_list.pop())    # 5
print(sample_list)          # [1, 2, 3, 4]

sample_list = [1, 2, 3, 4, 5]
print(sample_list.pop(1))    # 2
print(sample_list)           # [1, 3, 4, 5]

可以使用list.remove(obj)方法来移除元素:

1
2
3
4
5
6
7
sample_list = ['BMW', 'Tesla', 'Benz', 'Audi']
sample_list.remove('Tesla')
print(sample_list) # ['BMW', 'Benz', 'Audi']

sample_list1 = [1, 2, 3, 4, 5]
sample_list1.remove(3)
print(sample_list1) # [1, 2, 4, 5]

修改元素

1
2
list1 = [1,2,3,4,5]
del list1[2]

合并列表

  1. 直接使用+来合并列表
1
2
3
list1 = [1,2,3,4,5]
list2 = [6,7,8]
print(list1 + list2)    # [1, 2, 3, 4, 5, 6, 7, 8]
  1. 可以使用extend方法
    在列表末尾一次性追加另一个序列中的多个值（用新列表扩展原来的列表）
1
2
3
4
list1 = [1,2,3,4,5]
list2 = [6,7,8]
list1.extend(list2)
print(list1)    # [1, 2, 3, 4, 5, 6, 7, 8]
  1. 使用切片
1
2
3
4
list1 = [1,2,3,4,5]
list2 = [6,7,8]
list1[len(list1): len(list1)] = list2
print(list1)  # [1, 2, 3, 4, 5, 6, 7, 8]

list1[x:x] = list2，其中x表示list2插入list1的位置

比如：

1
2
3
4
list1 = [1,2,3,4,5]
list2 = [6,7,8]
list1[2:2] = list2
print(list1)  # [1, 2, 6, 7, 8, 3, 4, 5]

注意： 如果使用append来合并两个列表会变成下面的结果：

1
2
3
4
list1 = [1,2,3,4,5]
list2 = [6,7,8]
list1.append(list2)
print(list1)    # [1, 2, 3, 4, 5, [6, 7, 8]]

判断数组中是否包含某元素

1
2
3
list1 = [1,2,3,4,5]
print( 2 in list1)  # True
print( 0 in list1)  # False

列表复制

1
2
list1 = [1,2,3,4,5]
print( list1 * 3)  # [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

list.count(obj)

同于统计某个元素在列表中出现的次数

1
2
sample_list =[1,2,2,4,4,4,5]
print(sample_list.count(4)) # 3

反转列表中的元素

可以使用list.reverse()来反转列表中的元素

1
2
3
sample_list = [1, 2, 3, 4, 5]
sample_list.reverse()
print(sample_list)  # [5, 4, 3, 2, 1]

列表排序

使用list.sort()对原列表进行排序

1
2
3
sample_list = [1, 3, 5, 2, 4, 6]
sample_list.sort()
print(sample_list)  # [1, 2, 3, 4, 5, 6]

获取最大、最小值

1
2
3
4
list01 = [1,2,3,4,5]
print(max(list01))  # 5
print(min(list01))  # 1
print(sum(list01))  # 15

字典（Dict）

定义

1
book = {'key': 'valule', ... }

访问

1
book['三国演义']

Conda

mac 安装了conda后，前面会有一个（base），是因为安装了Conda后，
每次启动终端都会自动启动Conda的base环境，Conda的环境可以使用conda env list查看

如果不想每次启动时都显示这个base，可以使用下面的命令关掉自动启动：

1
conda config --set auto_activate_base false

一次性启动或者关闭环境的命令：

1
2
conda deactivate
conda activate
Linux

awk 教程

简介

sed是一个流编辑器，将文件或标准输入的内容作为编辑的对象，对其按照需求进行修改。

sed的总体结构
sed [OPTION]… {script-only-if-no-other-script} [input-file]…

刨个坑，以后填

Linux

Sed 教程

简介

sed是一个流编辑器，将文件或标准输入的内容作为编辑的对象，对其按照需求进行修改。

sed的总体结构
sed [OPTION]… {script-only-if-no-other-script} [input-file]…

刨个坑，以后填

前端

GitBook初体验

简介

GitBook是基于git和markdown的的文档和知识库软件，可以帮助你和你的组织、团队建立共享的知识库
下面是GitBook官网(https://www.gitbook.com/)的描述：

安装

1
npm install gitbook -g

建议使用gitbook-cli，这样就可以在你电脑的任何地方使用gitbook的命令

1
npm install -g gitbook-cli

这里需要注意的是如果要全局安装gitbook-cli，需要先卸载之前已经全局安装过的gitbook

1
2
npm uninstall -g gitbook
npm install -g gitbook-cli

使用

GitBook的基本用法非常简单。

  1. 使用gitbook init 初始化书籍目录
  2. 使用gitbook serve 编辑书籍

然而。。。
卡在第一步了

1
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Promise

原因是gitbook跟不上最新版本的NodeJS，使用10版本勉强能用。但又不想为了这么个东西降低版本，因此果断弃坑。

这里有一篇总结了各个版本之间的各种问题：https://xmuli.tech/posts/d7327716/

替代方案是GitBook有个在线版的，https://app.gitbook.com

注册之后可以使用

https://yiny.gitbook.io/

前端

Yarn 教程

简介

Yarn 是一个软件包管理器，还可以作为项目管理工具。
无论你是小型项目还是大型单体仓库（monorepos），无论是业余爱好者还是企业用户，Yarn 都能满足你的需求。

安装

Windows : 官网下载后直接安装即可

下载地址： https://yarn.bootcss.com/latest.msi

Mac

可以通过Homebrew包管理工具安装：

1
brew install node

也可以通过MacPorts安装：

1
sudo port install yarn

可以通过yarn --version来测试Yarn是否安装成功。

更新

1
2
yarn set version latest
yarn set version from sources

使用

初始化一个项目

1
yarn init

添加依赖包

1
2
3
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

将依赖添加到不同类别中

1
2
yarn add [package] --dev
yarn add [package] --peer

升级依赖包

1
2
3
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

yarn upgrade可以简写为yarn up

移除依赖包

1
yarn remove [package]

安装项目的全部依赖

1
yarn

或者

1
yarn install

执行yarn install命令后，会生成一个yarn.lock文件，
在使用 Yarn 安装、升级、删除依赖项目时，会自动更新到 yarn.lock 文件中。

在实际项目中，yarn.lock 文件也很有用处，我们可以将 yarn.lock 提交到版本库中，其他成员就可以通过 yarn install 获取所有依赖包，这个可以保证大家安装的依赖是完全一致的，避免产生bug。

显示命令列表

1
yarn help

Yarn1和Yarn2的区别

Yarn Classic (1.x) Yarn (2.x) 备注
yarn create yarn dlx create-<name> yarn create 仍然可以使用,但是官方更推荐使用 yarn dlx
yarn global yarn dlx Dedicated section
yarn info yarn npm info
yarn login yarn npm login
yarn logout yarn npm logout
yarn outdated yarn upgrade-interactive
yarn publish yarn npm publish
yarn tag yarn npm tag
yarn upgrade yarn up 升级所有工作区的包
yarn install --production yarn workspaces focus --all --production 需要 workspace-tools 插件
前端

NodeJS 教程

安装

Windows : 官网下载后直接安装即可

下载地址： https://nodejs.org/en/download/

Mac

1
brew install node

NodeJS Hello World

新建一个server.js的文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// NodeJS使用require指令来载入http模块
var http = require('http');

http.createServer(function (request, response) {

    // 发送 HTTP 头部
    // HTTP 返回码为: 200 : OK
    // 内容类型设置为 'text/plain'
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

然后终端输入：node server.js

npm

npm是NodeJS的包管理工具，类似Python的pip

查看npm版本：

1
2
$ npm -v
7.23.0

升级：

1
npm install npm -g

例如，使用npm安装常用的 Node.js web框架模块 express:

1
2
npm install express      # 本地安装
npm install express -g   # 全局安装

本地安装

  1. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
  2. 可以通过 require() 来引入本地安装的包。

全局安装

  1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
  2. 可以直接在命令行里使用。

查看安装信息：

1
npm list -g

使用package.json

package.json 位于模块的目录下，用于定义包的属性。接下来让我们来看下 express 包的 package.json 文件，位于 node_modules/express/package.json 内容：

1
2
3
4
5
{
  "dependencies": {
    "express": "^4.17.1"
  }
}

package.json属性说明

  • name - 包名。
  • version - 包的版本号。
  • description - 包的描述。
  • homepage - 包的官网 url 。
  • author - 包的作者姓名。
  • contributors - 包的其他贡献者姓名。
  • dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
  • repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
  • main - main 字段指定了程序的主入口文件，require(‘moduleName’) 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
  • keywords - 关键字

卸载模块

1
npm uninstall express

之后可以使用npm ls命令查看包是否已经卸载完成

更新模块

1
npm update express

搜索模块

1
npm search express

创建模块

使用npm init 命令来发布模块

1
npm init

输入提示的各项内容后生成了package.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
➜  node_sample cat package.json
{
  "dependencies": {
    "express": "^4.17.1"
  },
  "name": "geekhall",
  "version": "1.0.0",
  "description": "geekhall sample code",
  "main": "app.js",
  "devDependencies": {},
  "scripts": {
    "test": "gh"
  },
  "keywords": [
    "geekhall"
  ],
  "author": "yinyang",
  "license": "ISC"
}

使用npm adduser来在npm资源库中注册用户

1
2
3
4
5
6
➜  node_sample npm adduser
npm notice Log in on https://registry.npm.taobao.org/
Username: yinyang
Password:
Email: (this IS public) yinyang007@gmail.com

然后我们就可以使用npm publish来发布模块了。

npm 常用命令

  • NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。
  • 使用npm help <command>可查看某条命令的详细帮助，例如npm help install。
  • 在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。
  • 使用npm update <package>可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
  • 使用npm update <package> -g可以把全局安装的对应命令行程序更新至最新版。
  • 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
  • 使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。

使用淘宝npm镜像

使用以下命令来使用淘宝的cnpm

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

REPL(交互式解释器)

Node自带了交互式解释器，输入node即可，可以执行读取、执行、循环等功能

前端

Hexo 笔记

Hexo笔记

安装

1
npm install hexo-cli -g

前提：需要安装好node.js和git

1
2
3
4
5
6
7
8
9
10
11
# hexo init 需要在一个空文件夹执行
hexo init

# or
hexo init directory

# cd directory
npm install

# 启动
hexo server

然后访问: http://localhost:4000 就可以看到页面了

常用命令

清空网站缓存

1
2
3
hexo clean
# or
hexo cl

新增文章

1
hexo new "New Post"

启动服务

1
2
3
hexo server
# or
hexo s

生成静态文件

1
2
3
hexo generate
# or
hexo g

发布至远程

1
2
3
hexo deploy
# or
hexo d

需要修改_config.yml，添加远程发布配置参数

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@gitee.com:sjdt/sjdt.git
  branch: master
  message:

npm i –save hexo-wordcount

常用组合命令

1
2
3
4
# 清理、生成、本地发布
hexo cl && hexo g && hexo s
# 清理、生成、远程发布
hexo cl && hexo g && hexo d

更换主题

可以从（https://hexo.io/themes/）下载主题，下载到themes目录下，然后修改_config.yml文件中的theme为对应的主题名称（文件夹名）即可：

1
theme: hexo-theme-matery

SEO 优化

使用hexo-abbrlink实现URL地址再编码：

1
npm install hexo-abbrlink --save

配置：

1
2
3
4
5
6
7
url: http://sjdt.gitee.io
#permalink: :year/:month/:day/:title/   # 默认的URL层次太深，不利于SEO
#permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16（default）and crc32
  rep: hex    # 禁止：dec(default) and hex

Gitee Pages

Gitee Pages 是一个免费的静态网页托管服务，您可以使用 Gitee Pages 托管博客、项目官网等静态网页。如果您使用过 Github Pages 那么您会很快上手使用 Gitee 的 Pages服务。目前 Gitee Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

注意需要在下面的位置申请开通 Gitee Pages服务，需要实名认证并上传证件图片并等待一个工作日审核

开通后需要建立一个与用户名相同的仓库，比如我的用户名为sjdt，
那么我的gitee page 仓库地址就是：[git@gitee.com:sjdt/sjdt.git]

自动化

  1. 安装playwrite库
1
python -m playwright install

playwrite文档：https://playwright.dev/python/docs/intro/

将你的Gitee用户名和密码添加到环境变量的gitee_username和gitee_username环境变量中，
然后就可以使用下面的脚本自动提交并更新GiteePages了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#!/usr/bin/env python3
# -*- coding:UTF-8 -*-
import os
from playwright.sync_api import sync_playwright

USERNAME = os.getenv("gitee_username")
PASSWORD = os.getenv("gitee_password")

GITEE_PAGES_URL = 'https://gitee.com/sjdt/sjdt/pages'

def main():
    print("========================== deploy job : started ==========================")
    os.system("cd /Users/yiny/Sites/moonwhite.net;hexo cl && hexo g && hexo d")
    print("========================== deploy job : publish ==========================")
    with sync_playwright() as p:
        for browser_type in [p.chromium]:
            browser = browser_type.launch(headless=False)
            page = browser.new_page()
            #page.screenshot(path=f'example-{browser_type.name}.png')
            page.goto('https://gitee.com/login')
            page.click('input[name="user[login]"]');
            page.fill('input[name="user[login]"]', USERNAME);
            page.click('input[name="user[login]"]');
            page.fill('input[name="user[password]"]', PASSWORD);
            page.click("input[value='登 录']")
            page.wait_for_timeout(5000)
            page.goto(GITEE_PAGES_URL)
            page.on("dialog", lambda dialog: dialog.accept())
            page.click(".update_deploy")
            page.wait_for_selector('span:text("已开启 Gitee Pages 服务")', timeout=60 * 1000, state='visible')
            browser.close()
    print("========================== deploy job : finished ==========================")
if __name__ == '__main__':
    main()

Hexo的使用

前端

Vue 笔记 6 - Vue UI

Vue 笔记 6 - Vue UI

移动端常用UI组件库

PC端常用UI组件库

ElementUI

安装：

1
npm i element-ui

使用：

  • 完整引入
1
2
3
4
5
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

注意：完整引入会导致chunk-vendors.js体积庞大，一般按需引入即可

  • 按需引入：
    安装babel-plugin-component
1
npm install babel-plugin-component

修改babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", {"modules": false}]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

修改main.js，按需引入组件：

1
2
3
4
5
// 引入ElementUI的部分组件
import {Button, Row} from 'element-ui'

Vue.component(Button.name, Button);
Vue.component(Row.name, Row)
前端

Vue 笔记 7 - Vue3

Vue 笔记 7 - Vue3

Vue3的变化

  • 性能的提升
    • 打包大小减少 41%
    • 初次渲染快55%，更新渲染快133%
    • 内存减少54%
  • 源码的升级
    • 使用Proxy替代defineProperty实现响应式
    • 重写虚拟DOM的实现和Tree-shaking
    • …
  • 拥抱TypeScript
  • 新的特性
    • Composition API（组合API）（setup配置、ref与reactive、watch与watchEffect、provide与inject）
    • 新的内置组件（Fragment、Teleport、Suspense）
    • 新的生命周期钩子
    • data选项应始终被声明为一个函数
    • 移除keyCode支持作为v-on的修饰符

创建Vue3工程

  1. 使用vue-cli创建
1
2
vue create vue3cli

  1. 使用vite创建
    Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

Vite 网站：

官网：[vitejs.dev]https://vitejs.dev/

中文网：vitejs.cn

优势：

  • 开发环境中，不需要打包操作，可快速冷启动
  • 轻量快速的热重载（HMR)
  • 真正的按需编译，不再等待整个应用编译完成。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 创建工程
npm init vite-app <project-name>

# 进入工程目录
cd <project-name>

# 安装依赖
npm install
# or
yarn

# 运行
npm run dev
# or
yarn dev

安装Vue3开发者工具

Vue3的开发者工具同Vue2不同，需要单独重新安装。

常用Composition API

setup

  • Vue3.0中一个新的配置项，值为一个函数。
  • setup是所有Composition API（组合API）表演的舞台
  • 组件中所用到的：数据、方法、等等，均要配置在setup中
  • setup函数的两种返回值：
    • 若返回一个对象，则对象中的属性、方法、在模板中均可以直接使用（重点关注！）
    • 若返回一个渲染函数：则可以自定义渲染内容（了解）
  • 注意点：
    1. 尽量不要与Vue2.x配置混用
      • Vue2.x 配置（data、methods、computed…)中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methods、computed…)
      • 如果有重名，setup优先
    2. setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性。
      后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合。

setup实例

Vue2的data、methods、computed在Vue3中还是可以使用的，但是不推荐

Vue2的方法中读取Vue3中的数据和方法没有问题

但是Vue3的setup中读取不到Vue2的数据和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
export default {
  name: 'App',
  data () {
    return {
      sex: '男'
    }
  },
  methods: {
    sayWelcome(){
      alert('欢迎')
    },
    test1(){
      console.log(this.sex)           // 男
      console.log(this.sayWelcome)    // f sayWelcome(){...}
      console.log(this.name)          // 张三
      console.log(this.age)           // 18
      console.log(this.sayHello)      // f sayHello(){...}
    }
  },
  // 此处只是暂时测试一下，暂时未考虑响应式的问题。
  setup(){
    // data
    let name = '张三'
    let age = 18

    // 方法
    function sayHello(){
      alert(`我叫${name}，我${age}岁了，你好！`)
    }

    function test2(){
      console.log(this.name)            // 张三
      console.log(this.age)             // 18
      console.log(this.sayHello)        // f sayHello(){...}
      console.log(this.sex)             // undefined
      console.log(this.sayWelcome)      // undefined
    }

    // 返回
    return {
      name,
      age,
      sayHello,
      test2
    }
  }

}

渲染函数

1
2
3
4
5
6
7
8
9
// 引入渲染函数
import { h } from 'vue'

export default {
    // 渲染函数
    return ()=>{
      return h('h1', 'Geekhall')
    }
}

简写方式

1
2
3
4
5
6
7
// 引入渲染函数
import { h } from '@vue/runtime-core'

export default {
    // 渲染函数简写方式
    return ()=>h('h1', 'Geekhall')
}

ref函数

Vue3中需要通过ref函数来实现响应式。ref函数返回的是一个RefImpl对象。

作用：定义一个响应式的数据

语法：const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
  • JS中操作数据：xxx.value
  • 模板中读取数据：不需要.value，直接<div>{{xxx}}</div>

备注：

  • 接受的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型的数据：内部“求助”了Vue3.0中的一个新函数 —- reactive函数，封装ES6的Proxy来实现的。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <h1>我是APP组件</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>工作薪水：{{job.salary}}</h3>
  <button @click="changeInfo">changeInfo</button>
</template>

<script>
import {ref} from 'vue'

export default {
  name: 'App',
  setup(){
    // data
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: '全栈工程师',
      salary: '30K'
    })

    function changeInfo(){
      name.value= '李四'
      age.value = 48
      // 对象类型的Ref使用了ES6中的Proxy，可以不必
      job.value.type ='python工程师'
      job.value.salary = '35K'
      console.log(name.value, age.value)
    }

    // 返回
    return {
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>

reactive函数

作用： 定义一个对象类型的响应式数据，（基本类型不要用它，要用ref函数）

语法：const 代理对象 = reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy对象）

reactive定义的响应式数据是“深层次的”。

内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

实例：

template

1
2
3
4
5
6
7
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<h3>工作种类：{{ person.job.type }}</h3>
<h3>工作薪水：{{ person.job.salary }}</h3>
<h3>测试数据C：{{ person.job.a.b.c }}</h3>
<h3>爱好：{{ person.hobby }}</h3>
<button @click="changePerson">changePerson</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { reactive } from "vue";

let person = reactive({
  name: "张三",
  age: 18,
  job: {
    type: "全栈工程师",
    salary: "30K",
    a: {
      b: {
        c: 666,
      },
    },
  },
  hobby: ["抽烟", "喝酒", "烫头"]
});
function changePerson(){
  person.name = '王老五'
  person.age = 30
  person.job.type = 'python工程师'
  person.job.salary = '38K'
  person.job.a.b.c = 888
  person.hobby[2] = "打游戏"
}

return {
  person,
  changePerson
};

Vue3.0中的响应式原理

Vue2.x中的响应式

  • 实现原理

    • 对象类型： 通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
    • 数组类型： 通过重写更新数组的一系列方法来实现拦截（对数组的方法进行了包裹）。
    1
    2
    3
    4
    Object.defineProperty(data, 'count', {
      get(){},
      set(){}
    })

  • 存在问题

    • 新增属性，删除属性，界面不会更新。
    • 直接通过下表修改数组，界面不会自动更新。

Vue3.0的响应式

  • 实现原理

    • 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。

    • 通过Reflect（反射）：对被代理对象的属性进行操作。

    • MDN文档中描述的Proxy与Reflect：

      1. Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
      2. Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      new Proxy(person, {
        // 有人读取p的某个属性时调用
        get(target, propName){
            console.log(`有人读取了p身上的${propName}属性`)
            // return target[propName]
            return Reflect.get(target, propName)
        },
        // 有人修改p的某个属性、或者给p追加某个属性时调用
        set(target, propName, value){
            console.log(`有人修改了p身上的${propName}属性，value=`,value)
            // target[propName] = value
            return Reflect.set(target, propName, value)
        },
        // 有人删除p的某个属性时调用
        deleteProperty(target, propName){
            console.log(`有人删除了p身上的${propName}属性`)
            // return delete target[propName]
            return Reflect.deleteProperty(target, propName)
        }
      })

  • window.Reflect

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    obj
    {a: 1, b: 2}

    Reflect.get(obj, 'a')
    1

    Reflect.get(obj, 'b')
    2

    Reflect.set(obj, 'a', 20)
    true

    obj
    {a: 20, b: 2}

    Reflect.deleteProperty(obj,'b')
    true

    obj
    {a: 20}

reactive对比ref

  • 从定义数据角度对比
    • ref用来定义：基本数据类型
    • reactive用来定义： 对象（或数组）类型数据
    • 备注：ref也可以用来定义对象（或数组）类型数据，它内部会通过reactive转为代理对象
  • 从原理角度对比
    • ref通过Object.deineProperty() 的get与set来实现响应式数据劫持
    • reactivve通过使用Proxy来实现响应式数据劫持，并通过Reflect操作源对象内部的数据
  • 从实用角度对比
    • ref定义的数据：操作数据需要.value，读取数据是模板中直接读取不需要.value
    • reactive定义的数据：操作数据与读取数据均不需要.value

setup的两个注意点

  • setup执行的时机
    • 在BeforeCreate之前执行一次，this是undefined
  • setup的参数
    • props: 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    • context: 上下文对象
      1. attrs： 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。
      2. slots：收到的插槽内容，相当于this.$slots。
      3. emit：分发自定义事件的函数。相当于this.$emit。

计算属性

computed函数

  • 与Vue2中computed配置功能一致

  • 写法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <template>
      <h1>一个人的信息</h1>
      <h2>姓：<input type="text" v-model="person.firstname"> </h2>
      <h2>名：<input type="text" v-model="person.lastname"> </h2>
      <h2>姓名： {{person.fullname}}</h2>
      <br>
      全名：<input type="text" v-model="person.fullname">
    </template>

    <script>
    import { reactive , computed} from "vue";

    export default {
      name: "Demo",
      setup() {
        // 数据
        let person = reactive({
          firstname: '张',
          lastname: '三'
        })

        // 计算属性，简写（没有考虑计算属性被修改的情况）
        // person.fullname = computed(()=>{
        //   return person.firstname + '_' + person.lastname
        // })
        // 计算属性， 完整写法(考虑读和写)
        person.fullname = computed({
          get(){
            return person.firstname + '_' + person.lastname
          },
          set(value){
            const nameAttr = value.split('_')
            person.firstname = nameAttr[0]
            person.lastname = nameAttr[1]
          }
        })

        return {
          person
        }
      },
    };
    </script>

watch监视

Vue2.x的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
watch: {
  // 简写方式
  sum(newValue, oldValue){
    console.log('sum的值变化了', newValue,oldValue)
  }
  // 完整写法
  sum: {
    immediate:true,
    deep:true,
    handler(newValue, oldValue){
      console.log('sum的值变化了', newValue,oldValue)
    }
  }
},

Vue3.x的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script>
import {ref, watch, reactive} from "vue";

export default {
  name: "Demo",
  // watch: {
  //   // 简写方式
  //   sum(newValue, oldValue){
  //     console.log('sum的值变化了', newValue,oldValue)
  //   }
  //   // 完整写法
  //   sum: {
  //     immediate:true,
  //     deep:true,
  //     handler(newValue, oldValue){
  //       console.log('sum的值变化了', newValue,oldValue)
  //     }
  //   }
  // },
  setup() {
    // 数据
    let sum = ref(0)
    let msg = ref('Hello Geekhall')
    let person = reactive({
      name: '张三',
      age: 20,
      job:{
        j1:{
          salary:20
        }
      }
    })

    // 情况一：监视ref所定义的响应式数据
    watch(sum, (newValue, oldValue)=>{
      console.log('sum的值变化了', newValue,oldValue)
    },{immediate:true, deep:true})
    // 情况二： 及那是ref所定义的多个响应式数据
    // 可以写两个watch
    watch(sum, (newValue, oldValue)=>{
      console.log('sum的值变化了', newValue,oldValue)
    })
    watch(msg, (newValue, oldValue)=>{
      console.log('msg的值变化了', newValue,oldValue)
    })

    // 也可以把监视对象放到一个数组中
    watch([sum,msg], (newValue, oldValue)=>{
      console.log('msg的值变化了', newValue,oldValue)
    })

    // 情况三： 监视reactive
    // 注意：此处无法获得正确的oldValue
    // 注意：强制开启了深度监视（deep:false)配置无效
    watch(person, (newValue, oldValue)=>{
      console.log('person变化了', newValue, oldValue)
    })

    // 情况四：监视reactive所定义的一个响应式数据中的某一个属性
    watch(()=>person.age, (newValue, oldValue)=>{
      console.log('person的age变化了', newValue, oldValue)
    })

    // 情况五：监视reactive所定义的一个响应式数据中的某一些属性
    watch([()=>person.age, ()=>person.name], (newValue, oldValue)=>{
      console.log('person的age或name变化了', newValue, oldValue)
    })

    // 特殊情况（监视深层次对象中时需要加上deep:true，否则监视不到）
    watch(()=>person.job, (newValue, oldValue)=>{
      console.log('person的salary变化了', newValue, oldValue)
    },{deep:true}) // 此处由于监视的是reactive所定义的对象中的某个对象属性，所以deep配置有效


    // 返回一个对象
    return {
      sum,
      msg,
      person
    }
  },
};
</script>

两个小坑：

  • 监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监视（deep配置失效）
  • 监视reactive定义的响应式数据中的某个属性时：deep配置有效。

watchEffect函数

  • watch的套路时：既要指明监视的属性，也要指明监视的回调。

  • watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

  • watchEffect有点像computed：

    • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
    • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
    1
    2
    3
    4
    5
    6
    // watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
    watchEffect()=>{
      const x1 = sum.value
      const x2 = person.age
      console.log('watchEffect配置的回调执行了')
    }

生命周期

与Vue2.x相比：

  • beforeDestroy和destoryed，换成了beforeUnmount 和unmounted
  • 少了el 选项的判定
  • 提供了Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
    • beforeCreate ====> setup()
    • created =========> setup()
    • beforeMount =====> onBeforeMount
    • mounted =========> onMounted
    • beforeUpdate ====> onBeforeUpdate
    • updated =========> onUpdated
    • beforeUnmount ===> onBeforeUnmount
    • unmounted =======> onUnmounted

自定义hook函数

  • 什么是hook？ –本质是一个函数，把setup函数中使用的Composition API进行了封装。
  • 类似于Vue2.x中的mixin
  • 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。

toRefs

  • 作用：创建一个ref对象，其value值指向另一个对象中的某个属性
  • 语法：const name = toRef(person, 'name')
  • 应用：要将响应式对象中的某个属性单独提供给外部使用时。
  • 扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)
1
2
3
4
5
6
7
8
9
<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">点我加薪</button>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
import {ref, reactive, watchEffect, toRef, toRefs} from "vue";

export default {
  name: "Demo",
  setup() {
    // 数据
    let person = reactive({
      name: '张三',
      age: 20,
      job:{
        j1:{
          salary:30
        }
      }
    })

    const name1 = person.name
    console.log('%%%' , name1)
    const name2 = toRef(person, 'name')
    console.log('####', name2)


    // 返回一个对象
    return {
      // 注意这里如果使用ref为复制一个新的引用，修改后并不会改变person中的原值。
      // name: toRef(person, 'name'),
      // age: toRef(person, 'age'),
      // salary: toRef(person.job.j1, 'salary')

      // 使用toRefs与toRef功能一致，但可以批量创建多个ref对象，
      // 但只会展开对象的一层，比如salary就还是必须要写成job.j1.salary
      ...toRefs(person)
    }
  },
};
</script>

其他CompositionAPI

shallowReactive 与 shallowRef

  • shallowReactive：只处理对象最外层属性的响应式（浅响应式）
  • shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。
  • 什么时候使用：
    • 如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ====> shallowReactive
    • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换 =====> shallowRef

readonly 与 shallowReadonly

  • readonly: 让一个响应式数据变为只读的（深只读）
  • shallowReadonly： 让一个响应式数据变为只读的（浅只读）
  • 应用场景：不希望数据被修改时。

toRaw 与markRaw

  • toRaw
    • 作用： 将一个有reactive生成的响应式对象转为普通对象
    • 使用场景： 用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
  • markRaw
    • 作用：标记一个对象，使其永远不会再成为响应式对象
    • 使用场景：
      1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
      2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef

  • 作用： 创建一个自定义的ref， 并对其依赖项跟踪和更新触发进行显示控制

  • 实现防抖效果:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <template>
      <input type="text" v-model="keyWord">
      <h3>{{keyWord}}</h3>
    </template>

    <script>
    import { customRef} from 'vue';

    export default {
      name: "App",
      setup(){
        function myRef(value, delay){
          let timer
          console.log('---- myRef ---- ', value)
          return customRef((track, trigger)=>{
            return {
              get(){
                console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
                track()     // 通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的。
                return value
              },
              set(newValue){
                console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
                clearTimeout(timer)
                timer = setTimeout(()=>{
                  value = newValue
                  trigger()   // 通知Vue去重新解析模板
                }, delay)
                // value = newValue
                // trigger()   // 通知Vue去重新解析模板

              },
            }
          })
        }
        // let keyWord = ref('hello') // 使用Vue提供的ref
        let keyWord = myRef('hello', 500)  // 使用自定义的ref
        return{
          keyWord
        }
      }
    }
    </script>

provide 与 inject

  • 作用： 实现祖孙间通信

  • 套路： 父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据

  • 具体写法：

    • 父组件中：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    setup(){
      let car = reactive({
        name: 'Benz',
        price: '40W'
      })

      provide('car', car) // 给自己的后代组件传递数据
      return {...toRefs(car)}
    }
    • 孙组件中：
    1
    2
    3
    4
    setup(){
        let car = inject('car') // 接收数据
        return {car}
      }

响应式数据的判断

  • isRef： 检查一个值是否为一个ref对象
  • isReactive： 检查一个对象是否是由reactive创建的响应式代理
  • isReadonly： 检查一个对象是否是由readonly创建的只读代理
  • isProxy： 检查一个对象是否是由reactive或者readonly方法创建的代理

Composition API的优势

  1. Options API存在的问题
    使用传统Options API中，新增或者修改一个需求，需要分别在data,methods,computed里修改。
  2. Composition API的优势
    我们可以更加优雅的组织我们的代码，函数，让相关功能的代码更加有序的组织在一起。

新的组件

Fragment

  • 在Vue2中，组件必须有一个根标签
  • 在Vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中。
  • 好处，减少标签层级，减小内存占用

Teleport

Teleport是一种能够将我们的组件html结构移动到指定位置的技术

Suspense

  • 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
  • 使用步骤

    • 异步引入组件

      1
      2
      import {defineAsyncComponent} from 'vue'
      const Child = defineAsyncComponent(()=>import('./components/Child')) // 异步引入

    • 使用Suspense包裹组件，并配置好default与fallback

      1
      2
      3
      4
      5
      6
      7
      8
      <Suspense>
        <template v-slot:default>
          <Child/>
        </template>
        <template v-slot:fallback>
          <h3>加载中。。。稍等</h3>
        </template>
      </Suspense>

其他

  • Vue2.x有许多全局API和配置

    • 例如： 注册全局组件、注册全局指令等
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 注册全局组件
    Vue.component('MyButton', {
      data: ()=> ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    )

    // 注册全局指令
    Vue.directive('focus', {
      Inserted: el => el.focus()
    })

  • Vue3.0中对这些API做出了调整

    • 将全局的API，即Vue.xxx调整到应用实例app上
    2.x全局API（Vue） 3.x实例API（app）
    Vue.config.xxxx app.config.xxxx
    Vue.config.productionTip 移除
    Vue.Component app.component
    Vue.directive app.directive
    Vue.mixin app.mixin
    Vue.use app.use
    Vue.prototype app.config.globalProperties

  • 其他改变

    • data选项应始终被声明为一个函数
    • 过度类名的更改：

    Vue2.x写法

    1
    2
    3
    4
    5
    6
    7
    8
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave,
    .v-enter-to{
      opacity: 1;
    }

    Vue3.0的写法

    1
    2
    3
    4
    5
    6
    7
    8
    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave-from,
    .v-enter-to{
      opacity: 1;
    }
    • 移除了KeyCode作为v-on的修饰符，同时也不再支持config.keyCodes
    • 移除v-on.native修饰符

    父组件中绑定事件

    1
    2
    3
    4
    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />

    子组件中声明自定义事件

    1
    2
    3
    4
    5
    <script>
      export default {
        emits: ['close']
      }
    </script>
    • 移除过滤器（filter）
      过滤器虽然看起来很方便，但它需要一个自定义语法，打破大括号内表达式“只是JavaScript”的假设，
      这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。