做局域网网站教程企业品牌策划
Vue.js 之计算属性与侦听器详解
一、计算属性
（一）概念
计算属性（Computed Properties）是 Vue.js 中的一个核心概念。它允许我们基于一个或多个数据属性来定义一个新的属性，该属性的值会根据其依赖的数据属性的变化而自动更新。这就好像是一个 “智能” 属性，它的值不是固定的，而是动态的，依据其他数据的变化而变化。
（二）工作原理
计算属性是基于 Vue.js 的响应式系统来工作的。当你在 Vue 实例中定义一个计算属性时，Vue 会自动追踪该计算属性所依赖的数据。当任何一个被依赖的数据发生变化时，计算属性会重新计算其值。这个过程是高效且智能的，Vue 内部会优化计算属性的更新时机，确保在数据变化时及时更新计算属性，同时也不会进行不必要的重复计算。
（三）优势
-
简化模板逻辑 ：在模板中，我们经常需要对数据进行一些处理后才能展示。使用计算属性可以将这些处理逻辑从模板中分离出来，让模板保持简洁和可读性。例如，我们有一个对象数组，想在模板中展示每个对象中两个字段相加的结果。如果不用计算属性，我们可能需要在模板中使用复杂的 JavaScript 表达式；而有了计算属性，我们就可以预先定义好这个相加的逻辑，模板中只需简单引用计算属性即可。
-
提高性能 ：由于计算属性具有缓存机制，当计算属性所依赖的数据没有发生变化时，它不会重新计算值，而是直接返回之前计算的结果。这样可以避免重复的复杂计算，提高应用的性能。相比之下，如果在模板中使用普通的 JavaScript 函数来实现类似的逻辑，每次模板重新渲染时都会调用该函数，可能导致不必要的重复计算。
（四）定义和使用示例
-
基础示例
<div id="app"><p>原姓名：{{firstName}} {{lastName}}</p><p>全名：{{fullName}}</p>
</div><script>
const app = Vue.createApp({data() {return {firstName: '张',lastName: '三'};},computed: {fullName() {return this.firstName + this.lastName;}}
});
app.mount('#app');
</script>在这个例子中，fullName 就是一个计算属性。它依赖于 firstName 和 lastName 两个数据属性。在模板中，我们直接使用 {{fullName}} 来展示计算后的全名。当 firstName 或 lastName 发生变化时，fullName 会自动重新计算并更新视图。
-
带有条件判断的计算属性
<div id="app"><p>原价格：{{price}}</p><p>折扣：{{discount}}</p>