vue3中的setup语法糖 和vue2中的data和methods关系

setup
 

setup函数有两个主要的用途：

设置响应式数据：您可以在setup函数中使用reactive、ref或computed等函数创建响应式的数据，并将其返回，以供组件模板使用。

添加组件的逻辑：您可以在setup函数中定义组件的方法、生命周期钩子和其他逻辑，可以通过返回一个对象或直接在函数中编写这些逻辑。

注意：
        在setup函数中， 获取不到this， this是undefined， 因为执行的比beforeCreate还要早。

        在setup中， 数据和函数， 需要在setup最后进行return，才能在模板中应用。
 

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    // 设置响应式数据
    const data = reactive({
      message: 'Hello, Vue 3!',
    });

    // 添加组件的逻辑
    const changeMessage = () => {
      data.message = 'New Message';
    };

    // 返回响应式数据和组件的逻辑
    return {
      message: data.message,
      changeMessage,
    };
  },
};
</script>

通俗一点说就是将Vue 2中的data和methods选项中的相关代码迁移到Vue 3的setup函数中，并通过return语句将其导出。

每次都需要导出很麻烦， 所以可以使用语法糖进行简便
 

<script setup>

//数据
const message = 'hello'
//函数
const hi() => {
    console.log('hi')
}
</script>

这样不需要写return一个一个的导出了。