Vue3的computed和watch

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

目录

1、computed

2、computed完整写法

 3、watch

4、watch监听对象具体属性

5、watch 监听reactive数据


1、computed

基于现有的数据计算出新的数据

<script setup >

import {ref,computed} from 'vue'
const num=ref(1)
const doubleNum=computed(()=>{
    return num.value*2
})
const goods=ref([
    {
    id:1001,
    price:5000,
    name:'小米手机'
},
{
    id:1002,
    price:4000,
    name:'华为手机'
},
{
    id:1003,
    price:6000,
    name:'三星手机'
}
])
//筛选出价格大于等于5000的商品
const filterGoods=computed(()=>{
    return goods.value.filter(item=>item.price>=5000)
})
</script>

<template>
<div>hello,world</div>
<p>{{ num }}- {{ doubleNum }}</p>
<p>{{ filterGoods }}</p>
</template>

<style scoped>

</style>

Vue3的computed和watch,vue笔记,vue.js,前端,javascript

2、computed完整写法

<script setup >

import {ref,computed} from 'vue'
const firstName=ref('')
const lastName=ref('')
//简写  只提供get
// const fulName=computed(()=>{
//     return firstName.value+lastName.value
// })
//完整写法

const fulName=computed({
    //get:function(){} 与 get() {} 等价
    //get:()=>{}  箭头函数不可简写
    get(){
        return firstName.value+lastName.value
    },
    set(newV){
        firstName.value=newV.substring(0,1)
        lastName.value=newV.substring(1)
    }
})
</script>

<template>
<div>hello,world</div>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fulName">
</template>

<style scoped>

</style>

 3、watch

1 . 侦听一个数据

第一个参数:监听的数据 第二个回调函数

2.侦听多个数据

第一个参数监听的数据构成的数组 ​ 第二个参数回调函数

3.立刻调用 (第三个参数位一个对象,里面可放immediate:true)

4.深度监听 (第三个参数位一个对象,里面可放 deep:true)

<script setup >

import {ref,watch} from 'vue'
const num=ref(1)
// const age=ref(10)
const obj=ref({
    id:1,
    name:'电视',
    price:3000
})
// 1  侦听一个数据
//第一个参数:监听的数据    第二个回调函数

watch(num,(newV,oldV)=>{
    console.log(newV,oldV)
})
//2  侦听多个数据
//第一个参数监听的数据构成的数组
//第二个参数回调函数
// watch([num,age],([newNum, newAge],[oldNum, oldAge])=>{
//   console.log(newNum, newAge);
// })

// watch([num,age],([newNum,newAge],[oldNum,oldAge])=>{
//     console.log(newNum,newAge)
// })
 
 //3  立刻调用   immediate
//  watch(num,(newV,oldV)=>{
//     console.log('立刻调用')
//     console.log(newV,oldV)
//  },{
//     immediate:true
//  })

//4  深度监听
watch(obj,(newV,oldV)=>{
    console.log(newV,oldV)
},{
    deep:true
})
const changeObj=()=>{
    obj.value.price -=200
}


</script>

<template>
<div>hello,world</div>
<p>{{ num }}</p>
<p>{{ obj }}</p>
 <button @click="changeObj">修改obj</button>
</template>

<style scoped>

</style>

4、watch监听对象具体属性

<script setup >

import {ref,watch} from 'vue'
const obj=ref({
    id:1,
    name:'电视',
    price:3000
})
//深度监听
// 第一个参数 可以是函数,函数的返回值就是被侦听的数据

//分开监听数据的变化
//只有价格改变才监听
// watch(()=>obj.value.price,(newV,oldV)=>{
//     console.log(newV,oldV)
// },{
//     deep:true
// })

// watch(()=>obj.value.name,(newV,oldV)=>{
//     console.log(newV,oldV)
// },{
//     deep:true
// })

//监听数据变化写在一起
watch([()=>obj.value.price,()=>obj.value.name,()=>obj.value.id],(newV,oldV)=>{
    console.log(newV[0],oldV)
},{
    deep:true
})
const changeObj=()=>{
    // obj.value.price -=200
    obj.value.name='手机'
    // obj.value.id=200
}
</script>

<template>
<div>hello,world</div>
<button @click="changeObj">修改obj</button>
</template>

<style scoped>

</style>

5、watch 监听reactive数据

watch监控reactive数据,假如需要深层次监控属性需要手动开启deep:true或省略

watch监控ref数据,深层次监控属性 ,必须手动开启deep:true,不能省略,省略相当于默认 false

<script setup >

