Vue2&3的计算属性(computed)
Vue2的计算属性
- 原理:data中的属性通过计算得到新的属性,称为计算属性(computed)。
- computed 具有 getter 和 setter 属性
- getter 属性在使用时分别有两次调用:
- 第一次:初始化,初次访问该属性
- 第二次:当 computed 中的数据发生变化时调用
- setter 属性的调用:
- 注意事项:
- setter 属性本身不会修改属性的值,只用于修改属性本身,而 computed 属性的值被修改并不会更新setter 属性的值。
- getter 和 setter 属性不能使用箭头函数,箭头函数中的this不是指向vm,而是window。
- computed 分别有两种写法:
- 简写形式:
computed : { 属性名(){ ...... } }
,不使用setter属性时,才能使用 - 完整形式:
computed : { 属性名 : { get(){ ...... }, set(value){ ...... } } }
<template>姓名:<input type="text" v-model="username"><br>反转:<input type="text" v-model="reversedName">
</template><script>export default {name : 'App',data(){return {username : ''}},computed : {reversedName : {get(){return this.username.split('').reverse().join('')},set(value){this.username = value.split('').reverse().join('')}}reversedName(){return this.username.split('').reverse().join('')}}}
</script>
Vue3的计算属性
- Vue3的 computed 属性是一个组合式API,并且可以使用箭头函数
- 使用前需要先引入:
import { computed } from 'vue'
- computed 属性的两种写法:
- 简写形式:
computed(() => { ...... })
,不使用setter属性时,才能使用 - 完整形式:
computed({get(){ ...... }, set(value){ ...... }})
<template>姓名:<input type="text" v-model="user.name"><br>反转:<input type="text" v-model="reversedName">
</template><script>import { reactive, computed } from 'vue'export default {name : 'App',setup(){let user = reactive({name : ''})let reversedName = computed(() => {return user.name.split('').reverse().join('')})let reversedName = computed({get(){return user.name.split('').reverse().join('')},set(value){user.name = value.split('').reverse().join('')}})return {user, reversedName}}}
</script>