setup函数与生命周期变化

setup函数与生命周期变化

Vue 3引入了Composition API，其中setup函数是最核心的部分。它替代了Vue 2中的大部分选项式API，包括data、methods、computed等，同时也对生命周期钩子进行了重新设计。setup函数在组件实例创建之前执行，这意味着它无法访问this，而是通过参数和返回值来暴露数据和函数。

setup函数的基本用法

setup函数接收两个参数：props和context。props是组件的属性，context提供了attrs、slots和emit等实用工具。

<script>
import { ref } from 'vue';

export default {
  props: {
    message: String
  },
  setup(props, context) {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    // 暴露给模板
    return {
      count,
      increment,
      context
    };
  }
};
</script>

在这个例子中，props包含了父组件传递的message属性，context可以用于访问插槽或触发事件。ref用于创建响应式数据，increment是一个方法，它们通过return暴露给模板使用。

生命周期钩子的变化

Vue 3的生命周期钩子与Vue 2有所不同，大部分钩子可以通过setup函数中的函数来访问。以下是Vue 3的生命周期钩子与Vue 2的对比：

在setup中使用生命周期钩子

在setup函数中，生命周期钩子是通过从vue包中导入的函数来使用的。这些钩子接受一个回调函数，当对应的生命周期阶段触发时，回调函数会被执行。

<script>
import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });

    onUpdated(() => {
      console.log('组件已更新');
    });

    onUnmounted(() => {
      console.log('组件已卸载');
    });
  }
};
</script>

setup与异步操作

setup函数可以是异步的，这在需要从API获取数据时非常有用。可以通过async/await或返回一个Promise来实现。

<script>
import { ref } from 'vue';

export default {
  async setup() {
    const data = ref(null);
    const response = await fetch('https://api.example.com/data');
    data.value = await response.json();

    return {
      data
    };
  }
};
</script>

与Vue 2生命周期的对比

Vue 2的生命周期钩子是作为组件选项直接定义的，而Vue 3的生命周期钩子是通过函数调用的方式在setup函数中注册的。这种设计使得逻辑更加集中，尤其是在处理复杂组件时。

Vue 2示例：

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  mounted() {
    console.log('组件已挂载');
  },
  beforeDestroy() {
    console.log('组件即将销毁');
  }
};
</script>

Vue 3示例：

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('组件已挂载');
    });

    onBeforeUnmount(() => {
      console.log('组件即将销毁');
    });

    return {
      count
    };
  }
};
</script>

组合式API的优势

setup函数和Composition API的设计使得代码更容易组织和复用。逻辑可以按功能划分，而不是分散在不同的生命周期钩子中。例如，可以将数据获取和事件处理的逻辑封装到一个单独的函数中，然后在setup函数中调用。

<script>
import { ref, onMounted } from 'vue';

function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };

  onMounted(() => {
    console.log('计数器已初始化');
  });

  return {
    count,
    increment
  };
}

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment
    };
  }
};
</script>

常见问题与注意事项

1. this不可用：在setup函数中，this是undefined，所有数据和函数都需要通过return暴露给模板。
2. 响应式数据：使用ref或reactive创建响应式数据，直接返回普通对象不会具有响应性。
3. 生命周期钩子的执行顺序：setup函数中的生命周期钩子会按照注册的顺序执行，但整体上仍遵循Vue的生命周期流程。
4. 异步setup：如果setup是异步的，确保父组件使用Suspense或正确处理异步状态。

与其他API的配合

setup函数可以与Vue的其他特性无缝配合，例如provide/inject、watch和computed。

<script>
import { provide, ref, watch, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    provide('count', count);

    watch(count, (newValue, oldValue) => {
      console.log(`count从${oldValue}变为${newValue}`);
    });

    return {
      count,
      doubleCount
    };
  }
};
</script>

性能优化

在setup函数中，可以通过shallowRef或shallowReactive来减少响应式开销，尤其是在处理大型对象或数组时。

<script>
import { shallowRef } from 'vue';

export default {
  setup() {
    const largeList = shallowRef([]);

    // 手动触发更新
    const updateList = (newList) => {
      largeList.value = newList;
    };

    return {
      largeList,
      updateList
    };
  }
};
</script>