vue3 语法速览
简介
- 刚接触 vue, 看着网上的教学头大? 傻傻分不清到底哪个才是 vue3 的新语法? 你需要的是这篇文章!
- 本文是作者刚接触 vue3 从踩坑到入门的一些记录, 仅供参考, 如有错误, 请指出, 谢谢!
- 本文适合 vue 零基础,想迅速上手 vue 却被网上的 vue2 和 vue3 混杂的教程搞得摸不清楚头脑的同学
- 强烈建议遇到问题时, 查看vue 官方文档! vue 官方文档做了非常好的中文化, 不用担心机翻看不懂.
选项式 API 和组合式 API 的那些不同
构建 SFC(单文件组件)
- Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API. 为了看出它们的区别, 我们举一个简单的例子: 声明一个响应式变量, 在页面中显示, 同时有一个按钮, 点击按钮, 响应式变量加一.
- 选项式 API (Options API): 用包含多个选项的对象来描述组件的逻辑,例如 data、methods 和 mounted
<template>
<button @click="click">Count is: {{ count }}</button>
</template>
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
click() {
this.count++
}
}
}
</script>
- 组合式 API (Composition API):
setup()
函数是组合式 API 的入口点. 使用响应式 API 来声明响应式的状态,并在 setup() 函数中返回, 将其暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性:
<template>
<button @click="click">Count is: {{ count }}</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const click = () => count.value++
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count,click
}
}
}
</script>
- 组合式 API 还提供了更加简洁的语法:
setup
语法糖, 在script
标签中加上setup
属性, 就可以省略setup
函数了, 例如上面的例子可以简写为:
<template>
<button @click="click">Count is: {{ count }}</button>
</template>
<script setup>
import { ref,onMounted } from 'vue'
const count = ref(0)
const click = () => count.value++
</script>
- 看出区别了吗?
- 选项式 API 不需要声明响应式, 用包含多个选项的对象来描述组件的逻辑
- 组合式 API 需要声明响应式, 用 API 函数来描述组件的逻辑
- 选项式 API 和组合式 API 没有优劣之分, 可以相互转换. 使用组合式 API 和
setup
语法糖, 大大减少了代码量, 所以在 vue3 中, 推荐使用组合式 API 和setup
语法糖.
模版引用
ref
属性: vue 是不推荐直接进行 dom 操作的, 但是有时候不得不这么做, 比如想要获取某个 dom 元素的宽高, 这时候就需要用到模版引用.- 还是举个例子, 要获取一个
p
标签- 在
p
标签中增加一个属性ref
, 例如:<p ref="p">我是p标签</p>
- 访问
p
标签:- 选项式 API : 通过
this.$refs.p
获取 - 组合式 API : 用
ref
声明一个和标签中的ref
属性同名的变量:const p = ref()
- 选项式 API : 通过
- 在
钩子函数
-
举个例子: 在组件挂载后, 打印一句话
- 选项式 API : 在
mounted
钩子中打印
<script> export default { mounted() { console.log(`the component is now mounted.`) } } </script>
- 组合式 API : 在
onMounted
钩子中打印
<script setup> import {onMounted} from 'vue' onMounted(() => { console.log(`the component is now mounted.`) }) </script>
- 选项式 API : 在