- A+
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风格主要有两种：对象风格和函数风格。
-
对象风格
对象风格是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实例。
-
函数风格
函数风格是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：
npm install -g @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的插值表达式使用{{}}，例如：
<div>{{ message }}</div>-
指令
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.js import 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基本相同，可以通过在事件名后面添加.修饰符的方式来使用事件修饰符。
常用的事件修饰符包括：
-
.stop：阻止事件冒泡 -
.prevent：阻止事件默认行为 -
.capture：使用事件捕获模式 -
.self：只在事件目标自身触发时触发事件 -
.once：只触发一次事件 -
.passive：告诉浏览器该事件不会调用preventDefault()方法，可以优化页面滚动性能
示例代码如下：
<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来动态绑定样式对象，样式的值为计算属性的返回值。