import {reactive,watch} from 'vue'
const user=reactive({
    name:'admin',
    age:18,
    job:{
        jobName:'web前端工程师',
        salary:6000
    }
})
//侦听的是reactive数据,默认对第一层属性开启deep:true,此时无论有没有传入deep选项
//侦听的是ref引用数据,默认deep:false,监控的对象属性发生改变不会被监控到

watch(user,(newV,oldV)=>{
    console.log(newV)
},{
    deep:true //关闭深度监控无效
})

const changeAge=()=>{
    user.age++
    //假如需要侦听深层次数据,需要手动开启deep:true
    user.job.salary += 2000
}
</script>

<template>
<div>hello,world</div>
<p>{{ user }}</p>
<button @click="changeAge">修改age</button>
</template>

<style scoped>

</style>

 文章来源地址https://www.toymoban.com/news/detail-821001.html

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3】关于watch与computed的用法看这个就ok

    😉博主:初映CY的前说(前端领域) ,📒本文核心:watch()与computed的使用【vue2中watch|computed概念详解】,本文将介绍在vue3中怎么使用这两者技能 【前言】vue2当中有这两个技能,那么vue3中的watch与computed是怎么用呢? 注意点:对 reactive 自身的修改则不会触发监听。 一定得注意不

    2023年04月10日
    浏览(36)
  • vue3中,ref()、reactive()、computed()、watch() 和 watchEffect()的区别

    ref()、reactive()、computed()、watch() 和 watchEffect() 是 Vue 3 中常用的响应式处理函数,它们的主要区别如下: ref():ref() 函数用于将一个普通的 JavaScript 值转化为响应式对象。它返回一个具有 value 属性的对象,我们可以通过访问 value 属性来获取或修改值。当我们对 ref() 返回的对象

    2024年02月22日
    浏览(55)
  • Vue3 计算属性和侦听器实战(computed、watch)——简易点餐页面

    这篇文章记录一下 Vue3 计算属性和侦听器 (computed、watch) 实战的内容,这篇文章我们在有计算属性和侦听器的基础上,我们来制作一个简易点餐页面,接下来我们一起来从零到一开始制作。 计算属性和侦听器相关文章推荐: 深入与浅谈 Vue 中计算属性和侦听器的区别和使用

    2024年02月09日
    浏览(100)
  • Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用 语法 完整:

    2024年01月18日
    浏览(62)
  • 学习Vue:computed VS watch

    在 Vue.js 中,Vue 实例与数据绑定不仅限于简单的插值表达式和指令。在实际开发中,您可能会遇到更复杂的数据处理需求。为此,Vue 提供了计算属性和侦听器这两个强大的工具,让您能够更灵活地处理和响应数据变化。 计算属性是 Vue 实例中的一个特殊属性,它允许您定义一

    2024年02月12日
    浏览(69)
  • Vue 中的 computed 和 watch 的区别

    在Vue.js中, computed 和 watch 是两个常用的属性,用于处理数据的监听和响应。它们在功能上有一些相似之处,但也有一些重要的区别。本文将介绍 computed 和 watch 的区别,并提供相关的代码示例。 Vue 中的 computed 和 watch 都是用来观察数据变化的,但它们的用途和特点略有不同

    2024年02月07日
    浏览(48)
  • 浅谈Vue的属性,computed和watch

    是什么? 直接上demo,了解一下语法先~ conputed是 计算 属性,watch是 监听 属性,本质上都是同一个 watcher实例 ,它们都是 通过响应式系统与数据,页面建立通信 。 computed带有 \\\"懒计算\\\" 功能 监听的逻辑有差异 :computed是依赖的值变了,它去重新求值,watch是目标值变了,它去

    2024年01月18日
    浏览(45)
  • 【Vue】watch、methods 和 computed 的区别?

    一、基本说明 1.computed: 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 2.methods: methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方 法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 3.watch: 观察

    2024年02月09日
    浏览(54)
  • 【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch

    所谓响应式就是界面和数据同步,能实现实时更新。 Vue 中用过三种响应式解决方案,分别是 defineProperty、Proxy 和 value setter。Vue 2 使用的方案是 defineProperty API。Vue3中使用的方案是Proxy和value setter。 vue3中实现响应式数据的方法是使用ref和reactive。 reactive更推荐去定义复杂的数

    2024年02月03日
    浏览(45)
  • Vue 中的 watch 和 computed 的区别是什么?

    在 Vue.js 中, watch 和 computed 都是用来监听数据变化的方式,但它们的使用方式和实现机制有所不同,下面是它们的区别: ✨ 实现机制 watch 监听的是一个具体的数据,当数据变化之后会执行相应的回调函数; computed 属性就像一个响应式的计算属性,是基于所依赖的数据进行

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包