一. vue过滤器

1.定义及使用

过滤器只能用在, 插值表达式与 v-bind 表达式中

语法:

全局定义的过滤器,在main.js 中定义 Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) 局部定义的过滤器 filters: {过滤器名字: (值) => {return "返回处理后的值"}

2.传参与多过滤器

可同时使用多个过滤器, 或者给过滤器传参

语法:

过滤器传参: vue 变量 | 过滤器传参 多个过滤器: vue变量 | 过滤器1 | 过滤器2

二. vue 计算属性 - computed

当 一个变量的值, 需要依赖另外一些数据计算而得来 时使用

语法:

computed: { "计算属性名": { set(值){ //想要给计算属性赋值, 需要用到 set 方法 }, get() { return "值" } } }

注意:

计算属性 与 data 属性都是变量 --不能重名 函数内变量变化, 会自动重新计算结果返回

缓存:

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

计算属性的优势

带缓存 计算属性对应函数执行后, 会把return值缓存起来 依赖项不变, 多次调用都是从缓存取值 依赖项值变化, 函数会"自动"重新执行并缓存新的值

总结: 计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

三. vue侦听器-深度侦听和立即执行

侦听复杂类型, 或者立即执行侦听函数

语法:

watch: { "要侦听的属性名": { handler (newVal, oldVal) { } immediate: true, // 立即执行,网页打开handler执行一次 deep: true, // 深度侦听复杂类型内变化,对象里面层的值改变 } }

四、computed与watch的区别

区别一：

computed计算属性就是为了简化template里面模版字符串的计算复杂度、防止模版太过冗余。它具有缓存特性。computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据，它不具有缓存性

区别二：

watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。

computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。

区别三：

计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性。