前言Vue3 带来了很多新特性和改进，如果你是学不动了，没空学了，又或者是有些同学现在根本还没机会用上vue3，那就先把下面这些简单的先过一遍，后续在工作中再慢慢去拓宽和深入vue3 1. v-model 双向绑定在 Vue 3 中， v-model 的升级使用，使用了新的语法糖，可以更加直观的实现双向绑定功能。 2. teleport 组件传送门teleport 组件可以让我们将组件渲染到指定的目标 DOM 节点上，便于在布局上灵活使用。可以使用 teleport 将某个组件渲染到指定元素的父组件之前或之后。 我会渲染在 body 中 3. watchEffect 监听响应式变量与 watch 监听不同，watchEffect 监听响应变量的改变并直接执行回调函数。如果回调函数中用到了响应式变量，下次变化时会自动触发回调函数。 {{value}} 4. createApp 创建实例与 Vue 2 中的 new Vue 不同，Vue 3 中使用 createApp 函数创建实例。该函数返回一个应用实例，可以通过 .mount() 方法将其挂载到指定的 DOM 元素上。 5. Composition APIVue 3 中新增了 Composition API，它使得组件逻辑可以更好的封装和管理。我们可以使用 setup 函数来定义数据和方法，可以更容易地重用相同逻辑的代码段。此外，使用 Composition API 还可以更好地管理响应式数据。 {{value}} 6. provide 和 inject 属性在 Vue 3 中，我们可以使用 provide 和 inject 属性在组件间传递数据。provide 允许更高级别的组件提供数据，子组件可以使用 inject 从父组件中获取数据。 {{text}} {{displayText}} 7. ref 属性Vue 3 通过 ref 属性提供了对元素和组件实例的访问。ref 可以用于获取 HTML 元素，也可以用于在组件之间传递非响应式数据。 8. 直接访问响应式数据Vue 3 提供了另一种直接访问响应式数据的方式，即在模板中使用 {{ $data.x }} 代替 {{ x }}。 {{ $data.value }} 9. 10. 和 的新语法在 Vue 3 中， 标签和 可以使用更简单的语法进行定义，包括使用 # 符号实现。 #default 插槽内容 #header Header Content #default Main Content #footer Footer Content Header Content Main Content Footer Content 11. 使用 Fragment 进行组件包裹在 Vue 3 中，我们可以使用 Fragment 来包裹组件，Fragment 是空元素，它可以包含任意的子节点，同时不会在输出中渲染。 Child 1 Child 2 12. 使用 readonly 定义只读响应式数据在 Vue 3 中，可以通过 readonly 定义只读响应式数据。这样可以确保数据不被变异，并且可以提高性能。 {{ readOnlyValue }} 13. 使用 watch 监听属性变化Vue 3 中的 watch 函数与 Vue 2 中的有所不同。与 Vue 2 中的 watch 函数不同，Vue 3 中的 watch 函数接受一个可选的选项对象，并且在监听期间可以访问先前值和当前值。 {{ evenValue }} 总结我自己平时工作的时候用vue3的机会并不多，对于这种平时用得比较少的，最好的方式就是自己总结一篇笔记，当自己后面翻到这篇笔记的时候就能快速回归vue3的一些使用，以便应用 作者：超神熊猫链接：https://juejin.cn/post/7209839016967028773