【Vue3】计算属性computed和监听属性watch

目录

一、Vue3和Vue2的区别

二、计算属性computed

三、监听属性watch

四、计算属性和监听属性的区别

---

一、Vue3和Vue2的区别

Vue3和Vue2有以下几个主要区别：

1. 响应式系统的改进：Vue3采用了Proxy作为响应式系统的核心，相比Vue2的Object.defineProperty实现，Proxy具有更好的性能和更丰富的拦截能力。这使得Vue3在响应式数据追踪、嵌套对象的监听和数组变化的处理等方面都有了显著的改进。

2. 组合式API：Vue3引入了组合式API，将组件的逻辑按照功能进行组合，解决了Vue2中复杂组件逻辑难以维护和复用的问题。通过使用setup函数，可以更灵活地组织组件的代码，并且提供了更好的类型推导和IDE支持。

3. 更好的性能：Vue3在编译器和运行时方面都做了优化，编译器生成的代码更加高效，运行时的性能也有所提升。同时，Vue3还引入了静态提升（Static Hoisting）和树摇（Tree Shaking）等优化策略，减小了打包后的文件体积。

4. TypeScript支持：Vue3对TypeScript的支持更加完善，包括提供了更好的类型推导和错误提示，支持使用Composition API编写类型安全的代码。

5. 更好的开发体验：Vue3引入了一些新的特性和API，如Fragments、Teleport、Suspense等，使得开发者可以更方便地处理一些常见的场景和交互需求。

由于Vue3相对于Vue2做了较大的改动，迁移到Vue3可能需要进行一些代码调整和重写。同时，一些Vue2的插件和库可能还不支持Vue3，需要等待相应的更新或替代方案。

二、计算属性computed

计算属性（computed）是Vue中一个非常常用的特性，它可以根据响应式数据的变化自动计算出结果并返回。通过计算属性，我们可以将复杂的逻辑计算抽离出来，使得模板代码更加简洁和可读性更好。

在Vue中，计算属性是在Vue实例中的computed选项中定义的。定义一个计算属性的方式是使用get函数来返回计算的结果。例如：

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

上面的例子中，我们创建了一个message的计算属性reversedMessage，它返回message字符串的反转结果。计算属性会在message发生改变时自动重新计算并更新。

在模板中使用计算属性的方式与使用普通的数据属性是相同的：

<div>
  <p>Message: {{ message }}</p>
  <p>Reversed Message: {{ reversedMessage }}</p>
</div>

当message发生变化时，reversedMessage会自动更新。

使用计算属性的好处是它具有缓存机制，只有在它依赖的响应式数据发生变化时，才会重新计算。这样可以避免不必要的计算，提高性能。

除了get函数外，计算属性还可以定义一个set函数，用于处理计算属性的赋值操作。例如：

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(newValue) {
      var names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}

上面的例子中，我们定义了一个fullName计算属性，它由firstName和lastName组合而成。当给fullName赋值时，会自动触发set函数，将新的值拆分成firstName和lastName并更新。

总结一下，计算属性是用于在Vue实例中根据响应式数据进行计算的特性，它能够使得模板代码更加简洁和可读性更好。使用计算属性还可以享受到缓存机制带来的性能提升。

三、监听属性watch

在Vue中，可以使用watch选项来监听数据的变化。watch选项可以用来观察和响应Vue实例中数据的变化，并执行一些自定义的操作。

在Vue实例中，可以通过在watch选项对象中定义属性来监听数据的变化。每个属性都对应一个回调函数，当被监听的数据发生变化时，回调函数会被触发。

下面是一个使用watch选项的示例：

var vm = new Vue({
  data: {
    message: 'Hello Vue!',
  },
  watch: {
    message: function(newValue, oldValue) {
      // 在message发生变化时触发该回调函数
      console.log('message变为：', newValue);
    },
  },
});

在上面的示例中，我们定义了一个Vue实例，并在watch选项中监听了message属性。当message属性发生变化时，回调函数会被调用，并且传入两个参数：newValue和oldValue，分别表示属性变化后的新值和变化前的旧值。

除了监听简单的数据属性，watch选项也可以监听计算属性、嵌套对象的属性等。例如：

var vm = new Vue({
  data: {
    user: {
      name: 'Alice',
      age: 18,
    },
  },
  watch: {
    'user.name': function(newValue, oldValue) {
      console.log('user.name变为：', newValue);
    },
    'user.age': function(newValue, oldValue) {
      console.log('user.age变为：', newValue);
    },
  },
});

在上面的示例中，我们监听了user.name和user.age属性的变化。

除了简单的回调函数，watch选项还可以使用对象的形式来定义更复杂的监听操作，例如：

var vm = new Vue({
  data: {
    counter: 0,
  },
  watch: {
    counter: {
      handler: function(newValue, oldValue) {
        console.log('counter变为：', newValue);
      },
      immediate: true,  // 设置为true，表示立即执行回调函数
    },
  },
});

在上面的示例中，我们使用了一个对象来定义watch选项。handler属性对应回调函数，immediate属性设置为true，表示立即执行回调函数。

总结一下，watch选项可以用来观察和响应Vue实例中数据的变化。通过在watch选项中定义属性和回调函数，可以监听数据的变化并执行自定义的操作。

四、计算属性和监听属性的区别

计算属性（computed）和监听属性（watch）在Vue中都是用于监听数据变化的机制，但它们之间有一些区别。

1. 用途和应用场景：计算属性适用于对已有的响应式数据进行计算和派生新的数据，通常用于模板中展示数据。而监听属性适用于监听一个或多个数据的变化，并执行一些特定的操作，比如异步请求、副作用操作等。

2. 响应性：计算属性是基于响应式数据进行计算，只有相关的响应式数据发生改变时，计算属性会重新计算。而监听属性可以监听任何数据的变化，不限于响应式数据。

3. 语法和定义方式：计算属性是通过在Vue实例的computed选项中定义的，采用get函数返回计算的结果。监听属性是通过在Vue实例的watch选项中定义的，可以是简单的属性名，也可以是一个函数。

4. 响应方式：计算属性是被动响应的，只有在模板中使用了计算属性的结果时，计算属性才会被计算并缓存起来，并在相关的响应式数据变化时更新。而监听属性是主动监听的，当监听的数据发生变化时，监听函数会被立即触发。

5. 参数和使用：计算属性的回调函数不需要传入参数，只需返回一个值。而监听属性的回调函数通常需要传入两个参数，分别是新值和旧值。

总的来说，计算属性适用于对已有的数据进行计算，派生新的数据，并在模板中使用；而监听属性适用于监听数据的变化，并执行一些特定的操作。根据具体的需求和场景，选择适合的机制。