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

目录

一、Vue3和Vue2的区别

二、计算属性computed

三、监听属性watch

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


【Vue3】计算属性computed和监听属性watch_第1张图片

一、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,需要等待相应的更新或替代方案。

【Vue3】计算属性computed和监听属性watch_第2张图片

二、计算属性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发生改变时自动重新计算并更新。

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

Message: {{ message }}

Reversed Message: {{ reversedMessage }}

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计算属性,它由firstNamelastName组合而成。当给fullName赋值时,会自动触发set函数,将新的值拆分成firstNamelastName并更新。

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

【Vue3】计算属性computed和监听属性watch_第3张图片

三、监听属性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属性发生变化时,回调函数会被调用,并且传入两个参数:newValueoldValue,分别表示属性变化后的新值和变化前的旧值。

除了监听简单的数据属性,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.nameuser.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选项中定义属性和回调函数,可以监听数据的变化并执行自定义的操作。

【Vue3】计算属性computed和监听属性watch_第4张图片

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

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

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

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

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

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

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

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

你可能感兴趣的:(前端开发,vue.js,前端,javascript,html,前端框架)