vue3函数、变量

Vue 3的组合式API（Composition API）提供了更灵活的方式来管理函数和变量的作用范围。以下是关于Vue 3中函数、变量的概念及其作用范围的解释。

• 变量的作用范围：局部变量、响应式变量、全局变量。
• 函数的作用范围：局部函数、暴露给模板的函数、全局函数。
• 模块化：通过自定义Hook封装逻辑，隔离作用范围，提高代码的可维护性。
• 合理使用：尽量使用局部变量和函数，避免全局污染，合理使用响应式数据。

---

1. 定义变量

在Vue 3中，变量通常使用ref或reactive来定义，以实现响应式数据。

ref

• 用于定义基本类型的响应式数据（如string、number、boolean等）。
• 通过.value访问和修改值。
• 示例：

  import {
       
        ref } from 'vue';
  
  export default {
       
       
    setup() {
       
       
      const count = ref(0); // 定义一个响应式变量
      const message = ref('Hello, Vue 3!');
  
      return {
       
        count, message };
    }
  };
  

reactive

• 用于定义对象类型的响应式数据。
• 直接访问和修改对象的属性。
• 示例：

  import {
       
        reactive } from 'vue';
  
  export default {
       
       
    setup() {
       
       
      const state = reactive({
       
       
        name: 'Vue 3',
        age: 3
      });
  
      return {
       
        state };
    }
  };
  

---

2. 定义函数

在Vue 3中，函数可以直接在setup中定义，并返回给模板使用。

普通函数

• 直接在setup中定义函数。
• 示例：

  import {
       
        ref } from 'vue';
  
  export default {
       
       
    setup() {
       
       
      const count = ref(0);
  
      const increment = (