杭州网站维护外包网站定制化服务

Vue2&3的计算属性（computed）

Vue2的计算属性

• 原理：data中的属性通过计算得到新的属性，称为计算属性（computed）。
• computed 具有 getter 和 setter 属性
  • getter 属性在使用时分别有两次调用：
    • 第一次：初始化，初次访问该属性
    • 第二次：当 computed 中的数据发生变化时调用
  • setter 属性的调用：
    • 当 computed 属性被修改时调用
  • 注意事项：
    • setter 属性本身不会修改属性的值，只用于修改属性本身，而 computed 属性的值被修改并不会更新setter 属性的值。
    • getter 和 setter 属性不能使用箭头函数，箭头函数中的this不是指向vm，而是window。
• computed 分别有两种写法：
  • 简写形式：computed : { 属性名(){ ...... } }，不使用setter属性时，才能使用
  • 完整形式：computed : { 属性名 : { get(){ ...... }, set(value){ ...... } } }

// App.vue
<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){ ...... }})

// App.vue
<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>