Vue3之setup与ref函数揭秘，解析组件背后的奥秘

Vue3中的setup函数：组件初始化的新篇章

Vue3中引入的setup函数为组件初始化带来了全新的体验。它取代了之前的beforeCreate和created钩子函数，成为组件生命周期中第一个调用的函数。setup函数主要负责组件的初始化工作，包括初始化props、状态和计算属性等。

setup函数的使用方式：

const MyComponent = {
  setup() {
    // 初始化props
    const props = defineProps(['prop1', 'prop2']);

    // 初始化状态
    const state = reactive({
      count: 0,
    });

    // 初始化计算属性
    const computedCount = computed(() => state.count + 1);

    // 返回一个对象，包含所有需要暴露给模板的数据和方法
    return {
      props,
      state,
      computedCount,
    };
  },
  template: `
    <div>
      <p>Prop1: {{ props.prop1 }}</p>
      <p>Prop2: {{ props.prop2 }}</p>
      <p>State: {{ state.count }}</p>
      <p>Computed Count: {{ computedCount }}</p>
    </div>
  `,
};

ref函数：轻松管理组件内的元素引用

ref函数是Vue3中新增的另一个重要特性，它允许我们在组件内部获取元素的引用。ref函数的语法很简单，只需要在元素上添加一个ref属性，并指定一个唯一的字符串作为ref的名称即可。

ref函数的使用方式：

<template>
  <div>
    <input ref="input" type="text">
  </div>
</template>

<script>
export default {
  setup() {
    // 获取input元素的引用
    const inputRef = ref(null);

    // 在mounted钩子函数中，我们可以使用inputRef.value来访问input元素
    onMounted(() => {
      console.log(inputRef.value.value);
    });

    return {
      inputRef,
    };
  },
};
</script>

总结

setup函数和ref函数是Vue3中新增的两个重要特性，它们为我们提供了更强大、更灵活的方式来创建和管理组件。通过使用setup函数，我们可以轻松初始化组件的props、状态和计算属性，而ref函数则允许我们获取组件内部元素的引用。掌握了这些特性，将使我们在构建Vue应用程序时更加得心应手。