vue响应式

// Vue 响应式示例代码

// 引入 Vue
import Vue from 'vue';

// 创建一个 Vue 实例
new Vue({
  // 指定挂载的 DOM 元素
  el: '#app',

  // 定义数据对象
  data: {
    message: 'Hello Vue!'
  },

  // 定义计算属性，会根据依赖的数据自动更新
  computed: {
    reversedMessage: function () {
      // 计算属性会根据 `message` 的值自动更新
      return this.message.split('').reverse().join('');
    }
  },

  // 方法集合
  methods: {
    changeMessage: function() {
      // 修改数据，视图会自动更新
      this.message = 'Hello World!';
    }
  }
});

// HTML 部分
/*
<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
  <button @click="changeMessage">Change Message</button>
</div>
*/

// 解释说明：
// 1. `data` 中定义了响应式数据 `message`。
// 2. `computed` 中定义了计算属性 `reversedMessage`，它会根据 `message` 的变化自动更新。
// 3. `methods` 中定义了一个方法 `changeMessage`，点击按钮时调用此方法修改 `message`，视图会自动更新。