深入浅析Vue.js计算属性和侦听器

Vue.js计算属性与侦听器的

一、计算属性概述

在Vue.js中，模板内的表达式设计初衷是为了简单运算。但当模板中涉及复杂逻辑时，如字符串翻转等操作，模板会变得难以维护。计算属性为我们提供了一个解决方案。

例如，我们有一个简单的模板：

```html

```

在这里，模板的逻辑相对复杂，难以一眼看出其意图。当我们需要在模板中多次引用翻转后的字符串时，问题会变得更加严重。

对于任何复杂逻辑，我们都推荐使用计算属性。例如：

```html

```

在Vue实例中：

```javascript

var vm = new Vue({

el: 'example',

data: {

message: 'Hello'

},

computed: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}

})

```

在这里，我们声明了一个计算属性reversedMessage。当vm.message发生改变时，所有依赖vm.reversedMessage的绑定也会自动更新。计算属性的getter函数是声明性的，易于测试和理解。

二、计算属性缓存与方法的对比

虽然通过方法也能达到计算属性的效果，但两者在性能上有显著区别。计算属性是基于其依赖进行缓存的，只有在相关依赖发生改变时才会重新求值。而方法则会在每次触发重新渲染时执行。

例如，以下计算属性不会更新，因为Date.now()不是响应式依赖：

```javascript

computed: {

now: function () {

return Date.now()

}

}

```

对于性能开销较大的计算属性，如果有其他计算属性依赖于它，没有缓存可能会导致多次执行。如果不需要缓存，可以选择使用方法来替代计算属性。

计算属性提供了声明式依赖管理、缓存优化和易于测试的优点，是处理复杂逻辑和依赖关系的理想选择。而方法则更适合于非响应式、无需缓存的场景。在Vue.js开发中，根据具体需求选择合适的工具，可以使代码更加简洁、高效。三、计算属性与侦听属性之比较

Vue框架提供了一种更为通用的方式来观察和响应Vue实例上的数据变动——侦听属性。当我们有一些数据需要随着其他数据的变动而变动时，很容易滥用watch功能，尤其是对于那些曾经使用过AngularJS的开发者。在这种情况下，通常更好的做法是使用计算属性而非命令式的watch回调。

让我们详细分析一个例子。假设我们有以下的HTML代码和一个Vue实例：

var vm = new Vue({

el: 'demo',

data: {

firstName: 'Foo',

lastName: 'Bar',

fullName: 'Foo Bar'

},

watch: {

firstName(val) {

this.fullName = val + ' ' + this.lastName;

},

lastName(val) {

this.fullName = this.firstName + ' ' + val;

}

}

});

上述代码是命令式的，且存在重复。相比之下，使用计算属性的版本更为简洁：

var vm = new Vue({

el: 'demo',

data: {

firstName: 'Foo',

lastName: 'Bar'

},

puted: {

fullName() {

return this.firstName + ' ' + this.lastName;

}

}

});

显然，计算属性的版本更为优雅。

四、计算属性的Setter方法

计算属性默认只有getter方法，但当我们需要时，也可以提供一个setter方法。例如：

puted: {

fullName: {

get() {

return this.firstName + ' ' + this.lastName;

},

set(newValue) {

const names = newValue.split(' ');

this.firstName = names[0];

this.lastName = names[names.length - 1];

}

}

}

现在，当我们运行vm.fullName = 'John Doe'时，setter方法将被调用，同时vm.firstName和vm.lastName也将被相应地更新。

五、侦听器的作用

尽管在大多数情况下，计算属性更为合适，但有时我们也需要一个自定义的侦听器。Vue通过watch选项提供了一个更通用的方法，以响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这种方式尤为有用。

例如，我们有一个简单的表单，用户可以在其中提问，并且我们想要获取答案： 询问问题： 答案：{{ answer }}。在这个场景中，我们可以使用侦听器来监听用户输入的问题，并通过AJAX请求获取答案。由于AJAX库和通用工具的生态系统已经相当丰富，Vue核心代码并未重复提供这些功能以保持精简。这也让你能够自由选择自己更熟悉的工具来完成这些操作。Vue.js的魔法：从监听器到API交互的流畅体验

在Web开发的众多框架中，Vue.js以其易用性和灵活性脱颖而出。今天，我们将深入Vue的监听器功能，并了解它如何帮助我们实现与API的流畅交互。想象一下一个场景，用户输入一个问题，你的应用不仅实时响应，还能在毫秒级的时间内从API获取答案。这一切，都离不开Vue的监听器。

想象一下这样一个应用：用户在输入框中输入内容，应用会实时响应。但在这之前，我们需要确保用户的输入确实是一个问题。如果没有问号，我们会友好地提醒用户：“问题通常包含问号哦。”但如果用户输入了一个带有问号的问题，那么应用就会立刻从yesno.wtf API获取答案。

这一切是如何实现的呢？这就是Vue的监听器功能大显身手的地方。当我们在Vue实例中定义了一个监听器来监视`question`数据属性时，每当这个属性发生变化，相关的函数就会被触发。在这个例子中，每当`question`变化时，我们先是设置答案为“正在思考...”，然后利用axios库发起一个GET请求到yesno.wtf API获取答案。

为了确保用户输入的是一个真正的问题，我们使用了Lodash的`debounce`函数来限制访问API的频率。这意味着，只有在用户停止输入一段时间后，才会发起请求。这不仅提高了用户体验，还减少了不必要的API请求。

那么，当API返回答案时，我们如何更新视图呢？这就是Vue的数据绑定功能发挥作用的地方。我们简单地将答案设置到`answer`属性上，Vue会自动更新视图以反映这一变化。

当用户在输入框中没有输入问号时，我们会显示友好的提示信息。而当用户真正输入一个问题时，我们会从API获取答案并展示给用户。这一切都是那么流畅，仿佛应用“知道”用户的意图一样。

这就是Vue.js的魅力所在。它允许我们以声明式的方式构建界面，同时提供强大的响应式机制和工具，让我们能够轻松处理用户输入、与API交互等复杂任务。无论你是初学者还是经验丰富的开发者，Vue都能为你提供愉快的开发体验。

如果你对Vue.js有任何疑问或想要了解更多，欢迎给我留言。我会尽我所能，及时回复大家的每一个问题。让我们一起在Web开发的道路上更多的可能性！