<h1 style="text-align: center;font-size: 76px;line-height: 1.25;font-weight: 900;letter-spacing: -1.5px;max-width: 960px;margin: 0 auto;border-bottom: 0 !important;padding-bottom: 0 !important">
    <span style="background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">Vue3 - 渐进式</span>
    <br data-v-9e9e3e87="">
    JavaScript 框架 
</h1>
<p style="text-align: center;max-width: 960px;line-height: 1.5;color: var(--vt-c-text-2);transition: color .5s;font-size: 22px;margin: 24px auto 40px;"> 易学易用，性能出色，适用场景丰富的 Web 前端框架。 </p>



## Teleport

> 有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。
>
> 这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。

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

例如，当父组件中使用了 `filter` 等 css 属性时，子组件的 `position` 属性会失效，这时可以使用 `<teleport to="dom"></teleport>` 挂载到某一html结点上，`to` 的值为元素选择器

```vue
<template>
  <button @click="show = true">Show Modal</button>
  <Teleport to="body">
    <div class="modal" v-show="show">
      <h2>Modal Title</h2>
      <p>Modal content</p>
      <button @click="show = false">close</button>
    </div>
  </Teleport>
</template>
```

指定目标容器：

```vue
<Teleport to="#some-id" />
<Teleport to=".some-class" />
<Teleport to="[data-teleport]" />
```

有条件地禁用：

```vue
<Teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</Teleport>
```


:::tip{title="提示"}
`<Teleport>` 挂载时，传送的 `to` 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，你需要确保在挂载 `<Teleport>` 之前先挂载该元素。
:::

## Suspense


:::warning{title="实验性功能"}
`<Suspense>` 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。
:::

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

使用 `Suspense` 包裹组件，并配置好 `default` 与 `fallback` (底层使用插槽实现)

```vue
<template>
  <div class="outer">
    <h2>App</h2>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h2>loading</h2>
      </template>
    </Suspense>
  </div>
</template>
```

## 全局 API 转移到应用对象

- `app.component`

  ```typescript
  import Hello from './Hello';
  app.component('Hello', Hello);
  ```

  

- `app.config`

  ```typescript
  app.config.globalProperties.x = 99;
  declare module 'vue' {
    interface ComponentCustomProperties {
      x: number
    }
  }
  ```

  

- `app.directive`

  ```typescript
  /* main.ts */
  app.directive('beauty', (element, {value}) => {
    element.innerText += value;
    element.style.color = 'red';
    element.style.backgroundColor = 'skyblue';
  })
  
  /* Comp.vue */
  <h3 v-beauty="count">哈哈哈</h3>
  ```

  

- `app.mount`

- `app.unmount`

  ```typescript
  setTimeout(() => {
    app.unmount();
  }, 2000);
  ```

  

- `app.use`

## Vue3 的非兼容性改变

