【Vue.js基础】4、计算属性与侦听属性：高效管理你的数据

【Vue.js基础】计算属性与侦听属性：高效管理你的数据

---

Vue.js基础系列文章目录

【Vue.js基础】1、初识Vue.js：安装与基本用法
【Vue.js基础】2、Vue实例：理解Vue对象
【Vue.js基础】3、模板语法：数据绑定与指令
【Vue.js基础】4、计算属性与侦听属性：高效管理你的数据（本文）
【Vue.js基础】5、Vue组件：构建可复用的UI组件
【Vue.js基础】6、组件通信：Props与事件
【Vue.js基础】7、条件渲染与列表渲染
【Vue.js基础】8、表单处理：双向数据绑定
【Vue.js基础】9、过渡与动画：让你的应用动起来
【Vue.js基础】10、Vue CLI：项目脚手架与开发环境

---

在前几篇文章中，我们了解了Vue.js的安装、基本用法、Vue实例以及模板语法。本篇文章将深入探讨Vue.js中的计算属性和侦听属性，这两个强大的工具可以帮助我们高效地管理和操作数据。通过这篇文章，你将学习如何使用计算属性和侦听属性来简化代码并提高应用的性能。

计算属性

计算属性（Computed Properties）是基于响应式依赖进行缓存的属性。它们只有在它们的依赖发生变化时才会重新求值。这使得计算属性相比于普通的方法有更好的性能表现。

定义计算属性

计算属性是定义在computed选项中的函数：

<div id="app">
  <p>原始消息：{{ message }}</p>
  <p>反转消息：{{ reversedMessage }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    },
    computed: {
      reversedMessage: function() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

在上面的例子中，reversedMessage是一个计算属性，它依赖于message并返回反转后的字符串。当message发生变化时，reversedMessage才会重新计算。

计算属性的缓存

计算属性是基于它们的依赖进行缓存的。这意味着如果一个计算属性依赖的数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不会重新执行函数。

<div id="app">
  <p>原始消息：{{ message }}</p>
  <p>反转消息：{{ reversedMessage }}</p>
  <button @click="changeMessage">改变消息</button>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    },
    computed: {
      reversedMessage: function() {
        console.log('计算反转消息');
        return this.message.split('').reverse().join('');
      }
    },
    methods: {
      changeMessage: function() {
        this.message = 'Hello World!';
      }
    }
  });
</script>

每次点击按钮改变消息时，浏览器控制台中会打印“计算反转消息”，这表明计算属性函数被重新调用了。但是，如果不点击按钮，多次访问reversedMessage不会触发函数重新计算。

计算属性的Setter

计算属性默认只有getter，但有时候我们需要提供一个setter。例如，我们可以为计算属性设置一个值并与其他数据属性进行联动：

<div id="app">
  <p>全名：{{ fullName }}</p>
  <input v-model="fullName">
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: {
        get: function() {
          return this.firstName + ' ' + this.lastName;
        },
        set: function(newValue) {
          var names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[names.length - 1];
        }
      }
    }
  });
</script>

在这个例子中，我们为fullName计算属性定义了一个setter，当用户在输入框中修改全名时，firstName和lastName会自动更新。

侦听属性

侦听属性（Watchers）用于观察和响应Vue实例上数据的变化。它们更适合执行异步操作或开销较大的操作。

定义侦听属性

侦听属性是定义在watch选项中的对象，键是需要观察的属性，值是回调函数：

<div id="app">
  <p>消息：{{ message }}</p>
  <button @click="changeMessage">改变消息</button>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    },
    watch: {
      message: function(newVal, oldVal) {
        console.log('消息改变了：', newVal, oldVal);
      }
    },
    methods: {
      changeMessage: function() {
        this.message = 'Hello World!';
      }
    }
  });
</script>

当message发生变化时，侦听属性的回调函数会被调用，打印出新值和旧值。

深度侦听

默认情况下，侦听属性只会响应数据的顶层变化。如果需要侦听嵌套对象内部的变化，需要使用deep选项：

<div id="app">
  <p>{{ user.name }}</p>
  <button @click="changeName">改变名字</button>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      user: {
        name: 'John Doe'
      }
    },
    watch: {
      user: {
        handler: function(newVal, oldVal) {
          console.log('用户信息改变了：', newVal, oldVal);
        },
        deep: true
      }
    },
    methods: {
      changeName: function() {
        this.user.name = 'Jane Doe';
      }
    }
  });
</script>

立即执行回调

有时候我们需要在侦听属性初始化时立即执行回调，这可以通过immediate选项实现：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    },
    watch: {
      message: {
        handler: function(newVal, oldVal) {
          console.log('消息改变了：', newVal, oldVal);
        },
        immediate: true
      }
    }
  });
</script>

在这个例子中，侦听属性的回调函数会在实例初始化时立即执行一次。

计算属性 vs 侦听属性

计算属性和侦听属性都可以用来处理数据的变化，但他们适用于不同的场景：

• 计算属性：适合用来处理需要依赖其他数据并返回一个新值的场景，且具有缓存特性。
• 侦听属性：适合处理需要在数据变化时执行异步操作或开销较大的操作的场景，比如API请求或复杂的逻辑处理。

总结

通过这篇文章，我们详细介绍了Vue.js中的计算属性和侦听属性。我们学习了如何定义和使用计算属性，以及计算属性的缓存特性和设置器。我们还了解了侦听属性的基本用法、深度侦听和立即执行回调。

掌握这些内容，你将能够更加高效地管理和操作Vue实例中的数据，创建性能更高、逻辑更清晰的应用。在接下来的文章中，我们将继续探索Vue.js的更多特性和高级用法，敬请期待！

希望这篇文章对你有所帮助。这里是爪磕~感谢您的到来与关注，持续为您带来高质教学！