学 vue3 通过官方文档更详细，不过阅读本博客，可以更容易理解，且帮你速成！

• 官方文档（记得将API风格偏好切换为 组合式 否则你学的是vue2）
  https://cn.vuejs.org/guide/introduction.html
  

学习前的准备

1. 创建一个 vue3 项目，详见链接
   https://blog.csdn.net/weixin_41192489/article/details/128231728

2. 开启 vue3 的实验性特征

   在项目的 vite.config.ts 中添加 reactivityTransform: true,

   

3. 添加 ts 对 vue3 实验性特征的支持

   在项目的 tsconfig.json 中添加 "types": ["vue/ref-macros"]

   

改用 script setup

与 vue2 不同，vue3 的 js 代码写在

以下代码都在项目的 src\views\AboutView.vue 中测试，启动项目后，浏览器访问
http://127.0.0.1:5173/about 查看效果。

先将 AboutView.vue 初始化为

在这里插入代码片

定义响应式变量 $ref

vue2中写在 data(){} 函数中的变量，vue3中写法如下

// 定义响应式变量 count，初始值为 0
let count = $ref(0);

计算属性 computed

vue2中写在 computed 中的计算属性，vue3中写法如下

import { computed } from "vue";
let firstName = $ref("朝");
let lastName = $ref("阳");
// 当 firstName 或 lastName 变化时，会触发重新计算 fullName 
let fullName = computed(() => {return firstName + lastName;
});

• 计算属性中不能直接使用 reverse() 和 sort() ，因为这两个方法将变更原始数组，正确的用法是在调用这些方法之前创建一个原数组的副本[...numbers]

return [...numbers].reverse()

实用技巧：动态绑定样式

定义方法 function

vue2中写在 methods 中的方法，vue3中写法如下

// 定义方法 increment，每执行一次，count 会自增 1
function increment() {count++;
}

内联事件

逻辑极其简单的方法也可以直接写在元素上

增加1

在方法后加 () 也会被视为内联事件

增加1

此时可以给方法添加参数

按指定参数增加

内联事件访问原生 DOM 事件

需使用 $event

提交

或者使用内联箭头函数

 submit('参数1', event)">提交

方法事件

逻辑比较复杂时，则需给事件绑定方法

展示

此时方法的默认参数为原生 DOM 事件 event

// event 为原生 DOM 事件
function show(event: any) {// 通过 event 可以获取事件相关的各种信息console.log(event);if (event) {// 比如触发事件的标签名称console.log(event.target.tagName);}
}

事件修饰符

• .stop 禁止事件冒泡

效果同 event.stopPropagation()

• .prevent 禁止事件默认行为
  效果同 event.preventDefault()

使用范例：提交表单时不再重新加载页面

• .capture 事件采用捕获模式
  指向内部元素的事件，在被内部元素处理前，先被外部处理

...

• .passive 用于改善移动端设备的滚屏性能
  一般用于触摸事件的监听器

范例：滚动事件的默认行为 (scrolling) 将立即发生而非等待 onScroll 完成，以防其中包含 event.preventDefault()

...

.passive 和 .prevent 不能同时使用，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果同时使用，则 .prevent 会被忽略，并且浏览器会抛出警告。

还可以只使用修饰符，不绑定方法

链式调用事件修饰符

但要注意调用顺序：
@click.prevent.self 阻止元素及其子元素的所有点击事件的默认行为
@click.self.prevent 只会阻止对元素本身的点击事件的默认行为。

常规按键修饰符

.按键名 即可实现指定按键触发事件

• 按键名的格式为 kebab-case 形式，如 PageDown 键需使用 .page-down

常用的按键有以下别名

• .enter
• .tab
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统按键修饰符

• .ctrl
• .alt
• .shift
• .meta
  在 Mac 键盘上，meta 是 Command 键 (⌘)。
  在 Windows 键盘上，meta 键是 Windows 键 (⊞)。

系统按键修饰符与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。如 keyup.ctrl 只会在你按住 ctrl 但松开另一个键时被触发，单独松开 ctrl 键将不会触发。

组合键的实现

Do something

.exact 修饰符

控制触发一个事件所需的确定组合

A
A
A

鼠标按键修饰符

• .left
• .right
• .middle

条件渲染 v-if v-show

多个元素需要使用 v-if 控制渲染时，可以添加