有默认值的参数传入undefined，则会取默认值。如果这个参数位于最后，则可以不传（相当于隐式传入undefined），否则得显式传入 undefined

1
2
3
4
5
6
7
8
9

function get() {
 return 1
}

function foo(x = get(), y) {
 console.log(x, y)
}

foo(undefined, 2) // 1 2

可变状态：

1
2
3
4

let objA = { name: "xiaoming" }
let objB = objA
objB.name = "lihua"
console.log(objA.name) // lihua

我们只修改了 objB 的 name，发现 ojbA 也发生了改变。这个就是可变状态。

可变状态间接修改了其它对象，会造成代码隐患。

解决方案：

• 深度拷贝
• 使用 immer、immutable-js 等处理不可变数据的库

不可变数据 immutable

当我们使用 deepClone 或 immer / immutable-js 创建一个新对象，新对象进行有副作用（side effect）的操作都不会影响到原来的数据。这就是 immutable。

deepClone 虽然实现了 immutable，但是开销太大，因为它完全创建了一个新的对象出来，其实，对于不会进行赋值操作的 value 保持引用也没关系。

所以在 2014 年，facebook 的 immutable-js 横空出世，即保证了 immutable ，在运行时判断数据间的引用情况，又兼顾了性能。

immutable.js

immutable-js 使用了另一套数据结构的 API ，与我们的常见操作有些许不同，它将所有的原生数据类型（Object， Array 等）都会转化成 immutable-js 的内部对象（Map，List 等），并且任何操作最终都会返回一个新的 immutable 的值。

immer

Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体量小巧、设计巧妙，满足了我们对 JS 不可变数据结构的需求。

与 immutable-js 最大的不同，immer 是使用原生数据结构的 API 而不是像 immutable-js 那样转化为内置对象之后使用内置的 API，举个简单例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const produce = require("immer")

const state = {
 done: false,
 val: "string",
}

// 所有具有副作用的操作，都可以放入 produce 函数的第二个参数内进行
// 最终返回的结果并不影响原来的数据
const newState = produce(state, draft => {
 draft.done = true
})

console.log(state.done) // false
console.log(newState.done) // true

通过上面的例子我们能发现，所有具有副作用的逻辑都可以放进 produce 的第二个参数的函数内部进行处理。在这个函数内部对原来的数据进行任何操作，都不会对原对象产生任何影响。

immer 原理

Immer 使用了 ES6 的新特性 Proxy 。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

immer 中的 proxy

immer 的做法就是维护一份 state 在内部，劫持所有操作，内部来判断是否有变化从而最终决定如何返回。下面这个例子就是一个构造函数，如果将它的实例传入 Proxy 对象作为第一个参数，后面处理对象时，就可以使用其中的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

class Store {
 constructor(state) {
  this.modified = false
  this.source = state
  this.copy = null
 }
 get(key) {
  if (!this.modified) return this.source[key]
  return this.copy[key]
 }
 set(key, value) {
  if (!this.modified) this.modifing()
  return (this.copy[key] = value)
 }
 modifing() {
  if (this.modified) return
  this.modified = true
  // 这里使用原生的 API 实现一层 immutable，
  // 数组使用 slice 则会创建一个新数组。对象则使用解构
  this.copy = Array.isArray(this.source) ? this.source.slice() : { ...this.source }
 }
}

modified，source，copy 三个属性；get，set，modifing 三个方法。

modified 作为内置的 flag，判断如何进行设置和返回。

里面最关键的就应该是 modifing 这个函数，在第一次 set 的时候，实现一次 copy，copy 后的数据也是 immutable。

对于 Proxy 的第二个参数，简单做一层转发，任何对元素的读取和写入都转发到 store 实例内部方法去处理：

1
2
3
4
5
6
7
8
9
10
11

const PROXY_FLAG = "@@SYMBOL_PROXY_FLAG"
const handler = {
 get(target, key) {
  // 如果遇到了这个 flag 我们直接返回我们操作的 target
  if (key === PROXY_FLAG) return target
  return target.get(key)
 },
 set(target, key, value) {
  return target.set(key, value)
 },
}

这里在 getter 里面加一个 flag 的目的就在于将来从 proxy 对象中获取 store 实例更加方便。

最终我们能够完成这个 produce 函数：

1
2
3
4
5
6
7
8
9
10
11
12

function produce(state, producer) {
 const store = new Store(state)
 const proxy = new Proxy(store, handler)

 // 执行我们传入的 producer 函数，我们实际操作的都是 proxy 实例，所有有副作用的操作都会在 proxy 内部进行判断，是否最终要对 store 进行改动。
 producer(proxy)

 // 处理完成之后，通过 flag 拿到 store 实例
 const newState = proxy[PROXY_FLAG]
 if (newState.modified) return newState.copy
 return newState.source
}

这样，Store 构造函数、handler 处理对象，produce 处理 state，这三个模块最简版就完成了，将它们组合起来就是一个最 tiny 的 immer。真正的 immer 内部还有其他的功能。

当然，Proxy 作为一个新的 API，并不是所有环境都支持，Proxy 也无法 polyfill，所以 immer 在不支持 Proxy 的环境中，使用 Object.defineProperty 来进行一个兼容。

freeze

freeze 表示状态树在生成之后就被冻结不可继续操作。对于普通 JS 对象，我们可以使用 Object.freeze 来冻结我们生成的状态树对象，当然像 immer / immutable-js 内部自己有冻结的方法和逻辑。

1. 使用configureStore创建 Redux store
   • configureStore 接受 reducer 函数作为命名参数
   • configureStore 使用的好用的默认设置自动设置 store
2. 为 React 应用程序组件提供 Redux store
   • 使用 React-Redux <Provider> 组件包裹你的 <App />
   • 传递 Redux store 如 <Provider store={store}>
3. 使用createSlice创建 Redux “slice” reducer
   • 使用字符串名称、初始状态和命名的 reducer 函数调用“createSlice”
   • Reducer 函数可以使用 Immer 来“改变”状态
   • 导出生成的 slice reducer 和 action creators
4. 在 React 组件中使用 React-Redux useSelector/useDispatch钩子
   • 使用useSelector钩子从 store 中读取数据
   • 使用useDispatch钩子获取dispatch函数，并根据需要 dispatch actions

你将学到

• RTK Query 如何简化 Redux 应用程序的数据获取
• 如何设置 RTK Query
• 如何使用 RTK Query 进行基本的数据获取和更新请求

概述

RTK Query 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，无需自己手动编写数据获取和缓存逻辑。

RTK Query 是一个包含在 Redux Toolkit 包中的可选插件，其功能构建在 Redux Toolkit 中的其他 API 之上。

动机

在过去的几年里，React 社区已经意识到 “数据获取和缓存” 实际上是一组不同于 “状态管理” 的关注点。

RTK Query 从其他开创数据获取解决方案的工具中汲取灵感，例如 Apollo Client、React Query、Urql 和 SWR，但在其 API 设计中添加了独特的方法：

• 数据获取和缓存逻辑构建在 Redux Toolkit 的 createSlice 和 createAsyncThunk API 之上
• 由于 Redux Toolkit 与 UI 无关，因此 RTK Query 的功能可以与任何 UI 层一起使用
• API 请求接口是提前定义的，包括如何从参数生成查询参数和转换响应以进行缓存
• RTK Query 还可以生成封装整个数据获取过程的 React hooks ，为组件提供 data 和 isFetching 字段，并在组件挂载和卸载时管理缓存数据的生命周期
• RTK Query 提供“缓存数据项生命周期函数”选项，支持在获取初始数据后通过 websocket 消息流式传输缓存更新等用例
• 我们有从 OpenAPI 和 GraphQL 模式生成 API slice 代码的早期工作示例
• 最后，RTK Query 完全用 TypeScript 编写，旨在提供出色的 TS 使用体验

