vue使用class和stye

在Vue.js中，你可以使用两种不同的方式来创建组件：传统的JavaScript原型链方式（也就是使用`export default { ... }`）或使用ES6的Class语法。

**1. 原型链方式 (非Class)**

这是最早的Vue组件定义方式，你直接在一个对象上定义数据、计算属性、方法等：

// 组件示例
const MyComponent = {
  data() {
    return {
      message: 'Hello from Vue class'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message)
    }
  }
}

// 在模板中使用
<template>
  <div>{{ message }}</div>
  <button @click="sayHello">Click me</button>
</template>

export default MyComponent;

**2. Class语法 (基于Vue.extend)**

从Vue 2.5开始，引入了更现代化的Class语法，这使得组件的组织更加清晰。你可以继承自`Vue.Component`并覆盖构造器、生命周期钩子、props、data等：

// ES6 Class 示例
import { Component, Prop } from 'vue'

class MyComponent extends Component {
  // 数据可以通过 `data` 或者 `props` 定义
  data() {
    return {
      message: 'Hello from Vue class with ES6 syntax'
    }
  }

  // 方法可以通过 `methods` 定义
  methods: {
    sayHello() {
      console.log(this.message)
    }
  }

  // 使用 Prop 注解接收父组件传入的 props
  @Prop({ type: String }) parentMessage {}
}

export default MyComponent

在模板中使用这个类定义的组件也是相同的：

<my-component :parent-message="helloWorld"></my-component>

**相关问题--:**
1. 你更倾向于使用哪种方式来定义Vue组件？为什么？
2. ES6 Class语法中的`props`和`data`有什么区别？
3. 如何在Class组件中访问父组件传递的props？
4. 为什么要用`@Prop`装饰器而不是直接使用`props`对象？