Vue3 学习笔记，如何理解 Computed 计算属性

DKO28资讯网——每日最新资讯28at.com

大家好，本篇文章我们继续学习和 Vue 相关的内容，今天我们归纳总结下什么是 computed 计算属性、如何使用和应用场景，以及 computed 和 Method 事件的区别和应用场景。DKO28资讯网——每日最新资讯28at.com

什么是 computed 计算属性

Vue.js 中的 computed 计算属性是一种特殊类型的属性，它们的值不是简单地被设置，而是根据其它属性的值计算得出。DKO28资讯网——每日最新资讯28at.com

computed 计算属性是基于它们的依赖进行缓存的，这意味着只有在它们的依赖发生变化时，才会重新计算。这使得它们更高效，因为它们只在需要时才会计算，而不是每次都调用。DKO28资讯网——每日最新资讯28at.com

下面是一个示例，展示了如何使用 computed 计算属性:DKO28资讯网——每日最新资讯28at.com

<template>  <div>    <p>Full name: {{ fullName }}</p>    <input v-model="firstName">    <input v-model="lastName">  </div></template><script>export default {  data() {    return {      firstName: 'John',      lastName: 'Doe'    }  },  computed: {    fullName() {      return this.firstName + ' ' + this.lastName    }  }}</script>

在这个例子中，当 firstName 或 lastName 发生变化时，fullName 会自动重新计算。DKO28资讯网——每日最新资讯28at.com

computed 和 method 事件的区别

与 computed 计算属性不同的是，methods 方法是每次都会调用的，不能进行缓存。如果你需要在每次渲染时都计算一个值，那么使用 methods 方法会更好。DKO28资讯网——每日最新资讯28at.com

下面是一个使用 methods 方法的示例：DKO28资讯网——每日最新资讯28at.com

<template>  <div>    <p>Full name: {{ getFullName() }}</p>    <input v-model="firstName">    <input v-model="lastName">  </div></template><script>export default {  data() {    return {      firstName: 'John',      lastName: 'Doe'    }},  methods: {    getFullName() {      return this.firstName + ' ' + this.lastName    }  }}</script>

在这个例子中，每次渲染时都会调用 getFullName 方法，而不是缓存其结果。DKO28资讯网——每日最新资讯28at.com

总结一下

适用 computed 计算属性的场景是:DKO28资讯网——每日最新资讯28at.com

• 适合一些简单的操作，比如数组排序或筛选
• 计算属性可以直接在HTML中使用，像 Data 中的属性一样使用。
• 当你需要基于其它属性计算一个新的值。
• 当你需要缓存计算结果,因为这样能提高应用的性能。

适用 methods 方法的场景是:DKO28资讯网——每日最新资讯28at.com

• 当你需要在每次渲染时都计算一个值。
• 当你需要执行一些复杂的逻辑或者需要调用外部函数。
• 方法通常作为事件监听或公共业务逻辑
• 方法可以当做普通 JS 函数使用

另外，计算属性是可以被观察的，可以被用在指令和计算属性依赖中。而 method 方法不能被观察到,不能用在指令和计算属性依赖中。DKO28资讯网——每日最新资讯28at.com

再举一个例子：

<template>  <div>    <p>Price: {{ price }}</p>    <p>Discount: {{ discount }}%</p>    <p>Discounted price: {{ discountedPrice }}</p>  </div></template><script>export default {  data() {    return {      price: 100,      discount: 10    }  },  computed: {    discountedPrice() {      return this.price * (1 - this.discount / 100)    }  }}</script>

在这个例子中，discountedPrice 是基于 price 和 discount 计算得出的，并且当 price 或 discount 发生变化时，discountedPrice 会自动重新计算。 而如果用 method 实现的话，每次都会计算一遍，而不是只在需要时计算。DKO28资讯网——每日最新资讯28at.com

总之，computed 计算属性是一种高效的方式，能够基于其它属性进行计算并缓存结果，而 methods 方法则是每次都会调用并进行计算。DKO28资讯网——每日最新资讯28at.com

结束

今天的内容就介绍到这里，内容比较简单，希望对你有所帮助。DKO28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-41700-0.htmlVue3 学习笔记，如何理解 Computed 计算属性

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Mongodb和Elasticsearch计算经纬度哪个性能更好

下一篇： Go 语言字符串使用方式与技巧