前端编程开发 --- vue3 计算属性

变量输出到视图的预处理指令和数据源单向绑定

我们常常有这样的需要求，比如格式化字符串然后输出到视图这样就可以使用计算属性

<div id="app">
  <p>未处理: {{ message }}</p>
  <p>预处理: {{ reversedMessage }}</p>
</div>
    
<script>
const app = {
  data() {
    return {
      message: 'helloworld!!'　//未处理　　　
    }
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('') 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

 

与methods的区别

在Vue中，computed属性和methods方法都可以用于处理页面逻辑。两者在功能上是相似的，但它们在执行方式和使用场景上有一些区别。

computed属性是基于它的依赖缓存的。这意味着computed属性会根据它依赖的响应式数据进行缓存，只有在依赖发生变化时，computed属性才会重新计算和获取值。这样可以避免不必要的重复计算，提高性能。

举个例子：

<template>
<div>
<p>{{ fullName }}</p >
<p>{{ reversedName }}</p >
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
},
reversedName() {
return this.fullName.split('').reverse().join('');
}
}
}
</script>

 

在上面的示例中，computed属性fullName是依赖于firstName和lastName的，当firstName或lastName发生变化时，fullName会重新计算并获取新的值。而reversedName则是依赖于fullName的，只有当fullName的值发生变化时，reversedName才会重新计算。

相比之下，methods方法在每次重新渲染时都会被调用执行，它不会缓存结果，而是每次都会重新计算。因此，如果某个方法不依赖任何响应式数据，而且需要在每次重新渲染时都得到最新的值，那么使用methods方法是更合适的。

总之，computed属性适合处理基于依赖缓存的计算属性，而methods方法适合处理不需要缓存的简单计算或处理逻辑。具体使用哪个取决于您的需求和场景。

 

使用setter

好的，我已经将日志方法添加到示例中，并重新编写了一个示例供您参考。

```html
<div id="app">
<p>
Name: <input v-model="name" placeholder="Enter name">
</p >
<p>
URL: <input v-model="url" placeholder="Enter URL">
</p >
<button @click="updateSite">Update Site</button>
</div>
```

```javascript
const app = {
data() {
return {
name: 'Google',
url: 'http://www.google.com'
}
},
methods: {
updateSite() {
this.site = this.name + ' ' + this.url;
},
logValue(newValue) {
console.log(newValue);
}
},
computed: {
site: {
get() {
return this.name + ' ' + this.url;
},
set(newValue) {
const [name, url] = newValue.split(' ');
this.name = name;
this.url = url;
this.logValue(newValue);
}
}
}
};

const vm = Vue.createApp(app).mount('#app');
```

 

在这个示例中，我们添加了一个名为 `logValue` 的方法，它接收一个参数 `newValue`，然后在内部将 `newValue` 打印到控制台上。

在 `set` 方法中，我们调用了 `this.logValue(newValue)`，这样在每次设置 `site` 值时就会调用 `logValue` 方法，并将新值作为参数传递给它。这将在控制台中打印出新值。

 

 

 

您没有看到 `set` 方法被直接调用的原因是因为在 Vue 的特定情况下， `set` 方法一般是由 Vue 内部自动触发而不是手动调用的。

在上面的代码中，`set` 方法被定义在 `computed` 计算属性 `site` 中。在 Vue 应用中，当我们试图修改 `site` 的值时，Vue 会自动调用 `set` 方法来处理赋值操作。这个过程是隐式的，不需要我们手动调用。

所以在最后一行代码 `vm.site = '菜鸟教程 https://www.runoob.com';` 中，实际上是调用了 `set` 方法。Vue 会解析等号左侧的属性名 `site`，然后根据该属性名找到 `site` 的 `set` 方法去处理赋值操作。

如果您在代码中补充了 `console.log(newValue)` 或 `alert(newValue)`，您会发现这些语句会在 `set` 方法内部被执行，输出或显示被赋予的新值。

所以尽管您没有直接看到 `set` 方法的调用，但实际上在赋值过程中是由 Vue 内部自动触发和执行的。