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

已于 2024-03-18 16:50:31 修改
阅读量792 收藏 1
点赞数 3
分类专栏： 笔记 Vue.js vue3 文章标签： vue.js 前端 javascript
于 2023-09-09 12:16:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33365152/article/details/132775849
版权
笔记 同时被 3 个专栏收录
25 篇文章 1 订阅
订阅专栏
vue3
12 篇文章 1 订阅
订阅专栏
Vue.js
6 篇文章 1 订阅
订阅专栏

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

1、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>

注意：这么定义的计算属性是只读的，不能修改

2、watch：侦听器

  • 作用：监视数据的变化（和 Vue2 中的 watch 作用一致）
  • 特点：Vue3 中的 watch 只能监视以下四种数据：
    • 1、ref 定义的数据
    • 2、reactive 定义的数据
    • 3、函数返回一个值
    • 4、一个包含上述内容的数组

2.1、情况一

  • 监听 ref 定义的【基本类型】数据：直接写数据名即可，监视的是其 value 值的改变（并停止监听）。
<template>
  价格 :<input v-model="price" type="text" /><br />
  <button @click="addPriceHandle">增长</button>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

let price = ref<number>(0);

/**
 * 增长价格方法
 */
const addPriceHandle = () => {
  price.value += 1;
};

// 监听 message 变量
const stopWatch = watch(price, (newVal: number, oldVal: number) => {
  console.log("当前价格:" + newVal);
  if (newVal >= 10) {
    // 停止监听
    stopWatch();
  }
});
</script>
<style scoped></style>

2.2、情况二

  • 监听 ref 定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视

注意：
1、若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。
2、若修改整个 ref 定义的对象，newValue 是新值，oldValue 是旧值，因为不是同一个对象了。

<template>
  姓名：{{ person.username }}<br />
  年龄：{{ person.age }}<br />
  <button @click="editUserNameHandle">修改姓名</button>
  <button @click="editAgeHandle">修改年龄</button>
  <button @click="editHandle">修改对象</button>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const person = ref({
  username: "人类",
  age: 30,
});

/**
 * 修改姓名方法
 */
const editUserNameHandle = () => {
  person.value.username += "~";
};

/**
 * 修改姓名方法
 */
const editAgeHandle = () => {
  person.value.age += 1;
};

/**
 * 修改整个对象
 */
const editHandle = () => {
  person.value = {
    username: "近战法师 - 刘铁柱",
    age: 50,
  };
};

/**
 * 监听对象：监听 ref 定义的【对象类型】数据，监听的是对象的地址值
 */
watch(
  person,
  (newVal: any, oldVal: any) => {
    console.log(newVal);
    console.log(oldVal);
  }
);
</script>

<style lang="scss" scoped></style>
  • 深度侦听，示例代码如下：
<template>
  姓名：{{ person.username }}<br />
  年龄：{{ person.age }}<br />
  <button @click="editUserNameHandle">修改姓名</button>
  <button @click="editAgeHandle">修改年龄</button>
  <button @click="editHandle">修改对象</button>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const person = ref({
  username: "人类",
  age: 30,
});

/**
 * 修改姓名方法
 */
const editUserNameHandle = () => {
  person.value.username += "~";
};

/**
 * 修改姓名方法
 */
const editAgeHandle = () => {
  person.value.age += 1;
};

/**
 * 修改整个对象
 */
const editHandle = () => {
  person.value = {
    username: "近战法师 - 刘铁柱",
    age: 50,
  };
};

/**
 * 监听对象：监听 ref 定义的【对象类型】数据，监听的是对象的地址值，若想监听对象内部属性的变化，需要手动开启深度监听
 */
watch(
  person,
  (newVal: any, oldVal: any) => {
    console.log(newVal);
    console.log(oldVal);
  },
  {
    deep: true,	// 深度监听
    immediate: true,  // 立即监听
  }
);
</script>

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

2.3、情况三

  • 监听 reactive 定义的【对象类型】数据，且默认开启了深度监听。
  • 简单例子：
<template>
  姓名：{{ person.username }}<br />
  年龄：{{ person.age }}<br />
  <button @click="editUserNameHandle">修改姓名</button>
  <button @click="editAgeHandle">修改年龄</button>
  <button @click="editHandle">修改对象</button>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";

const person = reactive({
  username: "人类",
  age: 30,
});

/**
 * 修改姓名方法
 */
const editUserNameHandle = () => {
  person.username += "~";
};

/**
 * 修改姓名方法
 */
const editAgeHandle = () => {
  person.age += 1;
};

/**
 * 修改整个对象
 */
const editHandle = () => {
  Object.assign(person, {
    username: "近战法师 - 刘铁柱",
    age: 60,
  });
};

