vue computed属性、方法操作数据、watch、filters

参考文章：https://www.cnblogs.com/gunelark/p/8492468.html

computed

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

var vm = new Vue({
    el:'.app',
    data:{
        Math:88,
        English: 77,
        chemistry:99,
    },
    computed:{
        sum:function(){
            return this.Math+ this.English+this.chemistry;
        },
        average:function(){
            return Math.round(this.sum/3);
        },
      // computed 携带参数，需要闭包
      stars () {
          return function (star) {
            var count = 0
            star.forEach((item, index) => {
               if (item) {
                count++
              }
            })
            return count
         }
      }
    }
});

然后在需要显示的标签上渲染

<span>总分：{{sum}}</span>
<span>平均分：{{average}}</span>

方法操作数据

computed里面的区块移到methods中，模板中将{{ xxx }} 替换成{{ xxx() }}结果是一样的
虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。使用这种方法totalMarks()方法在每次页面渲染时都被执行一次

watch

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控
watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
用法参考：https://www.jianshu.com/p/dcf8a6ad8429

filters

用于简单的数据格式，在应用程序的多个位置都需要它
用法参考：https://www.jianshu.com/p/0c7e2b2e6b92