[非兼容性改变 | Vue 3 迁移指南 (vuejs.org)](https://v3-migration.vuejs.org/zh/breaking-changes/)

### 全局API

- [全局 Vue API 更改为使用应用程序实例](https://v3-migration.vuejs.org/zh/breaking-changes/global-api.html)
- [全局和内部 API 都经过了重构，现已支持 TreeShaking （摇树优化）](https://v3-migration.vuejs.org/zh/breaking-changes/global-api-treeshaking.html)

### 模板指令

- [`v-model` 指令在组件上的使用已经被重新设计，替换掉了 `v-bind.sync`](https://v3-migration.vuejs.org/zh/breaking-changes/v-model.html)
- [在`
- [`v-if` 和 `v-for` 在同一个元素身上使用时的优先级发生了变化](https://v3-migration.vuejs.org/zh/breaking-changes/v-if-v-for.html)
- [`v-bind="object"` 现在是顺序敏感的](https://v3-migration.vuejs.org/zh/breaking-changes/v-bind.html)
- [`v-on:event.native` 事件修饰符已经被移除](https://v3-migration.vuejs.org/zh/breaking-changes/v-on-native-modifier-removed)

### 组件

- [函数式组件只能通过纯函数进行创建](https://v3-migration.vuejs.org/zh/breaking-changes/functional-components.html)
- [单文件组件 (SFC) `
- [异步组件现在需要通过 `defineAsyncComponent` 方法进行创建](https://v3-migration.vuejs.org/zh/breaking-changes/async-components.html)
- [组件事件现在应该使用 `emits` 选项进行声明](https://v3-migration.vuejs.org/zh/breaking-changes/emits-option.html)

### 渲染函数

- [渲染函数 API 更改](https://v3-migration.vuejs.org/zh/breaking-changes/render-function-api.html)
- [`$scopedSlots` property 已移除，所有插槽都通过 `$slots` 作为函数暴露](https://v3-migration.vuejs.org/zh/breaking-changes/slots-unification.html)
- [`$listeners` 被移除或整合到 `$attrs`](https://v3-migration.vuejs.org/zh/breaking-changes/listeners-removed)
- [`$attrs` 现在包含 `class` 和 `style` attribute](https://v3-migration.vuejs.org/zh/breaking-changes/attrs-includes-class-style)

### 自定义元素

- [自定义元素检测现在在模板编译时执行](https://v3-migration.vuejs.org/zh/breaking-changes/custom-elements-interop.html)
- [特殊的 `is` attribute 的使用被严格限制在被保留的 `` 标签中](https://v3-migration.vuejs.org/zh/breaking-changes/custom-elements-interop.html#定制内置元素)

### 其他小改变

- `destroyed` 生命周期选项被重命名为 `unmounted`
- `beforeDestroy` 生命周期选项被重命名为 `beforeUnmount`
- [Props 的 `default` 工厂函数不再可以访问 `this` 上下文](https://v3-migration.vuejs.org/zh/breaking-changes/props-default-this.html)
- [自定义指令的 API 已更改为与组件生命周期一致，且 `binding.expression` 已移除](https://v3-migration.vuejs.org/zh/breaking-changes/custom-directives.html)
- [`data` 选项应始终被声明为一个函数](https://v3-migration.vuejs.org/zh/breaking-changes/data-option.html)
- [来自 mixin 的 `data` 选项现在为浅合并](https://v3-migration.vuejs.org/zh/breaking-changes/data-option.html#mixin-合并行为变更)
- [Attribute 强制策略已更改](https://v3-migration.vuejs.org/zh/breaking-changes/attribute-coercion.html)
- [Transition 的一些 class 被重命名](https://v3-migration.vuejs.org/zh/breaking-changes/transition.html)
- [`` 不再默认渲染包裹元素](https://v3-migration.vuejs.org/zh/breaking-changes/transition-group.html)
- [当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 `deep` 选项](https://v3-migration.vuejs.org/zh/breaking-changes/watch.html)
- 没有特殊指令的标记 (`v-if/else-if/else`、`v-for` 或 `v-slot`) 的 `<template>` 现在被视为普通元素，并将渲染为原生的 `<template>` 元素，而不是渲染其内部内容。
- [已挂载的应用不会替换它所挂载的元素](https://v3-migration.vuejs.org/zh/breaking-changes/mount-changes.html)
- [生命周期的 `hook:` 事件前缀改为 `vue:`](https://v3-migration.vuejs.org/zh/breaking-changes/vnode-lifecycle-events.html)

### 被移除的 API

- [`keyCode` 作为 `v-on` 修饰符的支持](https://v3-migration.vuejs.org/zh/breaking-changes/keycode-modifiers.html)
- [$on、$off 和 $once 实例方法](https://v3-migration.vuejs.org/zh/breaking-changes/events-api.html)
- [过滤器 (filter)](https://v3-migration.vuejs.org/zh/breaking-changes/filters.html)
- [内联模板 attribute](https://v3-migration.vuejs.org/zh/breaking-changes/inline-template-attribute.html)
- [`$children` 实例 property](https://v3-migration.vuejs.org/zh/breaking-changes/children.html)
- [`propsData` 选项](https://v3-migration.vuejs.org/zh/breaking-changes/props-data.html)
- `$destroy` 实例方法。用户不应该再手动管理单个 Vue 组件的生命周期。
- 全局函数 `set` 和 `delete` 以及实例方法 `$set` 和 `$delete`。基于代理的变化检测已经不再需要它们了。

Vue学习07：Vue 3新特性

## shallowRef 与 shallowReactive

> 通过使用 [`shallowRef()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowref) 和 [`shallowReactive()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive) 来绕开深度响应。浅层式 `API` 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。



```vue
<script setup lang="ts">
import { shallowReactive, shallowRef } from 'vue';

let count = shallowRef(0);
let person = shallowRef({
  name: '张三',
  age: 18
});
let car = shallowReactive({
  brand: '奔驰',
  options: {
    color: 'red',
    engine: 'V8'
  }
});

function changeCount() {
  count.value += 1;
}

function changeName() {
  person.value.name = '李四';
}

function changeAge() {
  person.value.age += 1;
}

function changePerson() {
  person.value = { name: 'tony', age: 100 };
}

function changeBrand() {
  car.brand = '保时捷';
}

function changeColor() {
  car.options.color = 'black';
}

function changeEngine() {
  car.options.color = 'V12';
}

function changeCar() {
  Object.assign(car, {
    brand: '埃文塔多',
    options: {
      color: 'yellow',
      engine: 'V10'
    }
  });
}
</script>

<template>
  <div>
    <h2>计数：{{ count }}</h2>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeCount">count + 1</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <h2>{{ car }}</h2>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changeColor">修改颜色</button>
    <button @click="changeEngine">修改发动机</button>
    <button @click="changeCar">修改整台车</button>
  </div>
</template>
```

![GIF 2024-3-3 21-40-59.gif](/static/img/f6cd734c353628707e7e4185dfb456ef.GIF%202024-3-3%2021-40-59.gif)

## readonly 与 shallowReadonly

### readonly

创建一个对象的深只读副本，对于 `ref` 和 `reactive` 都生效

特点：

- 对象的所有嵌套属性都将变为只读
- 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）
- 原对象更改，`readonly` 对象同步更改

应用场景：

* 创建不可变的状态快照
* 保护全局状态或配置不被修改

```vue
<script setup lang="ts">
import { readonly, ref, shallowReactive, shallowRef } from 'vue';

let count1 = ref(0);
let count2 = readonly(count1);

function addCount1() {
  count1.value += 1;
}

function addCount2() {
  count2.value += 1;
}
</script>

<template>
  <div>
    <h2>当前count1为：{{ count1 }}</h2>
    <button @click="addCount1">count1 + 1</button>
    <h2>当前count2为：{{ count2 }}</h2>
    <button @click="addCount2">count2 + 1</button>
  </div>
</template>

<style scoped></style>
```

![image-20240304200339943.png](/static/img/88ef9540208dc54e88b32f14a2f4fe5f.image-20240304200339943.png)

![GIF 2024-3-4 20-04-56.gif](/static/img/44e9cb4dae11056e2db6b1ea7c76a0ea.GIF%202024-3-4%2020-04-56.gif)
### shallowReadonly

1. 作用：与 `readonly` 类似，但只作用于对象的顶层属性

2. 用法：

   ```js
   const original = reactive({ ... });
   const shallowReadOnlyCopy = shallowReadonly(original);
   ```

3. 特点：

   * 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的
   * 适用于只需保护对象顶层属性的场景



## toRaw 与 markRaw

### toRaw

用于获取一个响应式对象（ [`reactive()`](https://cn.vuejs.org/api/reactivity-core.html#reactive)、[`readonly()`](https://cn.vuejs.org/api/reactivity-core.html#readonly)、[`shallowReactive()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive) 或者 [`shallowReadonly()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowreadonly) ）的原始对象，`toRaw` 返回的对象不再是响应式的，不会触发视图更新

> 这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。

在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 `toRaw` 可以确保它们收到的是普通对象

```typescript
import { reactive, toRaw } from 'vue';

let person = reactive({
  name: 'Morales',
  age: 23
});

console.log('person', person); // 响应式对象
console.log('toRaw(person)', toRaw(person)); // 原始对象
```

### markRaw

标记一个对象，使其**永远不会**变成响应式的

例如，使用`mockjs`时，为了防止误把`mockjs`变为响应式对象，可以使用 `markRaw` 去标记`mockjs`

```typescript
let car = markRaw({
  brand: 'BMW M3 GTR',
  price: 150
});
let car2 = reactive(car);

console.log('car', car)
console.log('car2', car2)
```


:::warning{title="谨慎使用"}
`markRaw()` 和类似 `shallowReactive()` 这样的浅层式 API 使你可以有选择地避开默认的深度响应/只读转换，并在状态关系谱中嵌入原始的、非代理的对象。它们可能出于各种各样的原因被使用：

- 有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。
- 当呈现带有不可变数据源的大型列表时，跳过代理转换可以提高性能。

这应该是一种进阶需求，因为只在根层能访问到原始值，所以如果把一个嵌套的、没有标记的原始对象设置成一个响应式对象，然后再次访问它，你获取到的是代理的版本。这可能会导致**对象身份风险**，即执行一个依赖于对象身份的操作，但却同时使用了同一对象的原始版本和代理版本：

```typescript
const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象，但 foo.nested 却没有
  nested: foo.nested
})

console.log(foo.nested === bar.nested) // false
```

识别风险一般是很罕见的。然而，要正确使用这些 API，同时安全地避免这样的风险，需要你对响应性系统的工作方式有充分的了解。
:::

## customRef

创建一个自定义的 `ref`，并对其依赖项跟踪和更新触发进行逻辑控制

```vue
<script setup lang="ts">
import { customRef, ref } from 'vue';

// 使用 Vue 提供的默认 ref 定义响应式数据，数据变化页面随即更新
// let msg = ref('你好')

// 使用 Vue 提供的 customRef 定义响应式数据
let initValue = '你好'
let msg = customRef((track, trigger) => { // track 跟踪，trigger 触发
  return {
    // msg 被读取时调用
    get() {
      console.log('get');
      track(); // 让 Vue 对 msg 进行追踪
      return initValue;
    },
    // msg 被修改时调用
    set(value) {
      console.log('set', value);
      initValue = value;
      trigger(); // 通知 Vue 数据 msg 发生变化
    }
  }
})
</script>

<template>
  <div>
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg">
  </div>
</template>
```

将自定义 ref 封装为 hooks，并实现输入时防抖：

*useMsgRef.ts*

```typescript
import { customRef } from "vue";

export default function (initValue: string, delay: number) {
  let msg = customRef((track, trigger) => { // track 跟踪，trigger 触发
    let timer: number;
    return {
      // msg 被读取时调用
      get() {
        console.log('get');
        track(); // 让 Vue 对 msg 进行追踪
        return initValue;
      },
      // msg 被修改时调用
      set(value) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log('set', value);
          initValue = value;
          trigger(); // 通知 Vue 数据 msg 发生变化
        }, delay);
      }
    }
  })
  return { msg };
}
```

*App.vue*

```vue
<script setup lang="ts">
import useMsgRef from './hooks/useMsgRef';

let { msg } = useMsgRef(initValue, 1000);
</script>

<template>
  <div>
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg">
  </div>
</template>
```

![GIF 2024-3-4 22-30-41.gif](/static/img/b16ad334f9b1c60d2d80e2294a35db7d.GIF%202024-3-4%2022-30-41.gif)

Vue学习06：其他常用 API

Vue学习05：组件通信

<div style="box-sizing: border-box;margin: 0 auto;position: relative;width: 320px;height: 320px;display: flex;justify-content: center;align-items: center;">
    <div style="box-sizing: border-box;width: 320px;height: 320px;position: absolute;top: 50%;left: 50%;border-radius: 50%;transform: translate(-50%,-50%);background-image: linear-gradient( 15deg, #f7d336 65%, #52ce63 30% );filter: blur(72px);"></div>
    <img src="https://pinia.vuejs.org/logo.svg" alt="Pinia" style="box-sizing: border-box;max-height: 320px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: transparent">
  </div>
  


完成效果：

![GIF 2024-2-22 19-33-50.gif](/static/img/89736c27b4333f53bae8d4c117f920ae.GIF%202024-2-22%2019-33-50.gif)

## 搭建 pinia 环境

1. 安装 pinia：`npm i pinia`

2. 在 `main.ts` 中配置：

   ```typescript
   import { createApp } from 'vue';
   import App from './App.vue';
   import { createPinia } from 'pinia';
   
   const pinia = createPinia();
   createApp(App).use(pinia).mount('#app');
   ```

<span>　</span>

## 存储 / 读取数据

### 存储数据

*@/store/count.ts*

```typescript
import { defineStore } from 'pinia';

export const useCountStore = defineStore('count', {
  state() {
    return {
      count: 1
    }
  }
});
```

*@/store/sentence.ts*

```typescript
import { defineStore } from 'pinia';

export const useSentenceStore = defineStore('sentence', {
  state() {
    return {
      sentenceList: [
        { id: 'xxx1', content: '长河千嶂，大荒孤城，历历在目。' },
        { id: 'xxx2', content: '回首某个瞬间，下个瞬间即告消逝。' },
        { id: 'xxx3', content: '无欲无求，笑口常开。' }
      ]
    }
  }
});
```

### 读取数据

*@/component/Count.vue*

```vue
<template>
  <div class="count">
    <h2>当前计数为：{{ countStore.count }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useCountStore } from '@/store/count';

const countStore = useCountStore();

// countStore 是一个 reactive 对象
// console.log('countStore',countStore)

// 以下都可以拿到 state 数据
// console.log('countStore.count', countStore.count)
// console.log('countStore.$state.count',countStore.$state.count)

let n = ref(1);

function add() {
}
function sub() { 
}
</script>

<style scoped>
.count {
  background-color: skyblue;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 20px;
}

select,button {
  margin: 0 5px;
  height: 26px;
}
</style>
```

*@/component/Sentence.vue*

```vue
<template>
  <div class="sen">
    <button @click="getSen">获取一句话</button>
    <ul>
      <li v-for="sen in sentenceStore.sentenceList" :key="sen.id">{{sen.content}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useSentenceStore } from '@/store/sentence';

const sentenceStore = useSentenceStore();

function getSen() {
}
</script>

<style scoped>
.sen {
  background-color: orange;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 20px;
}
</style>
```

## 修改数据

1. `store.sum += 1`

2. `store.$patch({ sum: 888, name: '小明'})`

3. 配置 actions (配置项式)，常用于公共代码较多可以封装的情况

   ```typescript
   /* @/store/count.ts */
   export const useCountStore = defineStore('count', {
     actions: {
       increment(value: number) {
         this.count += value;
       }
     },
     state() {
       return {
         count: 1
       }
     }
   });
   
   /* @/component/Count.vue */
   countStore.increment(1);
   ```
   
<span>　</span>

## storeToRefs

直接解构会丢失响应式，而直接使用 `toRefs` 会将 store 中的所有属性全部转为 ref 对象

```typescript
const { count } = storeToRefs(countStore);

function add() {
  countStore.$patch({count: count.value + n.value})
}
function sub() { 
  count.value -= n.value;
}
```

## getters

`getters`  为一个对象，相当于可共享的计算属性，可以被 `storeToRefs` 拿到

```typescript
export const useCountStore = defineStore('count', {
  state() {
    return {
      count: 1
    }
  },
  getters: {
    bigCount: state => state.count * 10,
    largeCount(): number {
      return this.count * 10;
    }
  }
});
```

## 订阅

类比 `watch` 监视

```typescript
sentenceStore.$subscribe((mutate, state) => {
  console.log('sentenceStore变化了', mutate, state)
})
```

## store 组合式写法

将 `defineStore` 封装成组件的 `setup` 写法

```typescript
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useCountStore = defineStore('count', () => {
  let count = ref(1);

  function increment(value: number) {
    count.value += value;
  }

  return { count, increment };
});
```

如果**两个或更多的 store 相互使用**，它们不可以通过 *getters* 或 *actions* 创建一个无限循环。它们也不可以**同时**在它们的 setup 函数中直接互相读取对方的 state

Vue学习04：状态管理 Pinia

:::info{title="注"}
本文翻译自 [React Labs: What We've Been Working On – February 2024](https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024)，原作者 [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://twitter.com/dan_abramov)。
:::




## React 编译器

React 编译器已经不再是一个研究项目：编译器现已为 instagram.com 的生产环境提供支持，而且我们正努力将其推广到 Meta（前 FaceBook） 的更多平台，并准备首次开源发布。

正如我们在之前的帖子中讨论到的，React *有时* 会在状态改变时过度重新渲染。自 React 早期以来，我们对此类情况的解决方案一直是手动记忆化。在我们当前的 API 中，这意味着需要使用 `useMemo`，`useCallback` 和 `memo` API 来手动调整 React 在状态改变时手动调整的程度。但是手动记忆化是一种妥协，它会使我们的代码变得混乱、容易出错，而且需要额外的维护工作。

手动记忆化是一种合理的妥协，但我们并不满意。我们的愿景是让 React 在状态更改时 *自动* 重新渲染 UI 的正确部分，*而不会影响* React 的核心心智模型。我们相信 React 的方法 —— UI 作为状态的简单函数，具有标准的 JavaScript 值和习语 —— 是 React 对于众多开发人员来说平易近人的关键。这就是我们投入构建 React 优化编译器的原因。

规则松散且具有动态性使得 JavaScript 成为一种臭名昭著的难以优化的语言。React 编译器能够通过对 JavaScript 的规则和“React 的规则”进行建模来安全地编译代码。例如，React 组件必须是幂等的 —— 给定相同的输入必须返回相同的值 —— 不能改变 props 或 state 值。这些规则限制了开发者可以做的事情，并有助于为编译器优化开辟一个安全的空间。

当然，我们理解开发者有时会稍微改变规则，我们的目标是让 React 编译器尽可能开箱即用地处理更多代码。编译器会尝试检测代码是否严格遵循 React 的规则，并且会在安全的情况下编译代码，或者在不安全的情况下跳过编译。我们正针对 Meta 庞大且多样的代码库进行测试以帮助验证这一方法。

对于希望代码严格遵循 React 规则的开发人员，我们建议[启用严格模式](https://react.dev/reference/react/StrictMode)并[配置 React 的 ESLint 插件](https://react.dev/learn/editor-setup#linting)。这些工具可以帮助捕获 React 代码中的细微错误，从而提高应用程序的质量，并为 React 编译器等即将推出的功能做好准备。我们还在整理 React 规则的文档，并更新我们的 ESLint 插件，以帮助团队理解和应用这些规则，从而创建更强大的应用程序。

要了解编译器的实际应用，您可以查看我们[去年秋天的演讲](https://www.youtube.com/watch?v=qOQClO3g8-Y)。在演讲时，我们尝试在 instagram.com 的一页上使用 React 编译器获得了早期实验数据。从那时起，我们已将编译器运用于 instagram.com 的实际生产环境中。我们也扩大了团队来加速在 Meta 和开源领域的其他应用的推出。我们对未来的道路感到兴奋，并且将在未来几个月内分享更多信息。

## Actions

我们之前分享过，我们正探索使用 Server Actions（服务器操作）从客户端向服务器发送数据的解决方案，这样我们可以执行数据库变更并实现表单。在 Server Actions 开发过程中，我们扩展了这些 API 来支持纯客户端 App 中数据的处理。

我们将这一更广泛的功能集合简称为“Actions”。Actions 允许你将一个函数传递给 DOM 元素，例如 `<form/>`：

```jsx
<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>
```

`action` 函数可以同步或异步操作。你可以使用标准 JavaScript 在客户端定义它们，也可以使用 `'use server'` 指令在服务器上定义。使用 `action` 时，React 会管理数据提交的生命周期，提供例如 `useFormStatus` 和 `useFormState` 等 hooks，访问表单操作的当前状态和响应。

默认情况下，Actions 在 [transition](https://react.dev/reference/react/useTransition) 里提交，这样在处理 Actions 时，可以保证当前页面的交互性。由于 Actions 支持异步函数，我们还添加了在 transitions 中使用 `async/await` 的功能。这允许你在类似 `fetch` 等异步请求启动时，显示 transition 的 `isPending` 状态的待定 UI，并在应用更新的整个过程中显示待定 UI。

除了 Actions 外，我们还引入了一项名为 `useOptimistic` 的功能用于管理积极状态更新。通过这个钩子，你可以应用临时更新，一旦最终状态提交，更新会自动恢复。对于 Actions 来说，这允许你在客户端乐观地设置数据的最终状态，假设提交是成功的，并在从服务器收到数据后还原到该值。它使用常规的 `async/await` 工作，所以无论你是在客户端使用 `fetch` ，还是在服务器使用 Server Action，它的工作方式都是相同的。

库作者可以使用 `useTransition` 在自己的组件中实现自定义 `action={fn}` props。我们的目的是让库在设计组件 API 时采用 Actions 模式，为 React 开发者提供一致的体验。例如，如果您的库提供了 `<Calendar onSelect={eventHandler}>` 组件，也请考虑暴露 `<Calendar selectAction={action}>` API。

虽然我们最初聚焦于于客户端-服务器数据传输的 Server Actions，但我们的 React 理念是在所有平台和环境中提供相同的编程模型。如果可以的话，如果我们在客户端引入一项功能，我们的目标是使其也可以在服务器上运行，反之亦然。这一理念使我们能够创建一组 API，无论您的 App 在哪运行，它们都可以奏效，从而使以后能够更轻松地升级到不同的环境。

Actions 现已在 Canary 通道中提供，并将在 React 的下个版本中发布。

## React Canary 新功能

我们引入了 [React Canaries](https://react.dev/blog/2023/05/03/react-canaries) 作为一种可以在设计接近最终版本后立即采用各个新型稳定功能，然后再以稳定的语义版本发布的选择。

Canary 改变了我们开发 React 的方式。此前，功能会在 Meta 内部私下研发和构建，因此用户仅能在稳定版发布时才看到最终的打磨产品。有了 Canaries，我们正在社区的辅助下公开构建，以完成我们在 React Labs 博客系列中分享的功能。这意味着您会更快了解到新功能，因为此时它们正在锅里，而不是已经出锅。

React Server Components（React 服务器组件）、Asset Loading（资源加载）、Document Metadata（文档元数据）和 Actions 都已经在 React Canary 中发布，我们已经在 react.dev 上为这些功能添加了文档：

- 指令：`"use client"` 和 `"use server"` 是专为全栈 React 框架设计的打包器功能。它们标记两个环境之间的“分割点”：`"use client"` 表明打包器生成 `<script>` 标签（比如 [Astro Island](https://docs.astro.build/en/concepts/islands/#creating-an-island)），而 `"use server"` 告诉打包器生成 POST 端点（比如 [tRPC Mutations](https://trpc.io/docs/concepts)）。它们一起让我们可以编写可复用组件，这些组件将客户端交互与相关的服务器端逻辑组合在一起。
- 文档元数据：我们添加了对在组件树中任意位置渲染 `<title>`、`<meta>` 和 `<link>` 标签的内置支持。它们在所有环境中都殊途同归，包括完全客户端代码、SSR 和 RSC。这为 [React Helmet](https://github.com/nfl/react-helmet) 等库开创的功能提供了内置支持。
- 资源加载：我们将 Suspense 于样式表、字体和脚本等资源的加载生命周期集成在一起，这样 React 会通过考虑它们来确定 `<style>`、`<link>` 和 `<script>` 是否已经准备好加载并展示。我们还添加了新的[资源加载 API](https://react.dev/reference/react-dom#resource-preloading-apis)，比如 `proload` 和 `preinit`，从而更好地控制资源何时加载和初始化。
- Actions：我们添加了 Actions 来管理从客户端向服务器发送数据。我们可以将 `action` 添加到 `<form/>` 等元素，使用 `useFormStatus` 访问状态，使用 `useFormState` 处理结果，并使用 `useOptimistic` 积极更新 UI。

由于这些功能“梦幻联动”，因此很难在稳定频道中单独发布它们。在没有访问表单状态的补充钩子的情况下，发布 Actions 会限制其实际可用性。在不集成 Server Actions 的情况下引入 React Server Components 会使服务器上的数据修改变得复杂。

在我们向稳定通道发布一组功能之前，我们需要确保它们能够协同工作，并且开发者拥有在生产中使用它们所需的一切。 React Canaries 允许我们单独开发这些功能，并逐步发布稳定的 API，直到整个功能集完成。

React Canary 中当前的功能集已完成并准备发布。

## React 下一个主版本：React 19

经过数年迭代，`react@canary` 现已准备好交付给 `react@latest`。上述新功能与您的 App 运行的任何环境兼容，提供生产使用所需的一切。由于资源加载和文档元数据对于某些 App 而言可能是一个重大变化，因此 React 的下个版本会是一个主要版本：**React 19**。

为发布做准备还有更多工作要做。在 React 19 中，我们还添加了长期要求的改进，这些改进需要重大更改，比如对 Web Components 的支持。我们现在的重点是落实这些更改，准备发布，最终确定新功能的文档，并发布所包含内容的公告。

在接下来的几个月中，我们会共享有关 React 19 包含的所有内容、如何采用新客户端功能，以及如何构建对 React Server Components 的支持的更多信息。

## Offscreen（重命名为 Activity）

自上次更新以来，我们正在研究的一项功能从“Offscreen”重命名为“Activity”。“Offscreen”这个名称意味着，它仅适用于 App 中不可见的部分，但在研究该功能时，我们意识到 App 的某些部分可能是可见但未激活的，比如模态框后面的内容。新名称更准确地反映了将 App 的某些部分标记为“激活”或“失活”的行为。

Activity 仍在研发中，我们剩下的工作是最终确定向库开发者暴露的原语。我们已经取消了该领域的优先级，同时聚焦于更完整的交付功能。

Vue3 - 渐进式 JavaScript 框架

shallowRef 与 shallowReactive

props

Vue3 - 渐进式
JavaScript 框架