（四）vue/composition-api 之 computed/watch

luckybing~

已于 2023-05-21 20:47:15 修改

阅读量337

点赞数

分类专栏： vue/composition-api 文章标签： vue.js javascript 前端

于 2022-09-18 00:51:05 首次发布

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/126912494

版权

vue/composition-api 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. computed 计算属性

<template>
  <div>
    {{ name.value }}{{ helloName.value }}
  </div>
</template>

<script>
import { defineComponent, ref, computed } from '@vue/composition-api'
export default defineComponent({
  setup () {
    let name = ref('')
    // computed 接受一个箭头函数
    let helloName = computed(() => {
      return name.value ? `${name.value}!hello` : ''
    })

    setTimeout(() => {
      name.value = 'zfb'
    }, 2000)

    return {
      helloName,
      name
    }
  },
})
</script>

<style scoped>

</style>

computed 之 set/get

<template>
  <div>
    {{ name.value }}{{ helloName.value }}
  </div>
</template>

<script>
import { defineComponent, ref, computed } from '@vue/composition-api'
export default defineComponent({
  setup () {
    let name = ref('')
    // computed 接受一个对象
    let helloName = computed({
      get: () => {
        return name.value ? `${name.value}!hello` : ''
      },
      // helloName 重新设置值时候触发
      set: (value) => {
        console.log(`helloName new value: ${value}`)
      }
    })

    setTimeout(() => {
      name.value = 'zfb'
      // 触发 computed set
      helloName.value = 'hhh'
    }, 2000)

    return {
      helloName,
      name
    }
  },
})
</script>

<style scoped>

</style>

2. watch 监听

// 监听单参数的变化   
watch(name, (newValue, oldValue) => {
  console.log(newValue, oldValue, '----d')
})

// 监听对象的变化，第一个参数是函数
watch(() => person.age, (newValue, oldValue) => {
  console.log(newValue, oldValue, 'zfb----d')
})

// 监听多个参数的变化 有第三个参数
    watch(
      () => [person.age, name],
      // 数组形式 第一组是 新数值
      // 数组形式 第二组是 旧数值
      ([ageNewValue, nameNewValue], [ageOldValue, nameOldValue]) => {
        console.log(ageNewValue, ageOldValue, 'zfb----age')
        console.log(nameNewValue, nameOldValue, 'zfb----name')
      },
      {
        immediate: true
      }
    )

停止监听：

const stop = watch(
      () => [person.age, name],
      // 数组形式 第一组是 新数值
      // 数组形式 第二组是 旧数值
      ([ageNewValue, nameNewValue], [ageOldValue, nameOldValue]) => {
        console.log(ageNewValue, ageOldValue, 'zfb----age')
        console.log(nameNewValue, nameOldValue, 'zfb----name')
      },
      {
        immediate: true
      }
    )

    
    setTimeout(() => {
      stop()
    }, 2000)