vue computed的用法

作者：——嘘丶低调发布日期:2025-12-02 浏览:61

// Vue computed的用法

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    // 计算属性的基本用法
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('');
    },
    // 使用计算属性进行依赖缓存
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

// 解释说明：
// 1. `reversedMessage` 是一个计算属性，它会监听 `message` 的变化，并自动更新。
// 2. `fullName` 是另一个计算属性，它依赖于 `firstName` 和 `lastName`，当这两个值发生变化时，`fullName` 也会自动更新。
// 3. 计算属性会基于它们的依赖进行缓存，只有在相关依赖发生改变时才会重新求值，这比使用方法更高效。

上一篇：vue reactive

下一篇：vue 组件