包含

RTK Query 包含在核心 Redux Toolkit 包的安装中。它可以通过以下两个入口点之一获得：

1
2
3
4

import { createApi } from "@reduxjs/toolkit/query"

/* 自动生成的特定于 React 的入口点 对应于定义请求接口的 hooks  */
import { createApi } from "@reduxjs/toolkit/query/react"

RTK Query 主要由两个 API 组成：

• createApi()：RTK Query 功能的核心。它允许你定义一组请求接口来描述如何从一系列请求接口检索数据，包括如何获取和转换该数据的配置。在大多数情况下，你应该在每个应用程序中使用一次，根据经验，“每个基本 URL 一个 API slice”。
• fetchBaseQuery(): fetch 的一个小包装 -US/docs/Web/API/Fetch_API），旨在简化请求。旨在为大多数用户在 createApi 中使用推荐的 baseQuery。

RTK Query 缓存的设计思想

Redux 一直强调可预测性和显式行为。Redux 没有“魔法”，所有 Redux 逻辑都遵循相同的基本模式，即通过 reducers 调度操作和更新状态。这确实意味着有时你必须编写更多代码才能使事情发生。

Redux Toolkit 核心 API 不会更改 Redux 应用程序中的任何基本数据流 你仍在调度操作和编写 reducer，只是代码比手动编写所有逻辑要少。 RTK Query 同理。这是一个额外的抽象级别，但在内部，它仍在执行我们已经看到的用于管理异步请求及其响应的完全相同的步骤。

但是，当你使用 RTK Query 时，会发生思维转变。我们不再考虑“管理状态”本身。相反，我们现在考虑“管理*缓存数据*”。与其尝试自己编写 reducer，我们现在将专注于定义 “这些数据来自哪里？”、“这个更新应该如何发送？”、“这个缓存的数据应该什么时候重新获取？”，以及“缓存的数据应该如何更新？”。如何获取、存储和检索这些数据成为我们不再需要担心的实现细节。

1
2
3
4
5
6
7

export const fetchNotifications = createAsyncThunk("notifications/fetchNotifications", async (_, { getState }) => {
 const allNotifications = selectAllNotifications(getState())
 const [latestNotification] = allNotifications
 const latestTimestamp = latestNotification ? latestNotification.date : ""
 const response = await client.get(`/fakeApi/notifications?since=${latestTimestamp}`)
 return response.data
})

Thunk 参数

payload creator 的第二个参数是一个’ thunkAPI ‘对象，包含几个有用的函数和信息：

• dispatch 和 getState：dispatch 和 getState 方法由 Redux store 提供。你可以在 thunk 中使用这些来发起 action，或者从最新的 Redux store 中获取 state （例如在发起 另一个 action 后获取更新后的值）。
• extra：当创建 store 时，用于传递给 thunk 中间件的“额外参数”。这通常时某种 API 的包装器，比如一组知道如何对应用程序的服务器进行 API 调用并返回数据的函数，这样你的 thunk 就不必直接包含所有的 URL 和查询逻辑。
• requestId：该 thunk 调用的唯一随机 ID ，用于跟踪单个请求的状态。
• signal：一个AbortController.signal 函数，可用于取消正在进行的请求。
• rejectWithValue：一个用于当 thunk 收到一个错误时帮助自定义 rejected action 内容的工具。

（如果你要手写 thunk 而不是使用 createAsyncThunk，则 thunk 函数将获取 (dispatch, getState) 作为单独的参数，而不是将他们放在一个对象中。）

你将学到

• 如何使用 Redux “thunk” middleware 处理异步逻辑
• 处理异步请求状态的开发模式
• 如何使用 Redux Toolkit createAsyncThunk API 来简化异步调用

thunks 与异步逻辑

使用 Middleware 处理异步逻辑

就其本身而言，Redux store 对异步逻辑一无所知，任何异步都必须发生在 store 之外。

Redux middleware 扩展了 store，它允许：

• dispatch action 时执行额外的逻辑（例如打印 action 的日志和状态）
• 暂停、修改、延迟、替换或停止 dispatch 的 action
• 编写可以访问 dispatch 和 getState 的额外代码
• 教 dispatch 如何接受除普通 action 对象之外的其他值，例如函数和 promise，通过拦截它们并 dispatch 实际 action 对象来代替

使用 middleware 的最常见原因是允许不同类型的异步逻辑与 store 交互。这允许你编写可以 dispatch action 和检查 store 状态的代码，同时使该逻辑与你的 UI 分开。

Redux 有多种异步 middleware，每一种都允许你使用不同的语法编写逻辑。最常见的异步 middleware 是 redux-thunk，它可以让你编写可能直接包含异步逻辑的普通函数。Redux Toolkit 的 configureStore 功能默认自动设置 thunk middleware，我们推荐使用 thunk 作为 Redux 开发异步逻辑的标准方式。

早些时候，我们看到了Redux 的同步数据流是什么样子。当引入异步逻辑时，我们添加了一个额外的步骤，middleware 可以运行像 AJAX 请求这样的逻辑，然后 dispatch action。这使得异步数据流看起来像这样：

thunk 函数

将 thunk middleware 添加到 Redux store 后，它允许你将 thunk 函数 直接传递给 store.dispatch。调用 thunk 函数时总是将 (dispatch, getState) 作为它的参数，你可以根据需要在 thunk 中使用它们。

Thunks 通常还可以使用 action creator 再次 dispatch 普通的 action，比如 dispatch(increment())：

1
2
3
4
5
6
7
8
9
10
11
12

const store = configureStore({ reducer: counterReducer })

// thunk 函数：
const exampleThunkFunction = (dispatch, getState) => {
 const stateBefore = getState()
 console.log(`Counter before: ${stateBefore.counter}`)
 dispatch(increment()) //  dispatch 普通的 action
 const stateAfter = getState()
 console.log(`Counter after: ${stateAfter.counter}`)
}

store.dispatch(exampleThunkFunction) // 将 thunk 函数 直接传递给 store.dispatch

为了与 dispatch 普通 action 对象保持一致，我们通常将它们写为 _thunk action creators_，它返回 thunk 函数。这些 action creator 可以接受可以在 thunk 中使用的参数。

1
2
3
4
5
6
7
8
9
10
11

const logAndAdd = amount => {
 return (dispatch, getState) => {
  const stateBefore = getState()
  console.log(`Counter before: ${stateBefore.counter}`)
  dispatch(incrementByAmount(amount))
  const stateAfter = getState()
  console.log(`Counter after: ${stateAfter.counter}`)
 }
}

store.dispatch(logAndAdd(5))

Thunk 通常写在 “slice” 文件中。createSlice 本身对定义 thunk 没有任何特殊支持，因此你应该将它们作为单独的函数编写在同一个 slice 文件中。这样，他们就可以访问该 slice 的普通 action creator，并且很容易找到 thunk 的位置。

“thunk” 这个词是一个编程术语，意思是 “一段做延迟工作的代码”.

编写异步 Thunks

Thunk 内部可能有异步逻辑，例如 setTimeout、Promise 和 async/await。这使它们成为使用 AJAX 发起 API 请求的好地方。

