vue中watch和computed的使用案例:

1.watch侦听器:

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

       debounce函数:
          参数一:一个函数
          参数二:延迟时间,单位毫秒
          返回值:防抖之后的函数
    */
     handler: debounce(function (value) {
        this.getSearchSuggestionsList(value)
     }, 200),
     immediate: true, //侦听之后立即被调用
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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
   }
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16