Vue3 + vite + Ts + computed（计算属性） 和 watch（侦听器）的简单使用方法

Vue3 + vite + Ts + computed（计算属性） 和 watch（侦听器）的简单使用方法

• computed ：计算属性

  • 计算属性就是当依赖的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。
  • 简单使用方法，实例代码如下：

 import { ref, reactive, computed } from 'vue'

// 计算总价格，通过 computed 计算属性来计算
const totalPrice = computed(() => {
  return goodList.reduce((total: number, item: goodList) => {
    return total + item.good_count * item.good_price
  }, 0)
})

• 简单购物车案例，代码如下：

<template>
  <div>
    <div>
      <input type="text" v-model="keyword" placeholder="搜索">
    </div>
    <div style="margin-top:15px;">
      <table>
        <thead>
          <tr>
            <th>物品名称</th>
            <th>物品单价</th>
            <th>物品数量</th>
            <th>物品总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in searchGoogList" :key="item.id">
            <td>{{ item.good_name }}</td>
            <td>{{ item.good_price }}</td>
            <td>
              <button @click="item.good_count > 1 ? item.good_count-- : null">-</button>
              {{ item.good_count }}
              <button @click="item.good_count < 99 ? item.good_count++ : null">+</button>
            </td>
            <td>{{ item.good_price * item.good_count }}</td>
            <td>
              <button @click="deleteHandle(index)">删除</button>
            </td>
          </tr>
          <tr>
            <td colspan="5" align="right">总价：{{ totalPrice }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, computed } from 'vue'

// 搜索关键字
const keyword = ref<string>("")

// 物品列表
const goodList = reactive([{
  id: 1,
  good_name: '小满的绿帽子',
  good_price: 500,
  good_count: 2
}, {
  id: 2,
  good_name: '小满的红衣服',
  good_price: 10,
  good_count: 1
}, {
  id: 3,
  good_name: '小满的黑袜子',
  good_price: 120,
  good_count: 1
}])

// 搜索方法
const searchGoogList = computed(() => {
  return goodList.filter((item: goodList) => {
    return item.good_name.includes(keyword.value)
  })
})

// 计算总价格，通过 computed 计算属性来计算
const totalPrice = computed(() => {
  return goodList.reduce((total: number, item: goodList) => {
    return total + item.good_count * item.good_price
  }, 0)
})

// 删除方法
const deleteHandle = (index: number) => {
  goodList.splice(index, 1)
}

</script>
<style scoped>
table,
thead tr th,
tbody tr td {
  border-collapse: collapse;
  border: 1px pink solid;
}

th,
td {
  padding: 5px 20px;
}
</style>

• watch ：侦听器

• 侦听响应式数据的变化
• 1、侦听单个值，示例代码如下：

<template>
  <div>
    case1:<input v-model="message" type="text">
    <hr>
    case2:<input v-model="message2" type="text">
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'

let message = ref<string>('小满')

let message2 = ref<string>('小满2')

watch(message, (newVal: string, oldVal: string) => {
  console.log(newVal);
  console.log(oldVal);
})

</script>
<style scoped></style>

• 2、侦听多个值，示例代码如下：

<template>
  <div>
    case1:<input v-model="message" type="text">
    <hr>
    case2:<input v-model="message2" type="text">
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'

let message = ref<string>('小满')

let message2 = ref<string>('小满2')

watch([message, message2], (newVal: string, oldVal: string) => {
  console.log(newVal);
  console.log(oldVal);  // 打印数组，顺序跟侦听对象数组一样
})

</script>
<style scoped></style>

• 3、深度侦听，示例代码如下：

<template>
  <div>
    case1:<input v-model="message.foo.bar.name" type="text">
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'

let message = ref({
  foo: {
    bar: {
      name: '奇略'
    }
  }
})

watch(message, (newVal: string, oldVal: string) => {
  console.log(newVal.foo.bar.name);
  console.log(oldVal);
}, {
  deep: true // 深度侦听
})

</script>
<style scoped></style>

• 4、侦听对象中的某个值，实例代码如下：

<template>
  <div>
    case1:<input v-model="message.foo.bar.name" type="text">
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'

let message = reactive({	// reactive 不需要开启 deep 深度侦听模式
  foo: {
    bar: {
      name: '奇略',
      age: 20
    }
  }
})

watch(() => message.foo.bar.name, (newVal: string, oldVal: string) => {
  console.log(newVal);
  // console.log(oldVal);
}, {
  deep:true,	// 深度侦听
	immediate：true,	// 立即执行一次
	flush:'pre' // pre:组件更新之前调用， sync:同步执行，post:组件更新之后执行
})

</script>
<style scoped></style>