Vue.js计算属性computed与watch（5）

Vue.js中的计算属性（Computed）与侦听属性（Watch）详解

在Vue.js中，我们经常会遇到数据处理的两种情况：一种是需要进行简单的数据处理并展示，另一种是需要对特定的数据变化进行响应和处理。这时，我们可以使用计算属性（Computed）和侦听属性（Watch）来实现。

一、计算属性（Computed）

计算属性是一种衍生属性，它可以根据其他属性的变化进行计算并生成新的属性。它的特点是具有缓存性，只有在相关依赖发生改变时才会重新计算。

例如，我们可以创建一个名为“ComputedMessage”的计算属性，根据“message”的值进行计算：

```html

```

```javascript

var myVue = new Vue({

el: ".test",

data: {

message: 12

},

computed: {

ComputedMessage: function() {

return this.message + 10;

}

}

});

```

在上述代码中，当“message”的值发生改变时，“ComputedMessage”会重新计算并更新。如果“message”的值没有发生改变，多次访问“ComputedMessage”也不会触发重新计算。这是因为计算属性具有缓存性，只有当依赖的数据发生改变时才会重新计算。

二、侦听属性（Watch）

与计算属性不同，侦听属性用于监听特定数据的变化，并在数据变化时执行相应的操作。它更适合用于处理异步或复杂操作的情况。

例如，我们可以使用侦听属性来监听“fullName”的变化：

```html

```

```javascript

var myVue = new Vue({

el: ".test",

data: {

firstName: "fur",

lastName: "bool"

},

computed: {

fullName: function() {

return this.firstName + this.lastName;

}

},

watch: {

fullName: function(newVal, oldVal) {

// 在这里执行相应的操作，例如发送异步请求等。

console.log("fullName changed from " + oldVal + " to " + newVal);

}

}

});

```在上述代码中，当“fullName”的值发生改变时，会触发侦听函数并执行相应的操作。侦听属性可以用于处理更复杂的场景，例如异步操作或需要处理多个数据之间的依赖关系。而计算属性则更适合用于简单的数据处理和展示。计算属性和侦听属性都是Vue.js中非常强大的功能，根据具体需求选择合适的方式可以大大提高开发效率和代码质量。Vue中的set和get调用过程

在一个Vue实例中，存在一个名为“.test”的元素，它包含一段原始信息和一个按钮。当按钮被点击时，将会触发一系列的操作，包括调用data中的fullName属性的set和get方法。

HTML结构如下：

对应的Vue实例代码如下：

var myVue = new Vue({

el: ".test",

data: {

firstName: "fur",

lastName: "bool",

fullName: "sasas dsdsd dsds"

},

computed:{ // 这里应该是computed而不是puted

fullName:{

get: function () {

console.log("get"); // 输出"get"，当读取fullName属性时触发此函数

return this.firstName + this.lastName; // 返回firstName和lastName的组合

},

set: function(value){

var names = value.split(" "); // 将传入的字符串按空格分割成数组

this.firstName = names[0]; // 将分割后的第一个名字赋值给firstName

this.lastName = names[names.length-1]; // 将最后一个名字赋值给lastName

console.log("set"); // 输出"set"，当设置fullName属性时触发此函数

}

}

},

methods:{

fu: function () {

myVue.fullName = "sasas dsdsd dsds"; // 为fullName赋值，触发set方法

console.log(myVue.firstName); // 输出"sasas"，即firstName的值

console.log(myVue.lastName); // 输出"dsds"，即lastName的值

}

}

});

当我们点击按钮时，会执行fu方法，该方法将fullName重新赋值为"sasas dsdsd dsds"。Vue会调用fullName的set方法，将新的名字分割并存储到firstName和lastName中。之后，当我们读取fullName属性时，Vue会调用get方法，返回firstName和lastName的组合。控制台会先输出"set"，再输出"get"。另外需要注意的是，这里计算属性的正确关键字应为“computed”，而非“puted”。自定义的Watcher在某些情况下非常有用，特别是当需要在数据变化时执行异步操作或其他操作时。这使得Vue具有强大的响应式系统。