【Vue3】computed 计算属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue3】computed 计算属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

computed 是计算属性，它会根据响应式数据的变化⾃动计算出新的值，并缓存结果，只有在计算属性所依赖的响应式数据发⽣改变时才会重新计算。

computed 适⽤于需要根据响应式数据计算得出结果的场景，例如根据商品的数量和单价计算商品的总价，或者根据选中的过滤条件过滤出数据列表。

computed 基础语法

<template>
  <div>
    <div>
      性：<input v-model="firstName" type="text">
    </div>
    <div>
      名：<input v-model="lastName" type="text">
    </div>
    <div>
      全名：<input v-model="fullName" type="text">
    </div>
    <button @click="changeName">changeName</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
let firstName = ref('zhang')
let lastName = ref('san')

// 1.选项式写法 支持一个对象传入getter和setter自定义操作
let fullName = computed<string>({
  get () {
    return firstName.value + '-' + lastName.value
  },
  set(newVal) {
  	// newVal.split('-') 此时没有 .value
    console.log(newVal.split('-'));
    // 
    [firstName.value,lastName.value] = newVal.split('-')
  }
})
const changeName = () => [
  fullName.value = 'xiao-hu'
]


//2.函数式写法，只能支持一个getter函数，不可以修改值
// let fullName = computed(() => firstName.value + '-' + lastName.value)
// 不可以修改，以下这个函数会报错
// const changeName = () => {
//   fullName.value = 'xiao-hu'
// }
</script>

<style lang="scss" scoped></style>

购物车小案例

未使用computed优化

<template>
  <div>
    <input placeholder="搜索" type="text">
  </div>
  <div style="margin-top: 20px">
    <table border width="600" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>物品名称：</th>
          <th>物品单价：</th>
          <th>物品数量：</th>
          <th>物品总价：</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in data">
          <td align="center">{{ item.name }}</td>
          <td align="center">{{ item.price }}</td>
          <td align="center"><button @click="item.num>1 ? (item.num--, total()) : null">-</button>{{ item.num }}<button @click="item.num < 99 ? (item.num++, total()) : null">+</button></td>
          <td align="center">{{ item.num * item.price }}</td>
          <td align="center"><button @click="del(index)">del</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5" align="right">
            总价:{{ $total }}
          </td>
          
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let $total = ref<number>(0)
interface Data {
  name: string,
  price: number,
  num: number,
}
let data = reactive<Data[]>([
  {
    name: '手机',
    price: 100,
    num: 1
  },
  {
    name: '电脑',
    price: 200,
    num: 2
  },
  {
    name: '笔记本',
    price: 300,
    num: 3
  }
])

const total = () => {
  $total.value = data.reduce((prev:number, next: Data) => {
    return prev + next.num * next.price
  },0)
}
total()
const del = (index:number) => {
  data.splice(index, 1)
  total()

}
</script>

<style lang="scss" scoped></style>

使用computed优化

<template>
  <div>
    <input v-model="keyWord" placeholder="搜索" type="text">
  </div>
  <div style="margin-top: 20px">
    <table border width="600" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>物品名称：</th>
          <th>物品单价：</th>
          <th>物品数量：</th>
          <th>物品总价：</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in searchData">
          <td align="center">{{ item.name }}</td>
          <td align="center">{{ item.price }}</td>
          <td align="center"><button @click="item.num > 1 ? item.num-- : null">-</button>{{ item.num }}<button
              @click="item.num < 99 ? item.num++ : null">+</button></td>
          <td align="center">{{ item.num * item.price }}</td>
          <td align="center"><button @click="del(index)">del</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5" align="right">
            总价:{{ total }}
          </td>

        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
let keyWord = ref<string>('')
interface Data {
  name: string,
  price: number,
  num: number,
}
let data = reactive<Data[]>([
  {
    name: '手机',
    price: 100,
    num: 1
  },
  {
    name: '电脑',
    price: 200,
    num: 2
  },
  {
    name: '笔记本',
    price: 300,
    num: 3
  }
])

// const total = () => {
//   $total.value = data.reduce((prev:number, next: Data) => {
//     return prev + next.num * next.price
//   },0)
// }
const total = computed(() => {
  return data.reduce((prev: number, next: Data) => {
    return prev + next.num * next.price
  }, 0)
})

const searchData = computed(() => {
  return data.filter((item: Data) => {
    return item.name.includes(keyWord.value)
  })
})
// 使用 searchData 搜索后的总价有bug，不会随 searchData 的数据改变（抽空再改啦~~）

const del = (index: number) => {
  data.splice(index, 1)
}
</script>

<style lang="scss" scoped></style>

watch 和 computed 的区别：

计算属性 computed :

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

侦听属性watch：文章来源地址https://www.toymoban.com/news/detail-605613.html

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
- immediate：组件加载立即触发回调函数执行，
- deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。

watch: {
    // 每当 question 改变时，这个函数就会执行
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },
watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true
    }
  }

到了这里，关于【Vue3】computed 计算属性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！