[JavaScript知识库]Vue3知识点总结()

Vue3与Vue2

vue3 中基本兼容vue2 中的代码，大部分公有 API 的行为和 Vue 2 一致，仅有一小部分例外。使用在 Vue 3 中发生改变或被废弃的特性时会抛出运行时警告。一个特性的兼容性也可以基于单个组件进行开启或禁用。

• 基于 Vue 2 内部 API 或文档中未记载行为的依赖。最常见的情况就是使用?VNodes?上的私有 property。如果你的项目依赖诸如?Vuetify、Quasar?或?Element UI?等组件库，那么最好等待一下它们的 Vue 3 兼容版本。

• 对 IE11 的支持：Vue 3 已经官方放弃对 IE11 的支持。如果仍然需要支持 IE11 或更低版本，那你仍需继续使用 Vue 2。

• 服务端渲染：该迁移构建版本可以被用于服务端渲染，但是迁移一个自定义的服务端渲染设置有更多工作要做。大致的思路是将?vue-server-renderer?替换为?@vue/server-renderer。Vue 3 不再提供一个包渲染器，且我们推荐使用 Vite?以支持 Vue 3 服务端渲染。如果你正在使用?，那最好等待一下 Nuxt 3。

快速开始

如果你想要在一个新项目里快速尝试 Vue 3：

• 通过 CDN：<script src="https://unpkg.com/vue@next"></script>

• Codepen?上的浏览器内试验田

• CodeSandbox?上的浏览器内沙盒

• 通过脚手架?Vite：

  npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue
  

  1

• 通过脚手架?vue-cli：

  npm install -g @vue/cli # 或 yarn global add @vue/cli
  vue create hello-vue3
  # 选择 vue 3 preset

Vue3优点?

优点：
按需引用
组合式api：更加接近原生js，更加直观，没有this，更有效的降低了代码的耦合性

Vue3的启动方式

var app = createApp(App);
app.use(router).use(store).mount('#app')

全局方法定义

app.config.globalProperties.$mysay = function(){}

?