## 前言 Vue3 带来了很多新特性和改进，如果你是学不动了，没空学了，又或者是有些同学现在根本还没机会用上vue3，那就先把下面这些简单的先过一遍，后续在工作中再慢慢去拓宽和深入vue3 ### 1. `v-model` 双向绑定在 Vue 3 中， `v-model` 的升级使用，使用了新的语法糖，可以更加直观的实现双向绑定功能。 ``` ``` ### 2. `teleport` 组件传送门 `teleport` 组件可以让我们将组件渲染到指定的目标 DOM 节点上，便于在布局上灵活使用。可以使用 `teleport` 将某个组件渲染到指定元素的父组件之前或之后。 ``` ``` ### 3. `watchEffect` 监听响应式变量与 `watch` 监听不同，`watchEffect` 监听响应变量的改变并直接执行回调函数。如果回调函数中用到了响应式变量，下次变化时会自动触发回调函数。 ``` ``` ### 4. `createApp` 创建实例与 Vue 2 中的 `new Vue` 不同，Vue 3 中使用 `createApp` 函数创建实例。该函数返回一个应用实例，可以通过 `.mount()` 方法将其挂载到指定的 DOM 元素上。 ```

``` ### 5. Composition API Vue 3 中新增了 Composition API，它使得组件逻辑可以更好的封装和管理。我们可以使用 `setup` 函数来定义数据和方法，可以更容易地重用相同逻辑的代码段。此外，使用 Composition API 还可以更好地管理响应式数据。 ``` ``` ### 6. `provide` 和 `inject` 属性在 Vue 3 中，我们可以使用 `provide` 和 `inject` 属性在组件间传递数据。`provide` 允许更高级别的组件提供数据，子组件可以使用 `inject` 从父组件中获取数据。 ``` ``` ### 7. `ref` 属性 Vue 3 通过 `ref` 属性提供了对元素和组件实例的访问。`ref` 可以用于获取 HTML 元素，也可以用于在组件之间传递非响应式数据。 ``` ``` ### 8. 直接访问响应式数据 Vue 3 提供了另一种直接访问响应式数据的方式，即在模板中使用 `{{ $data.x }}` 代替 `{{ x }}`。 ``` ``` ### 9. ` ``` ### 10. `` 和 `