美文网首页
04vue3.2-组合式API-computed和watch

04vue3.2-组合式API-computed和watch

作者: 东邪_黄药师 | 来源:发表于2024-02-09 01:18 被阅读0次

computed

计算属性基本思想和Vue2保持一致,组合式API下的计算属性只是修改了API写法

<script setup>
 import { ref } from 'vue'
 // 准备好的数组
 const list = ref([1,2,3,4,5,6,7,8,9])
 // 引入computed 
 import { computed } from "vue";
//  过滤小于2的数据
 const computedList = computed(()=>{
  return list.value.filter(item =>{
    return item > 2
  })
 })

 // 乘以2额数组
const doubleCount = computed(()=>{
  return list.value.map(item =>{
    return item * 2
  })
})
</script>
<template>
 <div>原始数组---{{ list  }}</div>
 <div>过滤小于2的数据---{{ computedList }}</div>
 <div>乘以2额数组---{{  doubleCount  }}</div>
</template>
image.png

watch

侦听一个或者多个数据的变化,数据变化时执行回调函数,俩个额外参数 immediate控制立刻执行,deep开启深度侦听

1. 侦听单个数据

监听某一个值的时候

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
  })
</script>

监听对象的某个属性的时候要写成回调函数

<script setup>
 // 导入
 import { reactive, watch } from 'vue'
 // 执行函数 传入参数 变量接收
 const state = reactive({
   count:0
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.count ++
 }
 // 监听对象的某个属性的时候要写成箭头函数
 watch(()=>state.count, (newVal,oldVal)=>{
  console.log(`count发生了变化,老值为${oldVal},新值为${oldVal}`)
 })
</script>
<template>
  {{ state.count }}
  <button @click="setSate">自加1</button>
</template>
image.png
2.侦听多个数据

侦听多个数据,第一个参数可以改写成数组的写法

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('zhangsan')
  const countClike = () =>{
    count.value ++
  }
  const countName = () =>{
    name.value = 'lisi'
  }
  // // 2. 调用watch 侦听变化
  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
    console.log('count或者name变化了',[newCount, newName],[oldCount,oldName])
  })
</script>
<template>
  <div>
    <div>{{ count }} <button @click="countClike">改变count</button></div>
    <div>{{ name }}  <button @click="countName">改变name</button></div>
  </div>
</template>
image.png
3. immediate

在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  })
</script>
4. deep

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep
注:监听对象的某个属性的时候要写成回调函数(上文已说明)

<script setup>
 // 导入
 import { reactive, watch } from 'vue'
 // 执行函数 传入参数 变量接收
 const state = reactive({
   count:0
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.count ++
 }
 // 监听对象的某个属性的时候要写成箭头函数
 watch(state, (newVal,oldVal)=>{
  console.log('数据变化了')
 },{deep:true})
</script>
<template>
  {{ state.count }}
  <button @click="setSate">自加1</button>
</template>
image.png

相关文章

  • 03.vue3-组合API(下篇)

    组合API-computed函数 定义计算属性: computed函数,是用来定义计算属性的,计算属性不能修改。基...

  • Vue3 组合式API.md

    组合式API 介绍 什么是组合式 API(composition API) 组合式 API 是 Vue3 提供的新...

  • Vue

    watch 和 computed 和 methods 区别 watch:监听,对data的数据监听回调, 当依赖的...

  • computed和watch的区别

    watch: 异步的派生数据computed和watch的区别 各自适用的场景:

  • JS继承方式总结 (转)

    借用构造函数继承 原型链式继承(借用原型链实现继承) 组合式继承 组合式继承优化1 组合式继承优化2 ES6中继承...

  • vue 2.x技术总结

    watch和conputed对比 两点总结 当watch和computed都能实现的时候用computedWatc...

  • computed和watch

    computed 计算属性:相关依赖发生变化watch:监听某一个属性的变化参考:简书[https://www.j...

  • computed和watch

    资源来源于:https://www.cnblogs.com/gunelark/p/8492468.html,摘抄过...

  • computed 和 watch

    computed 和 watch 区别: computed 是计算一个新的属性,并将该属性挂载到 vm(Vue 实...

  • computed 和 watch

    watch - 侦听用途:当数据变化时,执行一个函数。何为变化?简单类型看值,复杂类型(函数)看地址这其实就是 =...

网友评论

      本文标题:04vue3.2-组合式API-computed和watch

      本文链接:https://www.haomeiwen.com/subject/amotadtx.html