Blog

Sed 教程

简介

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

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

刨个坑，以后填

Blog

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/

Blog

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 插件
Blog

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即可，可以执行读取、执行、循环等功能

Blog

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的使用

Blog

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)
Blog

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”的假设，
      这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。
Blog

Vue 笔记 5 - vue路由

安装：

1
npm i vue-router

使用router-link标签实现路由的切换

1
2
<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
<router-link to="/home" class="list-group-item" active-class="active">Home</router-link>

使用router-view指定组件的呈现位置

1
<router-view></router-view>

几个注意点：

  1. 路由组件通常存放在pages文件夹，以班组间通常存放在component文件夹
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
  4. 整个应用只有一个router，可以通过组件的$router属性获取到。

嵌套（多级）路由

  1. 配置路由规则，使用children配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [{
                path: 'news',
                component: News,
            },
            {
                path: 'message',
                component: Message,
            }
            ]
        },
    ]
})
  1. 跳转（要写完整路径）
1
<router-link to="/home/news">News</router-link>

路由传递参数

  1. 配置路由，声明接收params参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
         path: '/home',
         component: Home,
         children: [{
             path: 'news',
             component: News,
         },
         {
             path: 'message',
             component: Message,
             children: [{
                 name:'xq',
                 // path: 'detail',  // query路由
                 path: 'detail/:id/:title',  // params路由
                 component: Detail,
             }]
         }
         ]
    }

  2. 传递参数
    跳转路由并携带query参数，to的字符串写法

    1
    <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

    跳转路由并携带params参数

    1
    <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

    跳转路由并携带query参数，to的对象写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <router-link :to="{
        // path:'/home/message/detail',
        // 使用命名路由
        name:'xq',
        query: {
            id:m.id,
            title:m.title
        }
    }">
        {{m.title}}
    </router-link>

    跳转路由并携带params参数，to的对象写法，这里需要注意的是params路由不能使用path，必须使用name方式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <router-link :to="{
        // path:'/home/message/detail',     // error！
        // 使用命名路由
        name:'xq',
        params: {
            id:m.id,
            title:m.title
        }
    }">
        {{m.title}}
    </router-link>

路由的props配置

作用： 让路由组件更方便的收到参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    name: 'xq',
    path: 'detail/:id',
    component: Detail,

    // props的第一种写法，值为对象，该对象中所有的key-value都会以props的形式传递给Detail组件。
    // props: {a:1, b:'Hello'},

    // props的第二种写法，值为bool值，若为真，就会把该路由组件收到的所用params参数，以props的形式传递给Detail组件。
    // props: true

    // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件。
    // props($route){
    //     return {id:$route.params.id, title: $route.params.title}
    // }

    // 这里可以使用解构赋值的连续写法简化
    props({params:{id, title}}){
        return {id, title}
    }
}

编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更灵活
具体编码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
methods: {
  pushShow(m) {
    this.$router.push({
      name: "xq",
      params: {
        id: m.id,
        title: m.title,
      },
    });
  },
  replaceShow(m) {
    this.$router.replace({
      name: "xq",
      params: {
        id: m.id,
        title: m.title,
      },
    });
  },
},

缓存路由组件

  • 作用：让不展示的路由组件保持挂载，不被销毁

  • 具体编码：

    • 缓存一个路由组件
    1
    2
    3
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>
    • 缓存多个路由组件
    1
    2
    3
    <keep-alive :include="['News','Message']">
      <router-view></router-view>
    </keep-alive>

路由守卫

作用： 对路由进行权限控制
分类： 全局守卫、独享守卫、组件内守卫
全局守卫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 全局前置路由守卫 -- 初始化及每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    // console.log(to, from, next)
    if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'geekhall'){
            // 放行
            next()
        } else {
            alert('请先登录')
        }
    }
})

// 全局后置路由守卫 -- 初始化及每次路由切换之后被调用
// 使用的不多，可以用于切换页面title
router.afterEach((to, from) => {
    console.log('后置路由守卫：', to , from)
    document.title = to.meta.title || "geekhall"
})

独享路由守卫:beforeEnter

路由器的两种工作模式

  1. 对于一个url来说，什么事hash值？ —-#及其后面的内容就是hash值。
  2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
  3. hash模式：
    • 地址中永远带着#，不美观
    • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
    • 兼容性较好
  4. history模式：
    • 地址干净美观
    • 兼容性和hash相比略差
    • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