/**
 * 监听对象：监听 reactive 定义的【对象类型】数据
 */
watch(person, (newVal: any, oldVal: any) => {
  console.log(newVal);
  console.log(oldVal);
});
</script>

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

2.4、情况四

  • 监听响应式对象中的某个属性，且该属性时基本类型的，要写成函数式
  • 监听 ref 或 reactive 定义的【对象类型】数据中的某个属性，注意点如下：
    • 1、若该属性值不是【对象类型】，需要写成函数形式。
    • 2、若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
  • 简单例子：
<template>
  姓名：{{ person.username }}<br />
  年龄：{{ person.age }}<br />
  汽车：{{ person.car.c1 + "," + person.car.c2 }}<br />
  <br />
  <button @click="editUsernameHandle">修改姓名</button>
  <button @click="editAgeHandle">修改年龄</button>
  <button @click="editC1Handle">修改第一台车</button>
  <button @click="editC2Handle">修改第二台车</button>
  <button @click="editCHandle">修改所有车</button>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";

const person = reactive({
  username: "张三",
  age: 60,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});

/**
 * 修改姓名
 */
function editUsernameHandle() {
  person.username += "~";
}

/**
 * 监听姓名变化,只监听姓名
 */
watch(
  () => person.username,
  (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
  }
);

/**
 * 修改年龄
 */
function editAgeHandle() {
  person.age += 1;
}

/**
 * 修改第一台车
 */
function editC1Handle() {
  person.car.c1 += 1;
}

/**
 * 修改第二台车
 */
function editC2Handle() {
  person.car.c2 += 1;
}

/**
 * 修改所有车
 */
function editCHandle() {
  Object.assign(person.car, {
    c1: "劳斯莱斯",
    c2: "布加迪",
  });
}

/**
 * 监听所有汽车
 */

watch(
  () => person.car,
  (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
  },
  {
    deep: true,
  }
);
</script>

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

结论：监听的要是对象里的属性，那么最好写函数式，。
注意点：若是对象监听的是地址值，需要关注对象内部，需要手动开启深度监听。

2.5、情况五

  • 监听上述的多个数据
  • 简单例子：
<template>
  姓名：{{ person.username }}<br />
  年龄：{{ person.age }}<br />
  汽车：{{ person.car.c1 + "," + person.car.c2 }}<br />
  <br />
  <button @click="editUsernameHandle">修改姓名</button>
  <button @click="editAgeHandle">修改年龄</button>
  <button @click="editC1Handle">修改第一台车</button>
  <button @click="editC2Handle">修改第二台车</button>
  <button @click="editCHandle">修改所有车</button>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";

const person = reactive({
  username: "张三",
  age: 60,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});

/**
 * 修改姓名
 */
function editUsernameHandle() {
  person.username += "~";
}

/**
 * 修改年龄
 */
function editAgeHandle() {
  person.age += 1;
}

/**
 * 修改第一台车
 */
function editC1Handle() {
  person.car.c1 += 1;
}

/**
 * 修改第二台车
 */
function editC2Handle() {
  person.car.c2 += 1;
}

/**
 * 修改所有车
 */
function editCHandle() {
  Object.assign(person.car, {
    c1: "劳斯莱斯",
    c2: "布加迪",
  });
}

/**
 * 监听第一台车和姓名
 */

watch(
  [() => person.car.c1, () => person.username],
  (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
  }
);
</script>

