VUE3 入门教程 Vue 3.0 介绍

2024-02-25 开发教程 VUE3 入门教程匿名 0℃

INFO

刚接触 Vue.js？先从基础指南开始吧。

本指南主要是为有 Vue 2 经验的用户希望了解 Vue 3 的新功能和更改而提供的。在试用 Vue 3 之前，你不必从头阅读这些内容。虽然看起来有很多变化，但很多你已经了解和喜欢 Vue 的部分仍是一样的。不过我们希望尽可能全面，并为每处变化提供详细的例子。

#概览

开始学习 Vue 3 Vue Mastery。

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

npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3

npm install -g @vue/cli # OR yarn global add @vue/cli
  vue create hello-vue3
  # select vue 3 preset

Vue 3 中需要关注的一些新功能包括：

提示

我们仍在开发 Vue 3 的专用迁移版本，该版本的行为与 Vue 2 兼容，运行时警告不兼容。如果你计划迁移一个非常重要的 Vue 2 应用程序，我们强烈建议你等待迁移版本完成以获得更流畅的体验。

下面列出了从 2.x 开始的重大更改：

渲染函数 API 改变
$scopedSlotsproperty 已删除，所有插槽都通过 $slots作为函数暴露
自定义指令 API 已更改为与组件生命周期一致
一些转换 class 被重命名了：
- v-enter-> v-enter-from
- v-leave-> v-leave-from
组件 watch 选项和实例方法 $watch不再支持点分隔字符串路径，请改用计算函数作为参数
在 Vue 2.x 中，应用根容器的 outerHTML将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。VUE3.x 现在使用应用程序容器的 innerHTML。

destroyed生命周期选项被重命名为 unmounted
beforeDestroy生命周期选项被重命名为 beforeUnmount
prop default工厂函数不再有权访问 this是上下文
自定义指令 API 已更改为与组件生命周期一致
data应始终声明为函数
来自 mixin 的 data选项现在可简单地合并
attribute 强制策略已更改
一些过渡 class 被重命名
组建 watch 选项和实例方法 $watch不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
<template>没有特殊指令的标记 (v-if/else-if/else、v-for或 v-slot) 现在被视为普通元素，并将生成原生的 <template>元素，而不是渲染其内部内容。
在 Vue 2.x 中，应用根容器的 outerHTML将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分。