📚 Vue 3 快速上手指南
在本文中，我将介绍 Vue 3 的基础知识，我们将了解1.setup
📚 如果你想深入学习 Vue 3，建议阅读官方文档并尝试更复杂的示例和项目。
👉 可以通过以下链接访问 Vue 3 官方文档：
Vue.js - 渐进式 JavaScript 框架 | Vue.js
🌟 提前祝你学习愉快，享受 Vue 3 的编程之旅！
📝 Vue 3 笔记
1️⃣ setup 概述:
1️⃣ setup 函数是 Vue 3 中新增的一个选项，用于替代 Vue 2 中的 data、methods、computed 等选项。它是在组件实例创建之前执行的函数，用于设置组件的初始状态、生命周期钩子、事件处理函数等。
示例代码:
javascript">import { ref } from 'vue';export default {setup() {const message = ref('Hello, Vue 3!');return {message};}
}2️⃣ setup 的返回值:
2️⃣ setup 函数必须返回一个对象，该对象中包含了组件中需要响应式地跟踪的数据、方法等内容。
示例代码:
javascript">import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment};}
}3️⃣ setup 与 Options API 对比:
3️⃣ Options API 是 Vue 2 中的传统方式，而 setup 则更加灵活，可以更自由地组织代码，并且能够更好地与 TypeScript 配合使用。
4️⃣ setup 的语法糖:
4️⃣ 在 setup 中，可以使用 ref、reactive 等函数创建响应式数据。Vue 3 提供了一些语法糖，使得创建响应式数据更加简洁和方便。
示例代码:
javascript">import { ref } from 'vue';export default {setup() {const count = ref(0);return { count };}
}5️⃣ ref 创建基本类型的响应式数据:
5️⃣ 使用 ref 函数可以创建一个基本类型的响应式数据。
示例代码:
javascript">import { ref } from 'vue';export default {setup() {const count = ref(0);return { count };}
}6️⃣ reactive 创建对象类型的响应式数据:
6️⃣ 使用 reactive 函数可以创建一个对象类型的响应式数据。
示例代码:
javascript">import { reactive } from 'vue';export default {setup() {const state = reactive({count: 0,message: 'Hello, Vue 3!'});return { state };}
}7️⃣ ref 创建对象类型的响应式数据:
7️⃣ 尽管 ref 函数主要用于创建基本类型的响应式数据，但也可以使用 ref 来包裹对象，使其成为响应式数据。
示例代码:
javascript">import { ref } from 'vue';export default {setup() {const obj = ref({ count: 0 });return { obj };}
}8️⃣ ref 对比 reactive:
8️⃣ ref 和 reactive 都可以用于创建响应式数据，但它们有一些区别。ref 创建的是一个包装后的值，而 reactive 创建的是一个代理对象。
示例代码:
javascript">import { ref, reactive } from 'vue';export default {setup() {const count = ref(0);const state = reactive({ count: 0 });return { count, state };}
}9️⃣computed：
使用computed函数可以创建计算属性，它接受一个函数作为参数，并返回一个计算属性的引用。
javascript">import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const squaredCount = computed(() => count.value * count.value); // 使用computed语法糖创建计算属性return { count, squaredCount };}
}
🔟生命周期钩子：
Vue 3提供了onMounted、onUpdated和onUnmounted等函数，用于在组件的生命周期中执行操作。
javascript">
import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const message = ref('Hello, Vue 3!');// 使用onMounted和onUnmounted语法糖定义生命周期钩子onMounted(() => {console.log('Component mounted');});onUnmounted(() => {console.log('Component unmounted');});return { message };}
}以上是关于 Vue 3 中 setup 的概述及其常见用法的一些笔记内容，包括相关的代码示例。希望对你有所帮助！📚🚀👋