Redux 的数据请求逻辑通常遵循以下可预测的模式：

• 在请求之前 dispatch 请求“开始”的 action，以指示请求正在进行中。这可用于跟踪加载状态以允许跳过重复请求或在 UI 中显示加载中提示。
• 发出异步请求
• 根据请求结果，异步逻辑 dispatch 包含结果数据的“成功” action 或包含错误详细信息的 “失败” action。在这两种情况下，reducer 逻辑都会清除加载状态，并且要么展示成功案例的结果数据，要么保存错误值并在需要的地方展示。

这些步骤不是 _必需的_，而是常用的。（如果你只关心一个成功的结果，你可以在请求完成时发送一个“成功” action ，并跳过“开始”和“失败” action 。）

Redux Toolkit 提供了一个 createAsyncThunk API 来实现这些 action 的创建和 dispatch，我们很快就会看看如何使用它。

细节说明

如果我们手动编写一个典型的 async thunk 的代码，它可能看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const getRepoDetailsStarted = () => ({
 type: "repoDetails/fetchStarted",
})
const getRepoDetailsSuccess = repoDetails => ({
 type: "repoDetails/fetchSucceeded",
 payload: repoDetails,
})
const getRepoDetailsFailed = error => ({
 type: "repoDetails/fetchFailed",
 error,
})
const fetchIssuesCount = (org, repo) => async dispatch => {
 dispatch(getRepoDetailsStarted())
 try {
  const repoDetails = await getRepoDetails(org, repo)
  dispatch(getRepoDetailsSuccess(repoDetails))
 } catch (err) {
  dispatch(getRepoDetailsFailed(err.toString()))
 }
}

提示：

Redux Toolkit 有一个新的 RTK Query data fetching API。 RTK Query 是专门为 Redux 应用程序构建的数据获取和缓存解决方案，可以不用编写任何 thunk 或 reducer 来处理数据获取。

总结

可以编写可复用的“selector 选择器”函数来封装从 Redux 状态中读取数据的逻辑

• 选择器是一种函数，它接收 Redux state 作为参数，并返回一些数据

Redux 使用叫做“ middleware ”这样的插件模式来开发异步逻辑

• 官方的处理异步 middleware 叫 redux-thunk，包含在 Redux Toolkit 中
• Thunk 函数接收 dispatch 和getState 作为参数，并且可以在异步逻辑中使用它们

你可以 dispatch 其他 action 来帮助跟踪 API 调用的加载状态

• 典型的模式是在调用之前 dispatch 一个 “pending” 的 action，然后是包含数据的 “sucdess” 或包含错误的 “failure” action
• 加载状态通常应该使用枚举类型，如 'idle' | 'loading' | 'succeeded' | 'failed'

Redux Toolkit 有一个 createAsyncThunk API 可以为你 dispatch 这些 action

• createAsyncThunk 接受一个 “payload creator” 回调函数，它应该返回一个 Promise，并自动生成 pending/fulfilled/rejected action 类型
• 像 fetchPosts 这样生成的 action creator 根据你返回的 Promise dispatch 这些 action
• 可以使用 extraReducers 字段在 createSlice 中监听这些 action，并根据这些 action 更新 reducer 中的状态。
• action creator 可用于自动填充 extraReducers 对象的键，以便切片知道要监听的 action。
• Thunk 可以返回 promise。 具体对于createAsyncThunk，你可以await dispatch(someThunk()).unwrap()来处理组件级别的请求成功或失败。

注意

如果 action 需要包含唯一 ID 或其他一些随机值，请始终先生成该随机值并将其放入 action 对象中。

Reducer 中永远不应该计算随机值，因为这会使结果不可预测。

解释：深入理解 redux 之 reducer 为什么是纯函数

不得修改传入的参数

以下是修改传入参数的示例：

1
2
3
4
5
6
7

const params = { a: 1 }
function log(params) {
 console.log(params)
}
log(params) // {a: 1}
params.a = 2
log(params) // {a: 2}

不得调用非纯函数

redux 的核心提供可预测化的状态管理，即无论何时特定的 action 触发的行为永远保持一致，试想如果 reducer 中有 Date.now()等非纯函数，即使同样的 action,那么 reducer 处理过程中也是有所不同的，不再能保证可预测性。

执行有副作用的操作

同样，副作用的操作也会带来不可预测性。

api 请求该如何执行

显然 api 操作是不可避免的，因为总要向后台请求数据，那么 api 请求应该如何做呢？这里有两个办法：

• 在 dispatch 方法之前进行 api 请求：在 dispatch 之外先进行 api 异步请求，当收到请求结果后，根据结果的不同选择 dispatch 不同的 action；
• 应用 redux-thunk、redux-promise 等中间件，就可以在 dispatch 函数中直接执行 api 请求等异步操作了。

总结

Redux action creators 可以使用一个正确的内容模板去构造（prepare）action 对象

• createSlice 和 createAction 可以接受一个返回 action payload 的 “prepare callback”
• 诸如唯一的 ID 和一些随机值应该放在 action 里，而不是在 reducer 中去计算

Reducers 内（仅）应该包含 state 的更新逻辑

• Reducers 内可以包含计算新 state 所需的任意逻辑
• Action 对象内应该包含足够描述即将发生什么事的信息

创建 Redux Store

Redux Slice

“slice” 是应用中单个功能的 Redux reducer 逻辑和 action 的集合, 通常一起定义在一个文件中。

比如，在一个博客应用中，store 的配置大致长这样：

1
2
3
4
5
6
7
8
9
10
11
12

import { configureStore } from "@reduxjs/toolkit"
import usersReducer from "../features/users/usersSlice"
import postsReducer from "../features/posts/postsSlice"
import commentsReducer from "../features/comments/commentsSlice"

export default configureStore({
 reducer: {
  users: usersReducer,
  posts: postsReducer,
  comments: commentsReducer,
 },
})

创建 Slice Reducer 和 Action

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

import { createSlice } from "@reduxjs/toolkit"