Blog

Vue 笔记 4 - vuex

Vuex是专门在Vue中实现集中式状态（数据）管理的一个Vue插件， 对vue应用中多个组件的共享状态进行集中式的管理（读/写）
也是一种组件间通信的方式，且适用于任意组件间通信。

Github地址：https://github.com/vuejs/vuex

什么时候使用

  1. 多个组件依赖于统一状态
  2. 来自不同组件的行为需要变更同一状态

vuex 原理

  • Actions ： 服务员
  • Mutations ： 后厨
  • State ： 菜肴

安装

1
2
npm i vuex
npm i vuex --save-bundle

搭建环境

  1. 创建文件： src/store/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'
// 应用Vues
Vue.use(Vuex)

// 准备Actions，用于响应组件中的动作
const actions = {}

// 准备mutations，用于操作数据（state）
const mutations = {}

// 准备state，用于存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
  1. 在main.js中创建vm时传入store配置项
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
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 全局Mixin
// import {hunhe, mixin} from './mixin'

// 导入插件
// import plugins from './plugins'
// 引入vueResource
import vueResource from 'vue-resource'
// import Vuex from 'vuex'

// import store from './store/index'  // index可以省略
import store from './store'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 应用插件
// Vue.use(plugins)
Vue.use(vueResource)

// 创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus = this   // 全局事件总线
    }
})

getters

当state中的数据需要经过加工后再使用时，可以使用getters加工，
在store.js中追加getters配置：

1
2
3
4
5
6
7
8
9
10
const getters = {
    bigSum(state){
        return state.sum*10
    }
}
// 创建并暴露store
export default new Vuex.Store({
    // ...
    getters
})

四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性：

    1
    2
    3
    4
    5
    6
    7
    computed: {
         // 第一种方式：借助mapState生成计算属性，从state中读取数据。（对象写法）
         ...mapState({he:'sum', xuexiao:'school', xueke:'subject'}),

         // 第二种方式：要求生成的计算属性名和state中的属性名一致。（数组写法）
         ...mapState(['sum', 'school', 'subject']),
    }

  2. mapGetters方法： 用于帮助我们映射getters中的数据为计算属性

    1
    2
    3
    4
    // 第一种方式：借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    ...mapGetters({bigSum:'bigSum'}),
    // 第二种方式：要求生成的计算属性名和getters中的属性名一致。（数组写法）
    ...mapGetters(['bigSum'])

  3. mapActions方法： 用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    1
    2
    3
    4
    5
    6
    methods:{
         // 靠mapActions生成： incrementOdd、incrementWait（对象形式）
         ...mapActions({incrementOdd:'jiaOdd', incrementWait:'jiaWait'})
         // 靠mapActions生成： incrementOdd、incrementWait（数组形式）
         ...mapActions(['jiaOdd', 'jiaWait'])
    }

  4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
    ...mapActions({incrementOdd: 'addOddAction', incrementWait: 'addWaitAction'})

    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
    ...mapActions(['addOddAction', 'addWaitAction'])
    // 注意数组写法要求调用处需要修改为数组中生成的函数名：
    <button @click="addOddAction(n)">当前求和为奇数再加</button>
    <button @click="addWaitAction(n)">等一等再加</button>

备注：mapActions与mapMutations使用时，若需要传递参数，需要在模板中绑定事件时传递好参数，否则参数是事件对象。

模块化和命名空间

目的： 让代码更好维护，让多种数据分类更加明确

开启命名空间

修改：moduleA.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const moduleAOptions = {
    namespaced:true,  // 开启命名空间
    actions: {
        // ...
    },
    mutations: {
        // ...
    },
    state: {
        // ...
    },
    getters: {
        // ...
    }
}
export default moduleAOptions

moduleB.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
    namespaced:true,  // 开启命名空间
    actions: {
        // ...
    },
    mutations: {
        // ...
    },
    state: {
        // ...
    },
    getters: {
        // ...
    }
}

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vues
Vue.use(Vuex)

import moduleAOptions from './moduleA'
import moduleBOptions from './moduleB'

// 创建并暴露store
export default new Vuex.Store({
    modules: {
        moduleA: moduleAOptions,
        moduleB: moduleBOptions
    }
})

