vue中watch和computed的使用案例:

Sun Peng

已于 2022-10-11 23:44:41 修改

阅读量615

点赞数

分类专栏： Vue框架小程序端文章标签： vue.js javascript ecmascript

于 2022-08-16 19:59:48 首次发布

本文链接：https://blog.csdn.net/weixin_53791978/article/details/126373215

版权

Vue框架同时被 2 个专栏收录

140 篇文章 12 订阅

订阅专栏

小程序端

57 篇文章 6 订阅

订阅专栏

本文介绍了Vue.js中watch侦听器的使用，特别是在搜索文本变化时如何利用防抖(debounce)进行性能优化。同时，展示了如何在computed计算属性中实现推荐频道的逻辑，当添加或删除频道时，自动计算推荐结果。通过对这两个关键特性的讲解，有助于开发者更好地理解和应用Vue.js的响应式机制。

摘要由CSDN通过智能技术生成

1.watch侦听器:

watch: {
  //搜索时文本发生变化,会重新调用搜索的接口(只改变自己)
  searchText: {
    // 当searchText发生改变,调用handler函数(名称固定)
    // handler(value) {
    //     this.getSearchSuggestionsList(value)
    // },
   /* 
      优化防抖

       debounce函数:
          参数一:一个函数
          参数二:延迟时间,单位毫秒
          返回值:防抖之后的函数
    */
     handler: debounce(function (value) {
        this.getSearchSuggestionsList(value)
     }, 200),
     immediate: true, //侦听之后立即被调用
  }
},

2.computed计算属性:

computed: {
  // 获取推荐频道  (通过全部和我的,获取推荐的,当需要添加删除时,只用做推荐的,其余会自动算出)
  recommendChannel() {
     const that = this
     const channels = []
     that.allChannelList.forEach(item => {
         const data = that.myChannelList.find(res => {
            return res.id == item.id
         })
     	if (!data) {
            channels.push(item)
        }
     })
     return channels
   }
 },