记录我在使用watch时常用的方法

1、watch监听

data(){
  return{
    tempValue:'',
  }
}
watch:{
  tempValue:{
    handler:function(new,old){
      //new 是新值
      //old 是旧值
      //里面写处理方法
    },
    immediate:true,// 在watch声明时，立即执行
    deep:true,// deep深入监听
  }
}

注意：ES6中推出了箭头函数，上述例子未使用箭头函数，如果在handler函数中使用了箭头函数，改变了this指向，就无法获取到Vue实例，则为undifined。所以在这不要用箭头函数，如果用， let that = this.

作者：zsyyyyy
链接：https://www.jianshu.com/p/5d113b2b10a4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2、计算属性computed

<style>
    <p>计算属性 {{setArr}}</p>
</style>
<script>
    data(){
        return:{
            tempArr:[1,2,2,1,33,23,33]
        }
    }
    computed(){
    //方法名，使用的时候直接调用名字
      setArr:{
        return new Set(tempArr)
      }
    }
</script>

3、过滤器filter

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

官方文档：https://cn.vuejs.org/v2/guide/filters.html

• 过滤器分为局部过滤器和全局过滤器

• 局部过滤器filters

<style>
  <p>过滤器filter：{{curDate | forMatterDate}}</p>//2021-10-10
</style>
<script>
data(){
  return:{
    curDate :"20211010"
  }
}
filters:{
  //过滤器名，使用的时候参数 | 名字，参数会作为过滤器函数的 第一个参数
  //过滤器有三个参数，第一个作为要处理的元素，第二个是索引，第三个是原数组
  forMatterDate（params,index,arr）{
    return params.substr(0,4)+'-'+params.substr(4,2)+'-'+params.substr(6,2)
  }
}
</script>

• 全局过滤器filter

//当全局过滤器和局部过滤器重名时，会采用局部过滤器。
-----------------------------------------------------------
起一个js文件 myFilter.js
import Vue from 'vue'
Vue.filter('test',function(val){
  return val + ' world'
})
-----------------------------------------------------------
main.js 中引入
import "./myFilter"
-----------------------------------------------------------
使用:
<p>{{'hello' | test }}</p> // hello world

• 数组过滤

//返回data数组中id为5的数据,返回值为id为5的 数组
var tempArr = data.filter(item=>item.id==5)