在Vue 3中，有几个重要的属性：

1. data：用于定义组件的数据。可以是一个普通的JavaScript对象，也可以是一个返回对象的函数。组件中的数据可以直接在模板中使用。

2. props：用于从父组件传递数据给子组件。在子组件中，props 属性可以声明为一个数组或对象，指定需要接收的属性，并可以设置默认值和类型验证。

3. computed：用于定义计算属性。计算属性是根据其他属性计算得出的值，它们会对依赖的属性进行响应式处理，只有当依赖的属性变化时才会重新计算。

4. methods：用于定义组件的方法。可以在模板中调用这些方法，处理用户的交互行为或执行其他操作。

5. watch：用于观察数据的变化并执行相应的操作。可以监听单个属性或多个属性的变化，也可以使用深度监听来观察嵌套对象的变化。

data

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

在模板中使用:

<template>
  <div>{{ message }}</div>
</template>

props

export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 0
    }
  }
}

在父组件中传递数据给子组件：

<template>
  <child-component name="John" :age="25"></child-component>
</template>

computed

export default {
  data() {
    return {
      radius: 5
    }
  },
  computed: {
    area() {
      return Math.PI * this.radius * this.radius;
    }
  }
}

在模板中使用:

<template>
  <div>半径: {{ radius }}</div>
  <div>面积: {{ area }}</div>
</template>

methods

export default {
  methods: {
    greet() {
      console.log('Hello!');
    }
  }
}

在模板中调用方法:

<template>
  <button @click="greet">点击我</button>
</template>

watch

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`值从 ${oldValue} 变为 ${newValue}`);
    }
  }
}

监听属性的变化:

<template>
  <div>{{ count }}</div>
</template>

在 <script setup> 中使用 Vue 3 的属性和特性与常规的 <script> 区域有一些不同。<script setup> 是 Vue 3.1 引入的语法糖，用于更简洁地编写组件逻辑。

下面是在 <script setup> 中如何使用 Vue 3 的几大属性：

data

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

const message = ref('Hello Vue!');
</script>

在模板中使用:

<template>
  <div>{{ message }}</div>
</template>

props

<script setup>
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 0
  }
});
</script>

在模板中使用和传递数据给子组件的方式与常规方式相同。

computed

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

const radius = ref(5);
const area = computed(() => Math.PI * radius.value * radius.value);
</script>

在模板中使用：

<template>
  <div>半径: {{ radius }}</div>
  <div>面积: {{ area }}</div>
</template>

methods

<script setup>
const greet = () => {
  console.log('Hello!');
};
</script>

在模板中调用方法：

<template>
  <button @click="greet">点击我</button>
</template>

watch

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

const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`值从 ${oldValue} 变为 ${newValue}`);
});
</script>

在模板中使用：

<template>
  <div>{{ count }}</div>
</template>

在 <script setup> 中使用这些属性时，无需显式地导出它们，因为它们会自动被注入到模板中。这样可以让组件的逻辑更加简洁清晰。