开启命名空间后，组件中读取state数据

1
2
3
4
5
6
// 方式1： 自己直接读取
this.$store.state.moduleA.list

// 方式2： 借助mapState读取
...mapState('moduleA',['state1','state2','state3'])

开启命名空间后，组件中读取getters数据

1
2
3
4
5
// 方式1： 自己直接读取
this.$store.getters['moduleA/personName']

// 方式2： 借助mapGetters读取
...mapGetters('moduleA',['getSum'])

开启命名空间后，组件中调用dispatch

1
2
3
4
5
// 方式1： 自己直接dispatch
this.$store.dispatch('moduleA/addPerson', person)

// 方式2： 借助mapActions取
...mapActions('countModule', {incrementOdd: "addOddAction",incrementWait: "addWaitAction"})

开启命名空间后，组件中调用commit

1
2
3
4
5
// 方式1： 自己直接commit
this.$store.commit('moduleA/addPersonMutation', person)

// 方式2： 借助mapMutations取
...mapMutations('moduleA',{ increment: "addMutation", decrement: "subMutation" }),
Blog

Vue 笔记 3 - Ajax

安装axios

1
npm i axios

代理

跨域：协议名、主机名、端口号三者不同时浏览器认为跨域了。

使用nodejs搭建两个简易后台服务端

server1.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// node src/server1.js
// http://localhost:5001/student

let express = require('express');
let app = express();
let fs = require('fs');
const log = console.log;

app.get('/student', function (request, response){
    response.writeHead(200, {'Content-Type': 'application/json'});
    log("有人访问了server1");
    response.end(JSON.stringify({
        name: 'server',
        age: 2020
    }));
});

let server = app.listen(5001, function(){
    let host = server.address().address
    let port = server.address().port
    log("有人访问了server1");
})

server2.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// node src/server2.js
// http://localhost:5002/car

let express = require('express');
let app = express();
let fs = require('fs');
const log = console.log;

app.get('/car', function (request, response){
    response.writeHead(200, {'Content-Type': 'application/json'});
    log("有人访问了server2");
    response.end(JSON.stringify({
        name: 'car',
        age: 2020
    }));
});

let server = app.listen(5002, function(){
    let host = server.address().address
    let port = server.address().port
    log("有人访问了server2");
})

然后就可以通过node src/server1.js和node src/server2.js 来启动服务器。

配置vuecli开启代理服务器

修改vue的自定义配置文件vue.config.js

  • 方式一：

    1
    2
    3
    devServer: {
        proxy: 'http://localhost:5001'
    }

  • 方式二：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    devServer: {
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    }

插槽Slot

  1. 作用：让父组件可以向子组件指定位置插入Html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
  2. 分类：默认插槽、具名插槽、作用域插槽
  3. 使用方式：

    • 默认插槽：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      父组件中：
      <Category>
          <div>HTML结构1</div>
      </Category>
      子组件：
      <template>
      <div>
          <slot>插槽默认内容</slot>
      </div>
      </template>

      • 具名插槽：

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        父组件中：
        <Category>
            <template slot="center">
                <div>HTML结构1</div>
            </template>

            <template v-slot:footer>
                <div>html结构2</div>
            </template>
        </Category>
        子组件：
        <template>
            <div>
                <slot name="center">插槽默认内容</slot>
                <slot name="footer">插槽默认内容</slot>
            </div>
        </template>

      • 作用域插槽：
        数据在组件自身，但根据数据生成的结构需要组件的使用者来决定
        App.vue

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        <div class="container">
            <Category title="游戏">
            <template scope="geekhall">
                <ul>
                <li v-for="(g, index) in geekhall.games" :key="index">{{ g }}</li>
                </ul>
            </template>
            </Category>

            <Category title="游戏">
            <template scope="{games}">
                <ol>
                <li v-for="(g, index) in games" :key="index">{{ g }}</li>
                </ol>
            </template>
            </Category>
        </div>
        </template>

        Category.vue

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        <template>
            <div class="category">
                <h3>{{ title }}分类</h3>
                <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
            </div>
        </template>
        <script>
        export default {
        name: "Category",
        props: ["title"],
        data() {
            return {
            games: ["coc", "bob", "lol"]
            };
        }
        };
        </script>