📚 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 等选项。它是在组件实例创建之前执行的函数，用于设置组件的初始状态、生命周期钩子、事件处理函数等。
示例代码:
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
return {
message
};
}
}2️⃣ setup 的返回值:
2️⃣ setup 函数必须返回一个对象，该对象中包含了组件中需要响应式地跟踪的数据、方法等内容。
示例代码:
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 提供了一些语法糖，使得创建响应式数据更加简洁和方便。
示例代码:
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
return { count };
}
}5️⃣ ref 创建基本类型的响应式数据:
5️⃣ 使用 ref 函数可以创建一个基本类型的响应式数据。
示例代码:
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
return { count };
}
}6️⃣ reactive 创建对象类型的响应式数据:
6️⃣ 使用 reactive 函数可以创建一个对象类型的响应式数据。
示例代码:
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello, Vue 3!'
});
return { state };
}
}7️⃣ ref 创建对象类型的响应式数据:
7️⃣ 尽管 ref 函数主要用于创建基本类型的响应式数据，但也可以使用 ref 来包裹对象，使其成为响应式数据。
示例代码:
import { ref } from 'vue';
export default {
setup() {
const obj = ref({ count: 0 });
return { obj };
}
}8️⃣ ref 对比 reactive:
8️⃣ ref 和 reactive 都可以用于创建响应式数据，但它们有一些区别。ref 创建的是一个包装后的值，而 reactive 创建的是一个代理对象。
示例代码:
import { ref, reactive } from 'vue';
export default {
setup() {
const count = ref(0);
const state = reactive({ count: 0 });
return { count, state };
}
}9️⃣computed：
使用computed函数可以创建计算属性，它接受一个函数作为参数，并返回一个计算属性的引用。
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等函数，用于在组件的生命周期中执行操作。
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 的概述及其常见用法的一些笔记内容，包括相关的代码示例。希望对你有所帮助！📚🚀👋
