computed，filters

computed

当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新
这里的数据跟methods中的数据一样，最后都会被放在vm实例上，因此不能和data中的数据重名
有两部分：get（必须有） set ，一般通过js赋值影响其他元素或者表单元素设置值的时候回调用set
实现复选框的多选不选功能

<script>
    new Vue({
        el: '#app',
        computed: {
          checkAll: {
              get(){ // 返回什么checkAll的值就是什么
                  return this.products.every((item) => item.isSelected );
              },
              set(val){ // 改自己的值影响其他的 val是给checkAll赋值的时候传过来的
                  this.products.forEach(item => {item.isSelected = val});
              }
          }
        },
        data: {
           products: [{isSelected: true}, {isSelected: true}, {isSelected: true}]
        }
    });
</script>

根据输入框实时计算错误信息

 <input type="text" v-model="a">{{tips}}
 <!--根据输入框的内容算出一个错误信息-->
<script>
    new Vue({
        el: '#app',
        computed: {
          tips(){
              return this.a.length < 6 ? '密码至少6位' : null;
          }
        },
        data: {
           a: ''
        }
    });
</script>

计算属性写成函数，默认就调用的是get方法

sum: { 
  get() {
    return this.products.reduce((prev, next) => {
    // 当前没被选中就不加
    if(!next.isSelected){ 
       return prev;
    }
    return prev + next.productPrice*next.productCount
     }, 0)
 }
}
// same as
sum() {
    return this.products.reduce((prev, next) => {
    // 当前没被选中就不加
       if(!next.isSelected){ 
           return prev;
       }
    return prev + next.productPrice*next.productCount
     }, 0)
 }

computed和 watch
computed默认调用get方法，必须要有return不支持异步
下面方法的返回值是给setTimeout了，而tips就相当于returnundefined，所以此时页面上就不会有提示效果

tips(){
    setTimeout(function () {
        return this.a.length < 6 ? '密码至少6位' : null;
    }, 500)
}

watch观察者，观察一个属性的变化，他变了就做一件事，并且watch的属性名要和被观察的属性名保持一致 只有值变化的时候才触发 支持异步 默认只监控一层的数据变化，深度监控不能用函数，要用对象

watch: {
     a(newVal, oldVal){ // 只有值变化的时候才触发 ，支持异步
        setTimeout(function () {
            this.msg = newVal.length < 3 ? 
                       '密码至少3位' : newVal.length > 6 ? 
                       '密码最多6位' : null;
        }, 500)
     }
},

watch: {
        todos: { // 默认只监控一层的数据变化
            handler(){  // 属性写成函数，默认就写了个handler
                
            },
            deep: true //表示深度
        }
    }

computed和 method
computed有缓存，如果依赖的数据没有变化就不会重新执行，是计算属性，不是方法，method是方法，不会缓存

filters

实例上可用，实例间不可公用，若挂在Vue原型上则可公用

{{'123' | myFilters(1,2,3)}}

<script>
    let vm = new Vue({
        el: '#app',
        filters: {
            // data是input 竖线前面的值，后面才是参数
            myFilters(data,  param1, param2, ...){}
        }
    });
</script>

第二个会报错，显示Failed to resolve filter: myFilters，因为这个过滤是给第一个实例上定义的方法

<div id="app">
    {{'hello' | myFilter}}
</div>
<div id="app1">
    {{'hello' | myFilter}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        filters: {
            myFilter(data){
                return data + " world！ "
            }
        }
    });
    let vm1 = new Vue({
        el: '#app1',
    });
</script>

挂在原型上，全局过滤器，一定要放在实例创建之前

<script>
   Vue.filter('myFilter', (data)=>{return data+' world!';});
   new Vue({
        el: '#app'
        }
    });
    new Vue({
        el: '#app1',
    });
</script>