export const counterSlice = createSlice({
 name: "counter",
 initialState: {
  value: 0,
 },
 reducers: {
  increment: state => {
   // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。
   // 并不是真正的改变 state 因为它使用了 immer 库
   // 当 immer 检测到 "draft state" 改变时，会基于这些改变去创建一个新的不可变的 state
   state.value += 1
  },
  decrement: state => {
   state.value -= 1
  },
  incrementByAmount: (state, action) => {
   state.value += action.payload
  },
 },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Redux Toolkit 有一个名为 createSlice 的函数，它负责生成 action 类型字符串、action creator 函数和 action 对象。

createSlice 内部使用了一个名为 Immer 的库。 Immer 使用一种 “Proxy” 包装你提供的数据，当你尝试 ”mutate“ 这些数据的时候，Immer 会跟踪你尝试进行的所有更改，然后使用该更改列表返回一个安全的、不可变的更新值，就好像你手动编写了所有不可变的更新逻辑一样。

Reducer 的规则

• 仅使用 state 和 action 参数计算新的状态值
• 禁止直接修改 state。必须通过复制现有的 state 并对复制的值进行更改的方式来做 _不可变更新（immutable updates）_。
• 禁止任何异步逻辑、依赖随机值或导致其他“副作用”的代码

“不可变更新（Immutable Updates）” 这个规则尤其重要，值得进一步讨论。

Reducer 与 Immutable 更新

在 Redux 中，**永远 不允许在 reducer 中直接更改 state 的原始对象！**

1
2

// ❌ 非法 - 默认情况下，这将更改 state！
state.value = 123

这就是为什么 Redux Toolkit 的 createSlice 函数可以让你以更简单的方式编写不可变更新！

警告

你 只能 在 Redux Toolkit 的 createSlice 和 createReducer 中编写 “mutation” 逻辑，因为它们在内部使用 Immer！如果你在没有 Immer 的 reducer 中编写 mutation 逻辑，它 将 改变状态并导致错误！

用 Thunk 编写异步逻辑

到目前为止，我们应用程序中的所有逻辑都是同步的：

1. dispatch action
2. store 调用 reducer 来计算新状态
3. dispatch 函数完成并结束

但是，我们的应用程序通常具有异步逻辑，我们需要一个地方在我们的 Redux 应用程序中放置异步逻辑。

thunk 是一种特定类型的 Redux 函数，可以包含异步逻辑。Thunk 是使用两个函数编写的：

• 一个内部 thunk 函数，它以 dispatch 和 getState 作为参数
• 外部创建者函数，它创建并返回 thunk 函数

示例：

1
2
3
4
5
6
7
8
9

// 外部的 thunk creator 函数, 它使我们可以执行异步逻辑
export const incrementAsync = amount => {
 // 内部的 thunk 函数
 return (dispatch, getState) => {
  setTimeout(() => {
   dispatch(incrementByAmount(amount)) // 调用dispatch修改store
  }, 1000)
 }
}

显然，incrementAsync() 返回的不是 action（action 是具有type字段的纯函数），而是一个函数，但它的使用方式和普通的 action 是一样的：

1
2
3
4
5
6
7
8

export function Counter() {
   const dispatch = useAppDispatch();

   return <>
   	<button onClick=()=>dispatch(increment()) >+</button>
   	<button onClick=()=>dispatch(incrementAsync()) >+</button>
   </>
}

这是依赖 “middleware” 机制实现的，Redux 的 store 可以使用 “middleware” 进行扩展，中间件是一种可以添加额外功能的附加组件或插件。其最常见的用途就是实现异步逻辑，同时仍能与 store 对话。

Redux Thunk 中间件，代码很短：

1
2
3
4
5
6
7
8
9
10

const thunkMiddleware =
 ({ dispatch, getState }) =>
 next =>
 action => {
  if (typeof action === "function") {
   return action(dispatch, getState) // 这里面允许调用dispatch修改store
  }

  return next(action)
 }

它先判断传入 dispatch 的 action 是函数还是对象。如果是一个函数，则调用函数，并返回结果。否则，传入的是普通 action 对象，就把这个 action 传递给 store 处理。

React Counter 组件

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

import React, { useState } from "react"
import { useSelector, useDispatch } from "react-redux"
import { decrement, increment, incrementByAmount, incrementAsync, selectCount } from "./counterSlice"
import styles from "./Counter.module.css"

export function Counter() {
 const count = useSelector(selectCount)
 const dispatch = useDispatch()
 const [incrementAmount, setIncrementAmount] = useState("2")

 return (
  <div>
   <div className={styles.row}>
    <button className={styles.button} aria-label="Increment value" onClick={() => dispatch(increment())}>
     +
    </button>
    <span className={styles.value}>{count}</span>
    <button className={styles.button} aria-label="Decrement value" onClick={() => dispatch(decrement())}>
     -
    </button>
   </div>
   {/* 这里省略了额外的 render 代码 */}
  </div>
 )
}

使用 useSelector 提取数据

useSelector 这个 hook 让我们的组件从 Redux 的 store 状态树中提取它需要的任何数据。

我们默认 组件中不能引入 store。所以useSelector负责在幕后与 Redux store 对话。

示例：

1

const countPlusTwo = useSelector(state => state.counter.value + 2)

useSelector 会调用 store.getState() 获取 state，然后返回 state.counter.value + 2 的值。

每当一个 action 被 dispatch 并且 Redux store 被更新时，useSelector 将重新运行我们的选择器函数。如果选择器返回的值与上次不同，useSelector 将确保我们的组件使用新值重新渲染。

使用 useDispatch 来 dispatch action

类似地，我们知道如果我们可以访问 Redux store，可以 store.dispatch(increment())。

由于我们无法访问 store 本身，因此我们需要某种方式来访问 dispatch 方法。

useDispatch hook 为我们完成了这项工作，并从 Redux store 中为我们提供了实际的 dispatch 方法：

1

const dispatch = useDispatch()

组件 State 与表单

在 React + Redux 应用中，你的全局状态应该放在 Redux store 中，你的本地状态应该保留在 React 组件中。

大多数表单的 state 不应该保存在 Redux 中。 相反，在编辑表单的时候把数据存到表单组件中，当用户提交表单的时候再 dispatch action 来更新 store。

Providing the Store

我们已经看到我们的组件可以使用 useSelector 和 useDispatch 这两个 hook 与 Redux 的 store 通信。奇怪的是，我们并没有导入 store，那么这些 hooks 怎么知道要与哪个 Redux store 对话呢？

答案是使用 Context：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from "react"
import { createRoot } from "react-dom/client"
import { Provider } from "react-redux"
import { store } from "app/store"
import App from "./App"

const container = document.getElementById("root")!
const root = createRoot(container)

root.render(
 <React.StrictMode>
  <Provider store={store}>
   <App />
  </Provider>
 </React.StrictMode>
)

总结

• 我们可以使用 Redux Toolkit configureStore API 创建一个 Redux store

  • configureStore 接收 reducer 函数来作为命名参数
  • configureStore 自动使用默认值来配置 store

• 在 slice 文件中编写 Redux 逻辑

  • 一个 slice 包含一个特定功能或部分的 state 相关的 reducer 逻辑和 action
  • Redux Toolkit 的 createSlice API 为你提供的每个 reducer 函数生成 action creator 和 action 类型

• Redux reducer 必须遵循以下原则

  • 必须依赖 state 和 action 参数去计算出一个新 state
  • 如果要修改 state，只能先拷贝 state 副本，然后去修改副本
  • 不能包含任何异步逻辑或其他副作用
  • Redux Toolkit 的 createSlice API 内部使用了 Immer 库才达到表面上直接修改（”mutating”）state 也实现不可变更新（_immutable updates_）的效果

• 一般使用 “thunks” 来开发特定的异步逻辑

  • Thunks 接收 dispatch 和 getState 作为参数
  • Redux Toolkit 内置并默认启用了 redux-thunk 中间件

• 使用 React-Redux 来做 React 组件和 Redux store 的通信

  • 在应用程序根组件包裹 <Provider store={store}> 使得所有组件都能访问到 store
  • 全局状态应该维护在 Redux store 内，局部状态应该维护在局部 React 组件内

1. 官网下载 SecureCRT 9.3.2：https://www.vandyke.com/cgi-bin/account_login.php?pid=scrt_ubuntu2264_deb_932

2. 安装：

   1	sudo dpkg -i scrt-9.3.2-2978.ubuntu22-64.x86_64.deb

3. 创建securecrt_linux_crack.pl 文件：

   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

   #!/usr/bin/perl use strict; use warnings; use File::Copy qw(move); sub license { print "\n". "License:\n\n". "\tName:\t\tygeR\n". "\tCompany:\tTEAM ZWT\n". "\tSerial Number:\t03-69-167482\n". "\tLicense Key:\tACM9SP KG5KUX E276JS N3NEMG ACM2M3 Q9FSC4 116U6V GDEPA2\n". "\tIssue Date:\t04-24-2023\n\n\n"; } sub usage { print "\n". "help:\n\n". "\tperl securecrt_forgeek_crack.pl <file>\n\n\n". "\tperl securecrt_forgeek_crack.pl /usr/bin/SecureCRT\n\n\n". "\n"; &license; exit; } &usage() if ! defined $ARGV[0] ;

   my $file = $ARGV[0];

   open FP, $file or die “can not open file $!”;
   binmode FP;

   open TMPFP, ‘>’, ‘/tmp/.securecrt.tmp’ or die “can not open file $!”;

   my $buffer;
   my $unpack_data;
   my $crack = 0;

   while(read(FP, $buffer, 1024)) {
   $unpack_data = unpack(‘H*’, $buffer);
   if ($unpack_data =~ m/785782391ad0b9169f17415dd35f002790175204e3aa65ea10cff20818/) {
   $crack = 1;
   last;
   }
   if ($unpack_data =~ s/6e533e406a45f0b6372f3ea10717000c7120127cd915cef8ed1a3f2c5b/785782391ad0b9169f17415dd35f002790175204e3aa65ea10cff20818/ ){
   $buffer = pack(‘H*’, $unpack_data);
   $crack = 2;
   }
   syswrite(TMPFP, $buffer, length($buffer));
   }

   close(FP);
   close(TMPFP);

   if ($crack == 1) {
   unlink ‘/tmp/.securecrt.tmp’ or die “can not delete files $!”;
   print “It has been cracked\n”;
   &license;
   exit 1;
   } elsif ($crack == 2) {
   move ‘/tmp/.securecrt.tmp’, $file or die ‘Insufficient privileges, please switch the root account.’;
   chmod 0755, $file or die ‘Insufficient privileges, please switch the root account.’;
   print “crack successful\n”;
   &license;
   } else {
   die ‘error’;
   }

   1 2 3 4 5 6 7 8

   4. 破解： ```sh sudo chmod +x securecrt_linux_crack.pl cp /usr/bin/SecureCRT /tmp/ # 拷贝SecureCRT到/tmp ./securecrt_linux_crack.pl /tmp/SecureCRT # 开始破解，如果破解成功，会提示 crack successful 并输出license信息 cp /tmp/SecureCRT /usr/bin/ # 将破解后的SecureCRT覆盖原SecureCRT

4. 启动 SecureCRT 并输入 license，如果不成功，则随便百度一个 SecureCRT9.3.2 的 license 填上就行，如果百度搜不到，就用 windows 系统生成一个，因为 license 是通用的。

安装

注意：不要直接用系统自带的应用商店安装。

http://www.sublimetext.com/docs/linux_repositories.html#apt

1
2
3
4
5
6
7
8
9

gpg --dearmor | sudo tee /etc/apt/trusted.gpg.d/sublimehq-archive.gpg > /dev/null

echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list

sudo apt update
sudo apt install sublime-text

# 如果安装失败
sudo apt install apt-transport-https

破解

1. 打开页面：https://hexed.it/
2. 打开文件：/opt/sublime_text/sublime_text
3. 搜索 80 78 05 00 0F 94 C1 并替换为 C6 40 05 01 48 85 C9
4. 导出 并 覆盖 /opt/sublime_text/sublime_text
5. 不出意外的话，破解成功

https://notabug.org/doublesine/navicat-keygen/src/linux/doc/how-to-use.zh-CN.md

编译安装 navicat-keygen

https://notabug.org/doublesine/navicat-keygen/src/linux/doc/how-to-build.zh-CN.md

1
2
3
4
5
6
7
8
9
10

sudo apt-get install cmake
sudo apt-get install libfmt-dev libssl-dev rapidjson-dev

git clone -b linux --single-branch https://notabug.org/doublesine/navicat-keygen.git
cd navicat-keygen

mkdir build
cd build
cmake -DCMAKE_BUILD_TYPE=Release ..
cmake --build . -- -j12

官网下载 navicat

https://www.navicat.com/en/download/navicat-premium

1

wget https://www.navicat.com/download/direct-download?product=navicat16-premium-en.AppImage&location=1

开始注册

https://notabug.org/doublesine/navicat-keygen/src/linux/doc/how-to-use.zh-CN.md

1
2
3
4
5
6

# 当前位于~/opt目录下
mkdir navicat16-premium-cs
sudo mount -o loop ~/navicat16-premium-cs.AppImage ~/navicat16-premium-cs
cp -r navicat16-premium-cs navicat16-premium-cs-patched
sudo umount navicat16-premium-cs
rm -rf navicat16-premium-cs

进入刚才编译安装好的 navicat-keygen/build 目录，使用 navicat-patcher 替换官方公钥：

1

./navicat-patcher ~/opt/navicat16-premium-cs-patched

将文件重新打包成 AppImage：

1
2
3

wget 'https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage'
chmod +x appimagetool-x86_64.AppImage
./appimagetool-x86_64.AppImage ~/opt/navicat16-premium-cs-patched ~/opt/navicat16-premium-cs-patched.AppImage

运行刚生成的 AppImage：

1
2

chmod +x ~/opt/navicat16-premium-en-patched.AppImage
~/opt/navicat16-premium-en-patched.AppImage

还是在 navicat-keygen/build 目录，navicat-keygen 来生成 序列号 和 激活码：

1

./navicat-keygen --text ./RegPrivateKey.pem

你会被要求选择 Navicat 产品类别、Navicat 语言版本和填写主版本号。之后一个随机生成的 序列号 将会给出：

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

***************************************************
*       navicat-keygen by @DoubleLabyrinth        *
*                version: 16.0.7.0                *
***************************************************

[*] Select Navicat product:
0. DataModeler
1. Premium
2. MySQL
3. PostgreSQL
4. Oracle
5. SQLServer
6. SQLite
7. MariaDB
8. MongoDB
9. ReportViewer

(Input index)> 1

[*] Select product language:
0. English
1. Simplified Chinese
2. Traditional Chinese
3. Japanese
4. Polish
5. Spanish
6. French
7. German
8. Korean
9. Russian
10. Portuguese

(Input index)> 1

[*] Input major version number:
(range: 11 ~ 16, default: 16)> 16

[*] Serial number:
NAVB-EZF4-7T7X-9MPG

[*] Your name:

你可以使用这个 序列号 来暂时激活 Navicat。

之后你会被要求填写 用户名 和 组织名。你可以随意填写，但别太长。

1
2
3
4

[*] Your name: Double Sine
[*] Your organization: PremiumSoft CyberTech Ltd.

[*] Input request code in Base64: (Double press ENTER to end)

之后你会被要求填写请求码。注意不要关闭 keygen。

1. 断开网络. 找到注册窗口，填写 keygen 给你的 序列号，然后点击 激活。
2. 通常在线激活会失败，所以在弹出的提示中选择 手动激活。
3. 复制 请求码 到 keygen，连按两次回车结束。

1
2
3
4
5
6
7
8
9
10
11

[*] Input request code in Base64: (Double press ENTER to end)
ds7CnjEnNL+8Rme9Q5iD+3t9Tfuq9W6FzVN/3UZwC5zzecmM9EwyHJuZSovKJNSBTzL6AiGyxliTuKPWmLqAdwiKGLuD+mSaZ0syk0jTakVbXmbAk9maFkTz8SK5jMwnQVM/WBZcI0z2Jg1GnOCZVClu/Lo3/WF+XncS+alc2gshG9dUaI44Cqfvp/u1/EYso5fX/bjeBXaFW1/zj+uuRjVv5l0gt7JsTh9byGVxSDTO4zI64Iz9+58QYCbI9zKM+3G9Gou0UlNKjDYw4gN5+4dpiWAjitVTcL3oQzvflgAXjGlT/P6MA+8Xb5PEPJrEdxsErJObxBhO4cTH52wKoQ==

[*] Request Info:
{"K":"NAVBEZF47T7X9MPG", "DI":"AFCFB038A240942D8776", "P":"linux"}

[*] Response Info:
{"K":"NAVBEZF47T7X9MPG","DI":"AFCFB038A240942D8776","N":"Double Sine","O":"PremiumSoft CyberTech Ltd.","T":1644837835}

[*] Activation Code:
OY8Ib0brsepeS99it4s4WTDPQuKgu93WembLJ0bzr6M30Wh24reH1/ocaZ2Ek1bRBi5lqu2xBv/MpAcFUlstJANtavArkFnXYv0ZZiF3VF70De5GMe/VjkreNhjCGtTZcQKr8fabBTPjJuN0P+Hi1xWwMs9zJMuH+MJTmCQpbM4gu86YrFK/EDcdHtA4ZFgUI0SgYW8lwFausLFHp7C4uIQNbjtv4KP3XolDUrAx4lqg6bklgZ9C8ZjUpg28VVR9Ym37b1Fup7Y7C8OjmmMiAp8N5z8m6cA/EjcSLfLOMGf8jsAK0GHz5/AGUqAXWifv9h9cxPA35UgytqI9F2IH/Q==

最终你会得到一个 base64 编码的 激活码。

将之复制到 手动激活 的窗口，然后点击 激活。

如果没有什么意外，应该可以成功激活。

最后清理：

1
2
3

$ rm ~/opt/navicat16-premium-cs.AppImage
$ rm -rf ~/opt/navicat16-premium-cs-patched
$ mv ~/opt/navicat16-premium-cs-patched.AppImage ~/opt/navicat16-premium-cs.AppImage

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

1

const p = new Proxy(target, handler)

• target：要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组、函数、甚至另一个代理）。
• handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理p的行为。

方法

1

Proxy.revocable()

创建一个可撤销的Proxy对象。

handler对象的方法

handler对象是一个容纳一批特定属性的占位符对象。它包含有Proxy的各个捕获器（trap）。

所有的捕获器是可选的。如果没有定义某个捕获器，那么就会保留源对象的默认行为。

getPrototypeOf()

handler.getPrototypeOf() 是一个代理（Proxy）方法，当读取代理对象的原型时，该方法就会被调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const monster1 = {
  eyeCount: 4
};

const monsterPrototype = {
  eyeCount: 2
};

const handler = {
  getPrototypeOf(target) {
    return monsterPrototype;
  }
};

const proxy1 = new Proxy(monster1, handler);

console.log(Object.getPrototypeOf(proxy1) === monsterPrototype);
// Expected output: true

console.log(Object.getPrototypeOf(proxy1).eyeCount);
// Expected output: 2

setPrototypeOf()

handler.setPrototypeOf() 方法主要用来拦截 Object.setPrototypeOf().

1
2
3
4

const p = new Proxy(target, {
  setPrototypeOf: function(target, prototype) {
  }
});

isExtensible()

handler.isExtensible() 方法用于拦截对对象的 Object.isExtensible()。

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

const monster1 = {
  canEvolve: true
};

const handler1 = {
  isExtensible(target) {
    return Reflect.isExtensible(target);
  },
  preventExtensions(target) {
    target.canEvolve = false;
    return Reflect.preventExtensions(target);
  }
};

const proxy1 = new Proxy(monster1, handler1);

console.log(Object.isExtensible(proxy1));    // true

console.log(monster1.canEvolve);      // true

Object.preventExtensions(proxy1);      // true

console.log(Object.isExtensible(proxy1));    // true

console.log(monster1.canEvolve);      // true

preventExtensions()

handler.preventExtensions() 方法用于设置对Object.preventExtensions()的拦截。

Object.preventExtensions()方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。

1
2
3
4

var p = new Proxy(target, {
  preventExtensions: function(target) {
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const monster1 = {
  canEvolve: true
};

const handler1 = {
  preventExtensions(target) {
    target.canEvolve = false;
    Object.preventExtensions(target);
    return true;
  }
};

const proxy1 = new Proxy(monster1, handler1);

console.log(monster1.canEvolve);    // true

Object.preventExtensions(proxy1);

console.log(monster1.canEvolve);    // fasle

getOwnPropertyDescriptor()

handler.getOwnPropertyDescriptor() 方法是 Object.getOwnPropertyDescriptor() 的钩子。

1
2
3
4

var p = new Proxy(target, {
  getOwnPropertyDescriptor: function(target, prop) {
  }
});

1
2
3
4
5
6
7
8
9
10

const p = new Proxy({ a: 20 }, {
    getOwnPropertyDescriptor(target, prop) {
        console.log('called: ' + prop)
        return { configurable: true, enumerable: true, value: 10 }
    }
})

console.log(Object.getOwnPropertyDescriptor(p, 'a').value)
// called: a
// 10

defineProperty()

handler.defineProperty() 用于拦截对象的 Object.defineProperty() 操作。

vue2的双向绑定就是通过 Object.defineProperty() 实现的。

1
2
3
4

var p = new Proxy(target, {
  defineProperty: function(target, property, descriptor) {
  }
});

has()

handler.has() 方法是针对 in 操作符的代理方法。

示例，_开头的属性为私有属性，使用in判断的时候返回false：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const handler1 = {
  has(target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};

const monster1 = {
  _secret: 'easily scared',
  eyeCount: 4
};

const proxy1 = new Proxy(monster1, handler1);

console.log('eyeCount' in proxy1);     // true

console.log('_secret' in proxy1);     // false

console.log('_secret' in monster1);     // true

get()

handler.get() 方法用于拦截对象的读取属性操作。

1
2
3
4

var p = new Proxy(target, {
  get: function(target, property, receiver) {
  }
});

1
2
3
4
5
6
7

const p = new Proxy({ a: 10 }, {
    get(target, prop, receiver) {
        return target[prop] * 2
    }
})

console.log(p.a)   // 20

set()

handler.set() 方法是设置属性值操作的捕获器。

1
2
3
4

const p = new Proxy(target, {
  set: function(target, property, value, receiver) {
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const monster1 = { eyeCount: 4 };

const handler1 = {
  set(obj, prop, value) {
    if ((prop === 'eyeCount') && ((value % 2) !== 0)) {
      console.log('必须是偶数');
    } else {
      return Reflect.set(...arguments);
    }
  }
};

const proxy1 = new Proxy(monster1, handler1);

proxy1.eyeCount = 1;    // 必须是偶数

console.log(proxy1.eyeCount);  // 4

proxy1.eyeCount = 2;
console.log(proxy1.eyeCount);  // 2

deleteProperty()

handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作。

1
2
3
4

var p = new Proxy(target, {
  deleteProperty: function(target, property) {
  }
});

ownKeys()

handler.ownKeys() 方法用于拦截 Reflect.ownKeys().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const monster1 = {
    _age: 111,
    [Symbol('secret')]: 'I am scared!',
    eyeCount: 4
}

const proxy1 = new Proxy(monster1, {
    ownKeys(target) {
        return Reflect.ownKeys(target)
    }
})

for (const key of Object.keys(proxy1)) {
    console.log(key)
    // Expected output: "_age"
    // Expected output: "eyeCount"
}

apply()

handler.apply() 方法用于拦截函数的调用。

1
2
3
4
5
6
7
8
9
10

const sum = (a, b) => a + b
const handler = {
    apply: (target, _, args) => {
        return target(...args) * 10
    },

}
const proxy = new Proxy(sum, handler)
console.log(sum(1, 2))      // 3
console.log(proxy(1, 2))     // 30

construct()

handler.construct() 方法用于拦截 new 操作符。为了使 new 操作符在生成的 Proxy 对象上生效，用于初始化代理的目标对象自身必须具有 [[Construct]] 内部方法（即 new target 必须是有效的）。

1
2
3
4
5
6
7
8
9
10
11
12
13

function sum(a, b) {
    return { a, b }
}
const handler = {
    construct: (target, args) => {
        for (let index = 0; index < args.length; index++) {
            args[index] += 1
        }
        return new target(...args)
    }
}
const proxy = new Proxy(sum, handler)
console.log(new proxy(1, 2))                // {a: 2, b: 3}

上例中，sum不能是只能是普通函数，不能是箭头函数，因为箭头函数不能new。

基础

模板语法

attribute

{{}}不能在 HTML attributes 中使用。想要响应式的绑定一个 attribute，应该使用v-bind指令是：

1

<div v-bind:id="dynamicId"></div>

因为v-bind非常常用，我们提供了特定的简写语法：

1

<div :id="dynamicId"></div>

使用 js 表达式

实际上，vue 在所有的数据绑定中都支持完整的 js 表达式。

每个帮顶仅支持单一表达式，也就是一段能够被求值的 js 代码。一个简单的判断是是否可以合法的写在return后面。

绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。

受限的全局访问：

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

指令

指令是带有v-前缀的特殊 attribute，vue 提供了许多内置指令，包括上面提到的v-bind。

指令 attribute 的期望值是一个 js 表达式（除了v-for、v-on、v-slot 这几个少数的例外）。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

以v-if为例：

1

<p v-if="seen">Now you see me</p>

这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。

响应式基础

reactive()

我们可以使用 reactive() 函数创建一个响应式对象或数组：

1
2
3

import { reactive } from "vue"

const state = reactive({ count: 0 })

<script setup>

要在组件模板中使用响应式状态，需要在 setup() 函数中定义并返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
import { reactive } from "vue"

export default {
 setup() {
  const state = reactive({ count: 0 })

  function increment() {
   state.count++
  }

  // 不要忘记同时暴露 increment 函数
  return {
   state,
   increment,
  }
 },
}
</script>

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用 <script setup> 来大幅度地简化代码。

1
2
3
4
5
6
7
8
9

<script setup>
import { reactive } from "vue"

const state = reactive({ count: 0 })

function increment() {
 state.count++
}
</script>

<script setup> 中的顶层的导入和变量声明可在同一组件的模板中直接使用。你可以理解为模板中的表达式和 <script setup> 中的代码处在同一个作用域中。

DOM 更新时机

当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只更新一次。

若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API：

1
2
3
4
5
6
7
8
9

import { nextTick } from "vue"

function increment() {
 state.count++
 nextTick(() => {
  // DOM更新后执行...
  // 访问更新后的DOM
 })
}

深层响应性

在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。

1
2
3
4
5
6
7
8
9
10
11
12

import { reactive } from "vue"

const obj = reactive({
 nested: { count: 0 },
 arr: ["foo", "bar"],
})

function mutateDeeply() {
 // 以下都会按照期望工作
 obj.nested.count++
 obj.arr.push("baz")
}

你也可以直接创建一个浅层响应式对象。它们仅在顶层具有响应性，一般仅在某些特殊场景中需要。

响应式代理 vs 原始对象

值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：

1
2
3
4
5

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。

为保证访问代理的一致性，对同一个原始对象调用reactive()总是返回同样的代理对象，而对一个已存在的代理对象调用reactive()会返回其本身：

1
2
3
4
5

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

这个规则对嵌套对象也适用。依靠深层响应性，响应式对象内的嵌套对象依然是代理：

1
2
3
4
5
6

const proxy = reactive({})

const raw = {}
proxy.nested = raw

console.log(proxy.nested === raw) // false

reactive()的局限性

因为 js 没有可以作用于所有值类型的“引用”机制。所以reactive() API 有两条限制：

1. 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
2. 必须始终保持对响应式对象的相同引用。不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失：

1
2
3
4

let state = reactive({ count: 0 })

// 上面的引用({{count: 0})将不再被追踪（响应性连接已丢失！）
state = reactive({ count: 1 })

同时这也意味着当我们将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性：

1
2
3
4
5
6
7
8
9

const state = reactive({ count: 0 })

let n = state.count // n是一个局部变量，同 state.count 失去响应性连接
n++ // 不影响原始的state.count

let { count } = state // count也和state.count失去了响应性连接
count++ // 不会影响到原始的state

callSomeFunction(state.count) // 该函数接收一个普通数字，并且将无法跟踪state.count的变化

ref()

js 没有可以作用于所有值类型的“引用”机制，为此，vue 提供了一个ref()方法来允许我们创建可以使用任何值类型的响应式 ref：

1
2
3

import { ref } from "vue"

const count = ref(0)

ref()将传入参数的值包装为一个带.value属性的 ref 对象：

1
2
3
4
5
6
7

const count: Ref<number> = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

和响应式对象的属性类似，ref 的 .value 属性也是响应式的。同时，当值为对象类型时，会用 reactive() 自动转换它的 .value。

一个包含对象类型值的 ref 可以响应式地替换整个对象：

1
2
3
4

const objectRef = ref({ count: 0 })

// 这是响应式的替换
objectRef.value = { count: 1 }

ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：

1
2
3
4
5
6
7
8
9
10
11
12

const obj = {
 foo: ref(1),
 bar: ref(2),
}

// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo)

// 仍然是响应式的
const { foo, bar } = obj

简言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到 组合函数 中。

ref 在模板中的解包

当 ref 在模板中作为顶层属性被访问时，它们会自动“解包”，所以不需要使用.value，示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script setup>
import { ref } from "vue"

const count = ref(0)

function increment() {
 count.value++
}
</script>

<template>
 <button @click="increment">
  {{ count }}
  <!-- 无需 .value -->
 </button>
</template>

请注意，仅当 ref 是模板渲染上下文的顶层属性时才适用自动“解包”。 例如：

1

const object = { foo: ref(1) }

下面的表达式将不会像预期的那样工作：

1
2
3
4
5

{
 {
  object.foo + 1
 }
}

因为此时 ref 所在的上下文是object而不是模板。我们可以将foo提取出来，这样 ref 的上下文就是模板了：

1

const { foo } = object

1
2
3
4
5

{
 {
  foo + 1
 }
}

需要注意的是，如果是下面这种情况，直接渲染，不参与计算，则也会被自动解包：

1
2
3
4
5

{
 {
  object.foo
 }
} // 相当于 {{ object.foo.value }}

ref 在响应式对象中的解包

当一个ref被嵌套在一个响应式对象中，作为属性被访问或更改时，它会自动解包，因此会表现的和一般属性一样：

1
2
3
4
5
6
7
8
9

const count = ref(0)
const state = reactive({
 count,
})

console.log(state.count) // 0

state.count = 1
console.log(count.value) // 1

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：

1
2
3
4
5
6

const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去了联系
console.log(count.value) // 1

只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包，当其作为浅层响应式对象的属性被访问时不会解包。

数组和集合类型的 ref 解包

跟响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

1
2
3
4
5
6
7

const books = reactive([ref("Vue 3 Guide")])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([["count", ref(0)]]))
// 这里需要 .value
console.log(map.get("count").value)

计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script lang="ts" setup>
import { reactive, computed } from "vue"

const author = reactive({
 name: "John Doe",
 books: ["Vue 2 - Advanced Guide", "Vue 3 - Basic Guide", "Vue 4 - The Mystery"],
})

// 一个计算属性 ref
const publishedBooksMessage = computed<"Yes" | "No">(() => {
 return author.books.length > 0 ? "Yes" : "No"
})
</script>

<template>
 <p>Has published books:</p>
 <span>{{ publishedBooksMessage }}</span>
</template>

我们在这里定义了一个计算属性 publishedBooksMessage。computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。和其他一般的 ref 类似，你可以通过 publishedBooksMessage.value 访问计算结果。计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value。

vue 的计算属性会自动追踪响应式依赖。它会检测到 publishedBooksMessage 依赖于 author.books，所以当 author.books 改变时，任何依赖于 publishedBooksMessage 的绑定都会同时更新。

计算属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

1

<p>{{ calculateBooksMessage() }}</p>

1
2
3
4

// 组件中
function calculateBooksMessage() {
 return author.books.length > 0 ? "Yes" : "No"
}

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

这也解释了为什么下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖：

1

const now = computed(() => Date.now())

相比之下，方法调用总是会在重渲染发生时再次执行函数。

为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。

可写计算属性

计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。

最佳实践

Getter 不应有副作用

计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要在 getter 中做异步请求或者更改 DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用监听器根据其他响应式状态的变更来创建副作用。

避免直接修改计算属性值

从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

Class 与 Style 绑定

因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

绑定 HTML class

绑定对象

:class 是 v-bind:class 的缩写。

1

<div :class="{ active: isActive }"></div>

也可以直接绑定一个对象：

1
2
3
4

const classObject = reactive({
 active: true,
 "text-danger": false,
})

1

<div :class="classObject"></div>

也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

1
2
3
4
5
6
7

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
 active: isActive.value && !error.value,
 "text-danger": error.value && error.value.type === "fatal",
}))

1

<div :class="classObject"></div>

绑定数组

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

1
2

const activeClass = ref("active")
const errorClass = ref("text-danger")

1

<div :class="[activeClass, errorClass]"></div>

渲染的结果是：

1

<div class="active text-danger"></div>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

1

<div :class="[isActive ? activeClass : '', errorClass]"></div>

然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：

1

<div :class="[{ active: isActive }, errorClass]"></div>

在组件上使用

1
2
3
4
5
6
7
8

<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>

<!-- 在使用组件时 -->
<MyComponent class="baz boo" />

<!-- 渲染出的 HTML 为 -->
<p class="foo bar baz boo">Hi</p>

绑定内联样式

绑定对象

1
2

const activeColor = ref("red")
const fontSize = ref(30)

1

<div :style="{ 'font-size': fontSize + 'px' }"></div>

直接绑定一个样式对象通常是一个好主意，这样可以使模板更加简洁：

1
2
3
4

const styleObject = reactive({
 color: "red",
 fontSize: "13px",
})

1

<div :style="styleObject"></div>

同样的，如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性。

绑定数组

我们还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上：

1

<div :style="[baseStyles, overridingStyles]"></div>

自动前缀

样式多值

条件渲染

v-if

1
2
3
4

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

v-if、v-else 和 v-else-if 也可以在 <template> 上使用。

1
2
3
4
5

<template v-if="ok">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</template>

v-show

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：

1

<h1 v-show="ok">Hello!</h1>

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

v-if 和 v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

列表渲染

v-for

1

const items = ref([{ message: "Foo" }, { message: "Bar" }])

1

<li v-for="item in items">{{ item.message }}</li>

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

1

<div v-for="item of items"></div>

v-for 与对象

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

1
2
3
4
5

const myObject = reactive({
 title: "How to do lists in Vue",
 author: "Jane Doe",
 publishedAt: "2016-04-10",
})

1
2
3
4
5
6
7
8
9

<ul>
 <li v-for="value in myObject">{{ value }}</li>
</ul>

<!-- 可以通过提供第二个参数表示属性名 (例如 key) -->
<li v-for="(value, key) in myObject">{{ key }}: {{ value }}</li>

<!-- 第三个参数表示位置索引 -->
<li v-for="(value, key, index) in myObject">{{ index }}. {{ key }}: {{ value }}</li>

在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

1

<span v-for="n in 10">{{ n }}</span>

注意此处 n 的初值是从 1 开始而非 0。

<template> 上的 v-for

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

1
2
3
4
5
6

<ul>
 <template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider" role="presentation"></li>
 </template>
</ul>

v-for 和 v-if

警告：

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请查看风格指南获得更多信息。

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

1
2
3
4
5

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

1
2
3

<template v-for="todo in todos">
 <li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>

通过 key 管理状态

vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：

1
2
3

<div v-for="item in items" :key="item.id">
 <!-- 内容 -->
</div>

当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上：

1
2
3

<template v-for="todo in todos" :key="todo.name">
 <li>{{ todo.name }}</li>
</template>

注意：key 在这里是一个通过 v-bind 绑定的特殊 attribute。请不要和在 v-for 中使用对象里所提到的对象属性名相混淆。

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。关于 key attribute 的更多用途细节，请参阅 key API 文档。

组件上使用v-for

我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)：

1

<MyComponent v-for="item in items" :key="item.id" />

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：

1

<MyComponent v-for="(item, index) in items" :item="item" :index="index" :key="item.id" />

不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。

数组变化侦测

变更方法

vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换一个数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

1
2

// `items` 是一个数组的 ref
items.value = items.value.filter(item => item.message.match(/Foo/))

你可能认为这将导致 vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。

展示过滤或排序后的结果

有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。

举例：

1
2
3
4
5

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
 return numbers.value.filter(n => n % 2 === 0)
})

1

<li v-for="n in evenNumbers">{{ n }}</li>

在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法：

1
2
3
4
5
6
7
8

const sets = ref([
 [1, 2, 3, 4, 5],
 [6, 7, 8, 9, 10],
])

function even(numbers) {
 return numbers.filter(number => number % 2 === 0)
}

1
2
3

<ul v-for="numbers in sets">
 <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：

1
2

- return numbers.reverse()
+ return [...numbers].reverse()

事件处理

监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

事件处理器的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

内联事件处理器通常用于简单场景，例如：

1

const count = ref(0)

1
2

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

举例：

1
2
3
4
5
6
7
8
9

const name = ref("Vue.js")

function greet(event) {
 alert(`Hello ${name.value}!`)
 // `event` 是 DOM 原生事件
 if (event) {
  alert(event.target.tagName)
 }
}

1
2

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素。

方法与内联事件判断

模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器。

在内联处理器中调用方法

除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

1
2
3

function say(message) {
 alert(message)
}

1

<button @click="say('hello')">Say hello</button> <button @click="say('bye')">Say bye</button>

在内联事件处理器中访问事件参数

有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

1
2
3
4
5
6
7
8
9

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="e => warn('Form cannot be submitted yet.', e)">
  Submit
</button>

1
2
3
4
5
6
7

function warn(message, event) {
 // 这里可以访问原生事件
 if (event) {
  event.preventDefault()
 }
 alert(message)
}

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：

1
2
3
4
5
6
7
8
9
10