Vue 3 快速上手指南（第二期）

 📚 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 的概述及其常见用法的一些笔记内容，包括相关的代码示例。希望对你有所帮助！📚🚀👋