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

2023-12-21 12:35:40

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>

文章来源:https://blog.csdn.net/qq_33365152/article/details/132775849
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。