vue3计算属性的几种用法
时间: 2023-08-24 22:07:20 浏览: 45
Vue 3 中计算属性有几种用法,以下是常见的几种用法:
1. 基本用法:使用 `computed` 关键字定义计算属性,然后在模板中使用。例如:
```javascript
const app = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
```
2. Getter 和 Setter:可以通过 `get` 和 `set` 方法来定义计算属性的 getter 和 setter。例如:
```javascript
const app = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(value) {
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
```
3. 计算属性的缓存:Vue 3 中的计算属性默认是有缓存的,只有在它依赖的响应式数据发生变化时才会重新计算。这可以提高性能。例如:
```javascript
const app = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
console.log('computed fullName called')
return this.firstName + ' ' + this.lastName
}
}
})
```
4. 计算属性的依赖:计算属性可以依赖于其他计算属性。当依赖的计算属性发生变化时,依赖它的计算属性会重新计算。例如:
```javascript
const app = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
},
greeting() {
return 'Hello, ' + this.fullName
}
}
})
```
以上是 Vue 3 中计算属性的几种常见用法,希望能对你有所帮助!