在 Vue.js 中,`computed` 是一个十分有用的功用,用于声明核算特色。核算特色是依据它们的依靠进行缓存的。只有当依靠发生改变时,核算特色才会从头核算。这保证了核算特色的功用,因为它们不会在每次组件更新时都从头核算。
根本用法
核算特色一般用于处理杂乱的逻辑,或许依据其他数据源派生新的数据。例如,你可能有一个包含用户信息的目标,你想要依据用户的年纪核算一个是否成年的标志。
```javascript User is {{ adult ? 'adult' : 'not adult' }}
export default { data { return { user: { age: 25 } }; }, computed: { adult { return this.user.age >= 18; } }};```
在这个比如中,`adult` 是一个核算特色,它依据 `user.age` 的值来判别用户是否成年。
核算特色的 getter 和 setter
核算特色能够有一个 getter 和一个 setter。当核算特色被读取时,会调用 getter 函数。当核算特色被赋值时,会调用 setter 函数。这答应你运用核算特色来履行更杂乱的逻辑。
```javascriptcomputed: { fullName: { // getter get { return `${this.firstName} ${this.lastName}`; }, // setter set { const names = newValue.split; this.firstName = names; this.lastName = names; } }}```
在这个比如中,`fullName` 是一个核算特色,它有一个 getter 和一个 setter。当 `fullName` 被读取时,会回来 `firstName` 和 `lastName` 的组合。当 `fullName` 被赋值时,会解析新的值并更新 `firstName` 和 `lastName`。
注意事项
核算特色应该是无副作用的。这意味着它们不应该改动数据源,而应该仅仅依据数据源回来一个新的值。 核算特色是依据它们的依靠进行缓存的。只有当依靠发生改变时,核算特色才会从头核算。 核算特色不能承受参数。假如你需求依据不同的参数核算不同的值,应该运用办法(methods)而不是核算特色。
Vue中的computed核算特色详解
在Vue.js中,核算特色(computed)是一个十分重要的概念,它答应咱们依据呼应式数据主动核算新的值。核算特色是Vue实例中的一个选项,它依靠于数据,而且只有当依靠的数据发生改变时,核算特色才会从头核算。本文将具体介绍Vue中的computed核算特色,包含其根本用法、功用优势以及与methods办法的比照。
computed核算特色是Vue实例的一个选项,它答应咱们声明依靠于呼应式数据的核算值。核算特色能够看作是一个依据数据的“核算器”,它会依据依靠的数据主动核算出一个新的值,而且这个值会跟着依靠数据的改动而更新。
在Vue实例中,咱们能够经过在`computed`选项中界说一个目标来创立核算特色。下面是一个简略的比如:
```javascript
new Vue({
el: 'app',
data() {
return {
firstName: '张',
lastName: '三'
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
在上面的比如中,咱们界说了一个名为`fullName`的核算特色,它依靠于`firstName`和`lastName`这两个数据特色。当`firstName`或`lastName`发生改变时,`fullName`会主动从头核算。
比较于methods办法,computed核算特色具有以下功用优势:
核算特色的成果会被缓存,只有当依靠的数据发生改变时,才会从头核算。这意味着假如依靠的数据没有改变,核算特色将直接回来缓存的成果,然后进步功用。
核算特色是依据呼应式数据的,因而当依靠的数据发生改变时,核算特色会主动更新。这使得核算特色十分合适处理杂乱的数据处理逻辑。
尽管computed核算特色和methods办法都能够完成数据的核算,但它们在使用场景和功用上有所不同。
computed核算特色是Vue.js中一个十分有用的功用,它能够协助咱们轻松完成依据呼应式数据的核算。经过本文的介绍,信任我们对computed核算特色有了更深化的了解。在实践开发中,合理运用computed核算特色能够进步使用的功用和可维护性。