vue2 computed 、watch --vue3 computed 、watch

最新推荐文章于 2024-06-21 14:30:54 发布

顾辰呀

最新推荐文章于 2024-06-21 14:30:54 发布

阅读量283

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45776545/article/details/139521205

版权

vue2 computed

  computed: {
    FBAAddressListComputed2 () {
      if (!noFbaInput) return receiveAddressList.value
      const lowerCaseInput = fbaInput.value.toLowerCase()
      return receiveAddressList.value.filter((item) => {
        return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city, item.address].some(
          (field) => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
        )
      })
    }
  },

  watch: {
    orgOwner (newVal) {
      this.init(newVal)
    },
    form: {
      handler: function (newVal, oldVal) {
        const { pickUpAddress, pickUpTime, warehouseId, addressValue } = newVal
        if (!Object.keys(addressValue).length) return
      },
      deep: true 
    },

  },

vue3 computed vue3

  import { ref, onMounted, watch, reactive, computed } from 'vue'  

  watch(fbaInput, newV => {
    if (!fbaInput.value) return (searchFbaList.value = FBAAddressList.value)
    const lowerCaseInput = fbaInput.value.toLowerCase()
    searchFbaList.value = FBAAddressList.value.filter(item => {
      return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city, item.address].some(
        field => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
      )
    })
  })


  // 监视ref所定义的多个响应式数据
  watch([sum, msg], (newValue, oldValue) => {
      console.log("sum/msg ==> ", newValue, oldValue);
    },{immediate:true});


// 监听对象中的某个值
    watch(
      () => obj.value.name,
      (newValue, oldValue) => {
        console.log(`Name changed from ${oldValue} to ${newValue}`);
      }
    );

    // 或者使用深度监听
    watch(
      obj,
      (newVal, oldVal) => {},
      { deep: true }
    );

  const FBAAddressListComputed2 = computed(() => {
    if (!noFbaInput) return receiveAddressList.value
    const lowerCaseInput = fbaInput.value.toLowerCase()
    return receiveAddressList.value.filter(item => {
      return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city, item.address].some(
        field => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
      )
    })
  })