Vue3 简介
Vue3 是 Vue.js 的最新版本，于 2020 年 9 月 18 日正式发布。Vue3 相比 Vue2 有很多改进和优化，包括但不限于：
更快的渲染速度：Vue3 通过使用 Proxy 代理对象和优化虚拟 DOM 算法等方式，提高了渲染性能。
更小的体积：Vue3 的体积比 Vue2 更小，打包后的文件更小，加载速度更快。
更好的类型支持：Vue3 对 TypeScript 的支持更加友好，提供了更好的类型支持。
更好的组合式 API：Vue3 提供了更好的组合式 API，使得组件的复用和维护更加方便。
更好的 Tree-shaking 支持：Vue3 对 Tree-shaking 的支持更加完善，可以更好地优化打包后的代码。
总之，Vue3 是一个更加优秀的版本，可以帮助开发者更好地构建高性能、易维护的 Web 应用程序。
Vue API 风格
Vue API 风格主要有两种：对象风格和函数风格。
1.对象风格
对象风格是 Vue 2.x 版本的 API 风格，它将 Vue 实例作为一个对象，通过对象的属性和方法来操作 Vue 实例。例如：
var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { showMessage: function () { alert(this.message) } }})vm.message = 'Hello World!'vm.showMessage()
复制代码
在上面的代码中，我们使用对象风格的 API 来创建 Vue 实例，设置数据和方法，并通过 vm 对象来操作 Vue 实例。
2.函数风格
函数风格是 Vue 3.x 版本的 API 风格，它将 Vue 实例作为一个函数，通过函数的参数和返回值来操作 Vue 实例。例如：
import { createApp } from 'vue'const app = createApp({ data() { return { message: 'Hello Vue!' } }, methods: { showMessage() { alert(this.message) } }})const vm = app.mount('#app')vm.message = 'Hello World!'vm.showMessage()
复制代码
在上面的代码中，我们使用函数风格的 API 来创建 Vue 实例，设置数据和方法，并通过 app.mount()方法来挂载 Vue 实例，然后通过 vm 对象来操作 Vue 实例。
总的来说，函数风格的 API 更加简洁和易于理解，而且更加符合现代 JavaScript 的编程风格。因此，Vue 3.x 版本的 API 采用了函数风格。
Vue3 开发前的准备
在开始使用 Vue3 进行开发之前，需要进行以下准备工作：
安装 Node.js 和 npm
Vue3 需要 Node.js 和 npm 的支持，因此需要先安装它们。可以在 Node.js 官网下载对应版本的安装包进行安装。
安装 Vue CLI
Vue CLI 是 Vue.js 官方提供的脚手架工具，可以帮助我们快速创建 Vue 项目。可以使用以下命令全局安装 Vue CLI：
选择编辑器
选择一个适合自己的编辑器进行开发，推荐使用 Visual Studio Code，它有很多 Vue 相关的插件和工具。
学习 Vue 基础知识
在使用 Vue3 进行开发之前，需要先掌握 Vue 的基础知识，包括 Vue 的核心概念、Vue 组件、Vue 指令、Vue 生命周期等。
学习 TypeScript
Vue3 使用 TypeScript 进行开发，因此需要先学习 TypeScript 的基础知识，包括 TypeScript 的数据类型、接口、类、泛型等。
总的来说，学习 Vue3 需要一定的前置知识，需要掌握 Node.js、npm、Vue CLI、编辑器、Vue 基础知识和 TypeScript 等知识点。
vue3 项目目录结构
Vue3 项目的目录结构与 Vue2 有些不同，主要是因为 Vue3 使用了新的模块化系统和 TypeScript 语言。
以下是一个 Vue3 项目的典型目录结构：
├── public│ ├── index.html│ └── favicon.ico├── src│ ├── assets│ ├── components│ ├── router│ ├── store│ ├── utils│ ├── views│ ├── App.vue│ └── main.ts├── tests├── node_modules├── package.json├── tsconfig.json└── README.md
复制代码
public：存放静态资源文件，如 HTML 文件、图片、图标等。
src：存放源代码文件。
assets：存放静态资源文件，如 CSS、图片、字体等。
components：存放 Vue 组件文件。
router：存放 Vue Router 路由文件。
store：存放 Vuex 状态管理文件。
utils：存放工具函数文件。
views：存放页面组件文件。
App.vue：根组件文件。
main.ts：入口文件，包括 Vue 实例的创建和挂载等。
tests：存放测试文件。
node_modules：存放项目依赖的第三方库。
package.json：存放项目的配置信息和依赖库信息。
tsconfig.json：存放 TypeScript 编译器的配置信息。
README.md：项目说明文件。
总的来说，Vue3 项目的目录结构与 Vue2 有些不同，但是基本的结构还是相似的，包括静态资源文件、源代码文件、测试文件、依赖库信息等。
vue3 模板语法
Vue3 的模板语法与 Vue2 的模板语法基本相同，但也有一些变化。以下是 Vue3 的模板语法：
插值表达式
Vue3 的插值表达式使用{{}}，例如：
指令
Vue3 的指令使用v-前缀，例如：
<input v-model="message">
复制代码
常用的指令包括：
v-if：条件渲染。
v-for：循环渲染。
v-bind：绑定属性。
v-on：绑定事件。
v-model：双向绑定。
计算属性
Vue3 的计算属性使用computed关键字，例如：
<template> <div>{{ reversedMessage }}</div></template><script>export default { data() { return { message: 'Hello World' } }, computed: { reversedMessage() { return this.message.split('').reverse().join('') } }}</script>
复制代码
监听器
Vue3 的监听器使用watch关键字，例如：
<template> <div>{{ message }}</div></template><script>export default { data() { return { message: 'Hello World' } }, watch: { message(newValue, oldValue) { console.log(newValue, oldValue) } }}</script>
复制代码
生命周期
Vue3 的生命周期与 Vue2 基本相同，但是使用了新的 API。例如：
<template> <div>{{ message }}</div></template><script>import { onMounted, onUpdated, onUnmounted } from 'vue'export default { data() { return { message: 'Hello World' } }, setup() { onMounted(() => { console.log('mounted') }) onUpdated(() => { console.log('updated') }) onUnmounted(() => { console.log('unmounted') }) }}</script>
复制代码
总的来说，Vue3 的模板语法与 Vue2 基本相同，但是使用了新的 API，包括computed、watch和生命周期等。
vue3 属性绑定
在 Vue3 中，属性绑定使用v-bind:或简写的:，例如：
<template> <div :class="className"></div></template><script>export default { data() { return { className: 'red' } }}</script>
复制代码
上面的代码中，:class绑定了一个名为className的 data 属性，这个属性的值为'red'，所以<div>元素会被添加一个class属性，值为'red'。
除了绑定 data 属性，还可以绑定表达式、计算属性、甚至是方法的返回值。例如：
<template> <div :class="isActive ? 'active' : 'inactive'"></div> <div :class="getClass()"></div></template><script>export default { data() { return { isActive: true } }, methods: { getClass() { return this.isActive ? 'active' : 'inactive' } }}</script>
复制代码
上面的代码中，:class绑定了一个三元表达式和一个方法的返回值，这两个值都可以被作为class属性的值。
需要注意的是，在 Vue3 中，绑定属性时，可以使用v-bind:或简写的:，但是在绑定事件时，必须使用v-on:或简写的@。例如：
<template> <button @click="handleClick">Click me</button></template><script>export default { methods: { handleClick() { console.log('clicked') } }}</script>
复制代码
上面的代码中，@click绑定了一个handleClick方法，这个方法会在按钮被点击时被调用。
vue3 条件渲染
Vue3 中的条件渲染和 Vue2 类似，使用v-if和v-else指令来控制元素的显示和隐藏。
示例代码如下：
<template> <div> <div v-if="show">显示内容</div> <div v-else>隐藏内容</div> </div></template><script>export default { data() { return { show: true } }}</script>
复制代码
上面的代码中，根据show的值来决定显示哪个<div>元素。
除了v-if和v-else，还有v-else-if可以用来实现多个条件的判断。
示例代码如下：
<template> <div> <div v-if="type === 'A'">类型A</div> <div v-else-if="type === 'B'">类型B</div> <div v-else-if="type === 'C'">类型C</div> <div v-else>未知类型</div> </div></template><script>export default { data() { return { type: 'B' } }}</script>
复制代码
上面的代码中，根据type的值来决定显示哪个<div>元素。
需要注意的是，v-if是惰性的，只有当条件为真时才会渲染元素，否则不会渲染。而v-show则是直接控制元素的显示和隐藏，不管条件是否为真，元素都会被渲染，只是样式被设置为display: none。
vue3 列表渲染
Vue3 中的列表渲染和 Vue2 类似，使用v-for指令来遍历数组或对象，并生成对应的元素。
示例代码如下：
<template> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul></template><script>export default { data() { return { list: ['item1', 'item2', 'item3'] } }}</script>
复制代码
上面的代码中，使用v-for指令遍历list数组，并生成对应的<li>元素。
除了数组，也可以遍历对象，例如：
<template> <ul> <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li> </ul></template><script>export default { data() { return { obj: { key1: 'value1', key2: 'value2', key3: 'value3' } } }}</script>
复制代码
上面的代码中，使用v-for指令遍历obj对象，并生成对应的<li>元素。
需要注意的是，每个v-for都需要指定一个唯一的key属性，用来标识每个元素的唯一性，以便在更新时能够正确地识别每个元素。
vue3 通过 key 管理状态
在 Vue3 中，通过key属性可以管理组件或元素的状态。当一个组件或元素的key属性发生变化时，Vue 会认为它是一个不同的组件或元素，从而重新渲染它。
示例代码如下：
<template> <div> <button @click="toggle">切换</button> <div v-if="show" :key="1">显示内容</div> <div v-else :key="2">隐藏内容</div> </div></template><script>export default { data() { return { show: true } }, methods: { toggle() { this.show = !this.show } }}</script>
复制代码
上面的代码中，使用key属性来管理<div>元素的状态。当show变量的值发生变化时，<div>元素的key属性也会发生变化，从而重新渲染<div>元素。
需要注意的是，key属性的值必须是唯一的，不能重复。如果重复了，会导致 Vue 无法正确地识别每个组件或元素的状态，从而导致渲染错误。
vue3 事件处理
在 Vue3 中，事件处理的方式与 Vue2 相似，可以使用@或v-on指令来绑定事件。不同之处在于，Vue3 中取消了.sync修饰符，同时提供了新的修饰符和事件 API。
绑定事件
可以使用@或v-on指令来绑定事件，语法与 Vue2 相同。示例如下：
<template> <button @click="handleClick">Click me</button></template>
<script>export default { methods: { handleClick() { console.log('Button clicked!') } }}</script>
复制代码
上面的代码中，使用@click指令来绑定handleClick方法，当按钮被点击时，会触发handleClick方法。
事件修饰符
Vue3 中提供了新的事件修饰符，包括.stop、.prevent、.capture、.self、.once和.passive。示例如下：
<template> <div @click.stop="handleClick">Click me</div></template>
<script>export default { methods: { handleClick() { console.log('Div clicked!') } }}</script>
复制代码
上面的代码中，使用.stop修饰符来阻止事件冒泡，当div元素被点击时，不会触发其父元素的点击事件。
动态事件名
在 Vue3 中，可以使用方括号来绑定动态事件名。示例如下：
<template> <button @[eventName]="handleClick">Click me</button></template><script>export default { data() { return { eventName: 'click' } }, methods: { handleClick() { console.log('Button clicked!') } }}</script>
复制代码
上面的代码中，使用@[eventName]指令来绑定动态事件名，事件名为eventName的值。
自定义事件
在 Vue3 中，可以使用createApp方法的provide和inject选项来实现自定义事件的传递。示例如下：
// App.vue<template> <button @click="handleClick">Click me</button></template><script>import { provide } from 'vue'import EventBus from './EventBus'export default { setup() { provide('eventBus', EventBus) }, methods: { handleClick() { EventBus.emit('customEvent', 'Hello, Vue3!') } }}</script>// EventBus.jsimport mitt from 'mitt'const EventBus = mitt()export default EventBus// ChildComponent.vue<template> <div>{{ message }}</div></template><script>import { inject } from 'vue'export default { setup() { const eventBus = inject('eventBus') const message = ref('') eventBus.on('customEvent', (data) => { message.value = data }) return { message } }}</script>
复制代码
上面的代码中，使用provide方法将事件总线对象EventBus注入到根组件中，然后在子组件中使用inject方法获取事件总线对象，并通过on方法监听自定义事件customEvent，当事件触发时，更新message的值。
vue3 事件传参
在 Vue3 中，事件传参的方式和 Vue2 基本相同，可以使用$event来传递事件对象，也可以使用函数来传递自定义参数。
示例代码如下：
<template> <div> <button @click="handleClick($event, '参数')">点击</button> </div></template><script>export default { methods: { handleClick(event, arg) { console.log(event) // 输出事件对象 console.log(arg) // 输出自定义参数 } }}</script>
复制代码
上面的代码中，使用$event来传递事件对象，使用'参数'来传递自定义参数。
另外，如果需要在事件处理函数中访问组件实例，可以使用箭头函数来绑定作用域，例如：
<template> <div> <button @click="() => handleClick('参数')">点击</button> </div></template><script>export default { methods: { handleClick(arg) { console.log(this) // 输出组件实例 console.log(arg) // 输出自定义参数 } }}</script>
复制代码
上面的代码中，使用箭头函数来绑定作用域，从而在事件处理函数中访问组件实例。
vue3 事件修饰符
在 Vue3 中，事件修饰符的使用方式和 Vue2 基本相同，可以通过在事件名后面添加.修饰符的方式来使用事件修饰符。
常用的事件修饰符包括：
示例代码如下：
<template> <div> <button @click.stop="handleClick">点击</button> <a href="#" @click.prevent="handleClick">链接</a> <div @click.capture="handleClick">容器</div> <button @click.self="handleClick">点击</button> <button @click.once="handleClick">点击</button> <div @scroll.passive="handleScroll">滚动</div> </div></template><script>export default { methods: { handleClick() { console.log('点击事件') }, handleScroll() { console.log('滚动事件') } }}</script>
复制代码
上面的代码中，使用不同的事件修饰符来控制事件的行为。例如，使用.stop修饰符来阻止事件冒泡，使用.prevent修饰符来阻止事件默认行为，使用.capture修饰符来使用事件捕获模式，使用.self修饰符来只在事件目标自身触发时触发事件，使用.once修饰符来只触发一次事件，使用.passive修饰符来告诉浏览器该事件不会调用preventDefault()方法，可以优化页面滚动性能。
vue3 计算属性
在 Vue3 中，计算属性的使用方式和 Vue2 基本相同，可以通过在组件的computed选项中定义计算属性来计算和缓存值。
示例代码如下：
<template> <div> <p>商品数量：{{ quantity }}</p> <p>商品总价：{{ totalPrice }}</p> </div></template><script>export default { data() { return { price: 10, count: 2 } }, computed: { quantity() { return this.count }, totalPrice() { return this.price * this.count } }}</script>
复制代码
上面的代码中，使用computed选项来定义计算属性quantity和totalPrice，分别计算商品数量和商品总价。
在模板中，可以像访问普通属性一样访问计算属性，例如{{ quantity }}和{{ totalPrice }}。
需要注意的是，在 Vue3 中，计算属性的返回值可以是一个函数，这样可以实现动态计算属性。示例代码如下：
<template> <div> <p>商品数量：{{ quantity }}</p> <p>商品总价：{{ totalPrice }}</p> </div></template><script>export default { data() { return { price: 10, count: 2, discount: 0.8 } }, computed: { quantity() { return this.count }, totalPrice() { return () => this.price * this.count * this.discount } }}</script>
复制代码
上面的代码中，计算属性totalPrice返回一个函数，这个函数会动态计算商品总价，考虑到折扣可能会变化，因此需要动态计算商品总价。
vue3 class 绑定
在 Vue3 中，可以使用v-bind:class指令来绑定一个对象或数组来动态地设置一个元素的 class 属性。
下面是使用对象语法绑定 class 的示例代码：
<template> <div :class="{ active: isActive, 'text-danger': hasError }">Hello, Vue3!</div></template><script>export default { data() { return { isActive: true, hasError: false } }}</script>
复制代码
上面的代码中，使用:class指令来绑定一个对象，这个对象的属性名是 class 名称，属性值是一个布尔值，表示是否应用这个 class。在这个示例中，如果isActive为true，则会应用active这个 class，如果hasError为true，则会应用text-danger这个 class。
下面是使用数组语法绑定 class 的示例代码：
<template> <div :class="[isActive ? 'active' : '', errorClass]">Hello, Vue3!</div></template><script>export default { data() { return { isActive: true, errorClass: 'text-danger' } }}</script>
复制代码
上面的代码中，使用:class指令来绑定一个数组，这个数组的元素可以是字符串或对象。如果数组元素是字符串，则表示应用这个 class；如果数组元素是对象，则表示应用这个对象中的 class。
在这个示例中，如果isActive为true，则会应用active这个 class，如果errorClass为text-danger，则会应用text-danger这个 class。
需要注意的是，在 Vue3 中，可以使用动态组件来动态渲染不同的组件，这个功能可以使用<component>元素和is特性来实现。示例代码如下：
<template> <div> <button @click="currentComponent = 'ComponentA'">ComponentA</button> <button @click="currentComponent = 'ComponentB'">ComponentB</button> <component :is="currentComponent"></component> </div></template><script>import ComponentA from './ComponentA.vue'import ComponentB from './ComponentB.vue'export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: 'ComponentA' } }}</script>
复制代码
上面的代码中，使用<component>元素和is特性来动态渲染不同的组件。在这个示例中，点击ComponentA按钮会渲染ComponentA组件，点击ComponentB按钮会渲染ComponentB组件。
vue3 style 绑定
在 Vue3 中，可以使用v-bind指令或简写的:来动态绑定样式。
绑定单个样式
可以使用对象语法来绑定单个样式，对象的属性名为样式名，属性值为样式值。示例如下：
<template> <div :style="{ color: textColor }">Hello, Vue3!</div></template><script>export default { data() { return { textColor: 'red' } }}</script>
复制代码
上面的代码中，使用:style指令来绑定color样式，样式的值为textColor的值。
绑定多个样式
可以使用对象语法来绑定多个样式，对象的属性名为样式名，属性值为样式值。示例如下：
<template> <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello, Vue3!</div></template><script>export default { data() { return { textColor: 'red', fontSize: 16 } }}</script>
复制代码
上面的代码中，使用:style指令来绑定color和fontSize两个样式，样式的值分别为textColor和fontSize的值。
绑定样式数组
可以使用数组语法来绑定多个样式，数组中的元素为样式对象。示例如下：
<template> <div :style="[baseStyles, customStyles]">Hello, Vue3!</div></template><script>export default { data() { return { baseStyles: { color: 'red', fontSize: '16px' }, customStyles: { fontWeight: 'bold' } } }}</script>
复制代码
上面的代码中，使用:style指令来绑定baseStyles和customStyles两个样式对象，样式的值为两个对象的合并结果。
绑定样式对象
可以使用计算属性来动态绑定样式对象。示例如下：
<template> <div :style="computedStyles">Hello, Vue3!</div></template><script>export default { data() { return { textColor: 'red', fontSize: 16 } }, computed: { computedStyles() { return { color: this.textColor, fontSize: this.fontSize + 'px' } } }}</script>
复制代码
上面的代码中，使用计算属性computedStyles来动态绑定样式对象，样式的值为计算属性的返回值。
文章转载自：明志德道
原文链接：https://www.cnblogs.com/for-easy-fast/p/17462728.html
评论