vue 学习（2）：vue语法

## 官方文档

[官方文档](https://cn.vuejs.org/guide/quick-start.html#try-vue-online)

## 准备工作
- 安装 node16 或更新版本
- 编写 vue 项目推荐 ide 配置为`Visual Studio Code` + `Volar 扩展(Vue Volar extension Pack)`
  可以创建一个 vue 项目工作区，并把该拓展添加至工作区建议中
  ![image.png](https://oss.silon.vip/img/1e615d829ed71786ca4bf1844ac9e997.image.png)




## 创建 vue 项目

```
npm init vue@latest
```

运行后会让指定项目文件夹名称，及一些脚手架功能是否开启

- typescript
- jsx
- vue-router（单页应用路由）
- pinia（状态管理）
- vitest（单元测试）
- cypress（单元测试、端对端测试）
- eslint（代码 lint）

![image.png](https://oss.silon.vip/img/1b143034c51b40cca9eedd0585fc6495.image.png)

至此，就可以安装依赖，并以开发模式启动了
所有操作命令，可以在 `package.json` 中查看

```
cd 项目文件夹
# 安装依赖（也可以使用 yarn 等工具）
npm install

# 以开发模式启动
npm run dev

# 打包项目
npm run build
```

## 应用入口

应用入口文件在 `项目文件夹/src/main.js`

> 每个 Vue 应用都是通过 `createApp` 函数创建一个新的 应用实例

>应用实例必须在调用了 `.mount()` 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串


![image.png](https://oss.silon.vip/img/5e7aaa4da00ddd1ad61f9cd695f870e8.image.png)

```js
/**
 * 该操作与图中等效
 */
const app = createApp(App)
app.mount('#app')
```

## 应用配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

```js
app.config.errorHandler = (err) => {
  /* 处理错误 */
}
```
应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：

```js
app.component('TodoDeleteButton', TodoDeleteButton)
```
这使得 TodoDeleteButton 在应用的任何地方都是可用的。

## 多应用实例

多应用实例大多用于：使用 Vue 来增强服务端渲染 HTML，将多个小应用挂载在不同元素上

createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

```js
const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')
```

vue学习（1） ： 项目的创建与运行

https://juejin.cn/post/6844903753200451592

react 的懒加载

react hooks 用例

## 操作数组的核心思想

在 JavaScript 中，数组只是另一种对象。与 objects 一样，您应该将处于 React 状态的数组视为 read-only。

这意味着您不应该重新分配数组中的项目，例如`arr[0] = 'bird'`，也不应该使用改变数组的方法，例如`push()`和`pop()`。

相反，每次您想更新一个数组时，您都需要将一个新数组传递给您的状态设置函数。为此，您可以通过调用其非变异方法（如`filter()`和`map()`）从您所在 state 的原始数组创建一个新数组。然后您可以将您的状态设置为生成的新数组。

这里有一个常见数组操作的参考表。在处理 React 状态中的数组时，您需要避免使用左栏中的方法，而更喜欢右栏中的方法：


| 标题 |  | |
| --- | --- | --- |
|       | 避免（改变数组）| 更喜欢（返回一个新数组）
|添加   |push, unshift	|concat,[...arr]传播语法
|删除	|pop, shift, splice	|filter, slice
|更换	|splice,arr[i] = ...赋值	|map
|排序	|reverse, sort	|首先复制数组

或者，您可以使用 `Immer`，它允许您使用来自两列的方法。




:::info{title="陷阱"}
slice和splice命名相似但有很大不同：

slice  让您复制数组或其中的一部分。
splice **改变数组**（插入或删除项目）。
在 React 中，你会更频繁地使用slice（而不是 splice）
因为你不应该直接改变状态中的对象或数组。
:::


:::info{title="[...arr]是浅拷贝"}
即使你使用`[...arr]`复制了一个数组，你也不能直接改变其中的现有项。

这是因为复制是浅层的——新数组将包含与原始数组相同的项。
```js
// nextList[0]andlist[0]指向同一个对象
// 如果您修改复制数组中的对象，就会改变现有状态

const nextList = [...list];
nextList[0].seen = true; // Problem: mutates list[0]
setList(nextList);
```

这里一定要注意，可以通过更新嵌套对象来解决
详见：`更新数组中的对象`
:::

## 添加元素

你可以使用 [...arr] 进行操作，来代替
添加到数组末尾的 push()
添加到数组头部的 unshift()

```js
// 在数组后面添加

setArtists( // Replace the state
  [ // with a new array
    ...artists, // that contains all the old items
    { id: nextId++, name: name } // and one new item at the end
  ]
);
```

```js
// 在数组前面添加

setArtists([
  { id: nextId++, name: name },
  ...artists // Put old items at the end
]);
```

## 删除元素

你可以使用 filter(), 将需要的内容保留即可，来代替
删除原数组的 pop()

```js
setArtists(
  artists.filter(a => a.id !== artist.id)
);
```

## 转换、更改数组

如果要更改数组的部分或全部项目，可以使用`map()`创建一个新数组。您将传递给的函数map可以根据其数据或索引（或两者）决定如何处理每个项目。

```js
const a = [1, 5, 6]

const b = a.map(v=>{
    return v*2
})

// b ==> [2, 10 ,12]
```

## 替换元素

要替换项目，请使用 . 创建一个新数组map。在您的`map`调用中，您将收到项目索引作为第二个参数。用它来决定是否返回原始项目（第一个参数）或其他东西：

```js
let initialCounters = [
  0, 0, 0
];

const [counters, setCounters] = useState(
  initialCounters
);

const nextCounters = counters.map((c, i) => {
  if (i === index) {
    // Increment the clicked counter
    return c + 1;
  } else {
    // The rest haven't changed
    return c;
  }
});
setCounters(nextCounters);
```

## 插入元素

有时，您可能希望在既不是开头也不是结尾的特定位置插入一个项目。为此，您可以将`...`数组展开语法与`slice()`方法一起使用。该slice()方法允许您切割数组的“切片”。

要插入一个项目，您将创建一个数组
1. 该数组展开插入点之前的切片
2. 然后是新元素
3. 最后是原始数组的其余部分。

```js
const insertAt = 1; // Could be any index
const nextArtists = [
  // Items before the insertion point:
  ...artists.slice(0, insertAt),
  // New item:
  { id: nextId++, name: name },
  // Items after the insertion point:
  ...artists.slice(insertAt)
];
setArtists(nextArtists);
```

## 对数组进行其他更改

JavaScript 的 reverse()和sort()方法正在改变原始数组，因此您不能直接使用它们。

但是，您可以先复制数组，然后再对其进行更改。

```js
const [list, setList] = useState(initialList);

function handleClick() {
  const nextList = [...list];
  nextList.reverse();
  setList(nextList);
}
```

## 更新数组中对象

对象并不真正位于数组“内部”。
它们可能看起来在代码中“内部”，但数组中的每个对象都是一个单独的值，数组“指向”。这就是为什么在更改嵌套字段，另一个人的列表可能指向数组的同一个元素！

更新嵌套状态时，您需要从要更新的点开始创建副本，一直到顶层。
```js
setMyList(myList.map(artwork => {
  if (artwork.id === artworkId) {
    // Create a *new* object with changes
    return { ...artwork, seen: nextSeen };
  } else {
    // No changes
    return artwork;
  }
});
```

## 使用 immer 解决状态更改的逻辑

详细的使用可以查看 immer 的相关文档

```js
import { useImmer } from 'use-immer';

export default function BucketList() {
  const [myList, updateMyList] = useImmer(
    initialList
  );

  function handleToggleMyList(id, nextSeen) {
    updateMyList(draft => {
      const artwork = draft.find(a =>
        a.id === id
      );
      artwork.seen = nextSeen;
    });
  }

  return (
    <>
      <h1>Art Bucket List</h1>
      <ItemList
        artworks={myList}
        onToggle={handleToggleMyList} />
  );
}
```

标题
	避免（改变数组）	更喜欢（返回一个新数组）
添加	push, unshift	concat,[...arr]传播语法
删除	pop, shift, splice	filter, slice
更换	splice,arr[i] = ...赋值	map
排序	reverse, sort	首先复制数组

模板语法

官方文档

准备工作

react hooks

操作数组的核心思想