<style lang="scss" scoped></style>
W.Y.B.G
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3+ts的computed属性
m0_56986233的博客
10-18 428
vue3+ts的computed属性
Vue3ts computed和watch
qq_61398960的博客
09-09 1647
有bug，当监听引用类型的数据时，oldvalue不能正常显示，原因是watch没有做缓存，所以一碰到引用类型就歇逼，而computed做了缓存。当使用ref的时候，需要开启深度监听，使用reactive会自动开启深度监听（就算你设置了deep：false也会监听）当依赖的属性值发生变化，才会触发他的更改，如果依赖的值不发生变化，使用的是缓存中的值。当监听reactve对象的时候，写不写deep无所谓，都可以监听到深层次变化。深度监听bug：当开启深度监听的时候，oldvalue会等于newVal。
vue3学习教程第三十三节（TS 之 computed watch）
最新发布
weixin_39593730的博客
05-23 380
vue3 中计算属性 computed 与 监听函数 watch 的 ts写法
vue3+vite+ts--computed计算属性的使用
m0_60893808的博客
05-23 2602
当改变整个testComputed时，才会触发set方法，如果testComputed是对象改变对象的某个属性的值时，不会触发set方法。当testComputed 依赖的值改变时，就会触发get方法。返回值val可以赋值给其他，不可以赋值给自己。
TS中ref reactive computed defineprops defineemits 的类型注解
zyl1229ngm的博客
07-13 1479
在TS中数据类型注解的作用就是限制变量赋值的数据类型并有提示。
TS 计算属性computed，不需要自动指类型，他会自己类型推断
jieweiwujie的博客
03-25 414
【代码】TS 计算属性computed，不需要自动指类型，他会自己类型推断。
vue3 + ts：watch（immediate、deep、$watch）
snowball的博客
03-17 8913
vue：watch、this.$watch
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目完结10章
01-15
大家好，今天我将带着大家用Vue3+Pinia+Vite+TS来开发一款外卖app的项目，喜欢大家会喜欢。 随着外卖服务的普及和数字化的兴起，外卖系统的开发变得至关重要。要构建一个高效、安全、用户友好的外卖系统，需要运用...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+ts 第六章 （认识computed计算属性）
lipenghao111的博客
03-31 1057
删除总价：{{ total }}物品</th><th>单价</th><th>数量</th><th>总价</th><th>操作
vue3+vite+ts--watch和watchEffect监听使用
m0_60893808的博客
05-27 1463
手动停止watchEffect的监听，需用一个变量来监听在，然后在调用就会关闭监听。watchEffect接收一个副作用函数onInvalidate与flush。- 数组的形式返回的也是数组。- 写多个watch。
ts watch路由 参数变化_【Ts重构Vue】05-实现computed和watch功能
weixin_39969448的博客
02-11 852
如何创建computed和watch？在项目中computed和watch非常实用，它们是如何实现的呢？我们的编码目标是下面的demo能够成功渲染，最终渲染结果未读消息：2。let v = new Vue({el: '#app',data () {return {news: [1]}},computed: {newsCount() {return this.news.length},},rend...
Vue3 - watch 侦听器（保姆级详细使用教程）
热门推荐
weixin_44166849的博客
09-27 1万+
它之所以叫侦听器，是因为它可以侦听一个或多个响应式数据源数据，并再数据源变化时调用所给的回调函数。就是你传给watch侦听器一个响应式变量，然后当这个变量变化时，自动触发一个你定义的函数，就像一个人被监控了一样，只要这个人一动，摄像头就会报警。
vue3的computed.ts
vue
03-15 2018
vue3的computed.ts import { effect } from './effect'; class ComputedRefImpl { public _dirty = true; public _value; public effect; constructor(getter, public setter) { //ts中默认不会挂在this上 this.effect = effect(() => { //计算属性 默认会产.
vue3中watch（监听）的五种情况
weixin_59233142的博客
01-11 1万+
第三个参数是一个配置对象： 可选值： 1. immediate：在监听创建时立即触发回调，第一次调用时旧值是undefined 2. deep：如果值是对象，强制使用深度遍历，一遍在深层级变更时触发回调 3. flush：调整回调函数的刷新时机 默认情况下，监听的回调（第二个参数）都会在 Vue 组件更新之前被调用。这意味着你在监听回调中访问的 DOM 将是被 Vue 更新之前的状态。 如果想在监听回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post'
【Vue3+Ts】—— composition API（三）计算属性
qq_53061847的博客
07-08 3336
在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理如何使用computed呢？ 计算属性两种用法给computed传入函数，返回值就是计算属性的值 给computed传入对象，get获取计算属性的值，set监听计算属性改变。这种写法适用于需要的情况 Watch侦听数据的变化在前面的Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。 .........
vue3+vite+js 转换ts 工具
05-20
可以使用以下工具将 Vue 3 + Vite + JavaScript 代码转换为 TypeScript： 1. `vue-tsc`: 官方提供的 Vue 3 TypeScript 编译器。可以用于编译 .vue 文件中的 TypeScript 代码。 2. `vite-plugin-vue2-to-vue3`: 将 Vue 2 语法转换为 Vue 3 语法的 Vite 插件。可以用于将 Vue 2 项目迁移到 Vue 3。 3. `vue-migration-helper`: 一个命令行工具，可以帮助你将 Vue 2 代码转换为 Vue 3 代码，并将 JavaScript 代码转换为 TypeScript 代码。 4. `vue-cli-plugin-typescript`: Vue CLI 官方提供的 TypeScript 插件。可以用于在 Vue 3 项目中添加 TypeScript 支持。 5. `ts-migrate`: 一个通用的 TypeScript 迁移工具，可以将 JavaScript 代码转换为 TypeScript 代码。可以用于将 Vite + JavaScript 项目转换为 Vite + TypeScript 项目。 以上这些工具可以帮助你将 Vue 3 + Vite + JavaScript 代码转换为 TypeScript 代码。你可以根据自己的需求选择适合自己的工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

W.Y.B.G

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值