vuejs 中的 computed,watch（和 filter）

我们现在已经知道如何把模型中的数据放到视图里，但这里有一个问题，如果我们模型里的数据要经过处理才能放到视图上的话，我们就需要用到方法。比如说我们在模型里有一个 username 属性，它的值是小写的，但是我们想把它转换成大写，我们就要对数据进行处理，如下面的代码所示

<div id="box">
   <h3>{{ name }}</h3>
   <h3>{{ name.toUpperCase() }}</h3>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: 'lili',
        }
    })
</script>

上面的方法是直接在插值表达式里使用方法，我们知道插值表达式是支持方法的，所以没问题，能得到我们想要的结果。但是这还只是简单的一个方法，如果它很复杂的话，我们直接写在插值表达式里就很不好了，不好看，也会让页面加载负荷变大。那我们是不是可以在别的地方先把这个操作做完，然后在差值表达式里调用，这样不就可以了吗。而在vuejs 里也提供了这么一个空间（computed），让我们可以再里面写逻辑业务

computed：计算属性

computed 翻译过来叫做计算出来，意思是某个属性是依靠其他的模型变量进行计算得来的。它其实也是一个对象，用来存放方法的

特点：它里面定义属性是依赖于其他的属性的，并且计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

注意：1：computed 和data 一样是 Vue 里面的一个属性，它和 data 还有 el 是同级的
2：我们一般用 es6 语法去写函数，更便利
3：计算属性将被混入到 Vue 实例中，里面的所有 this 都是指向 Vue
4：所以在里面最好不要使用箭头函数，因为如果你使用了箭头函数，那么 this 就会指向 window
5：我们在用它的时候不要加（），在 computed 里面，是属性方法调用，函数方法书写，所以不要加（）！不要加（）！不要加（）！

我们来看上面的例子，上面是直接在插值表达式里进行运算，现在我们可以在 computed 里先执行，然后把值返回到视图就可以了

computed 演示

<div id="box">
   <h3>{{ name }}</h3>
   <h3>{{ upperName }}</h3>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: 'lili',
        },
        computed: {
        //es6 语法
        upperName (){
        	return this.name.toUpperCase();
        	}
        }
    })
</script>

从上面可以看出，computed 计算属性的实质是 封装一个函数，然后在需要的地方去调用它，我们想到，之前我们说过 methods 这个属性就是用来存放方法的，那为什么我们不把这个方法放到 methods 里呢？我们用 methods 试一下

methods 演示

<div id="box">
   <h3>{{ name }}</h3>
   
   <h3>{{ upperName }}</h3>
   <h3>{{ upperName }}</h3>
   
   <h3>{{ mName() }}</h3>
   <h3>{{ mName() }}</h3>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: 'lili',
        },
        computed:{
            upperName ( ){
                return this.name.toUpperCase();
            }
        },
        methods: {
            mName ( ){
                return this.name.toUpperCase();
            }
        }
    })
</script>

我们可以看到，methods 也可以实现效果，那他们之间有什么不同呢？

computed 和 methods 的不同

1：computed 是属性方法调用，函数方法书写，在使用它的时候不需要加（）；而 methods 是函数方法调用，要加（）；
2：当 属性值不发生变化的时候，computed 只执行一次，而 methods 则是有几个地方用到它，就执行几次，如上面的例子，只要 name 的属性值不发生变化，computed 就是执行一次，而 methods 会执行两次

watch：监视，监视某个模型的变化

在表单里，常常有这样的需求，就是在你输入用户名或者密码的时候，在后面会给出提示，如输入字符不能小于2个，输入字符不能大于20个，并且提示是随着你实时输入的东西进行改变的。我们之前实现这种功能是用了 onchange 事件来实时监测输入框里内容的变化，而在 vuejs 里，它给出了我们一个属性（watch），就是用来监测某个模型的变化的，我们来看下面的列子

<div id="box">
	username: <input type="text" v-model.trim="username" /> <span style="color: red">{{ tip }}</span>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            username: '',
            tip: '',
        },
        // 这里用watch,监视的是 username
        watch: {
            username ( newVal, oldVal ) {
                if(!newVal){
                    this.tip = "用户名不能为空";
                    return;
                }
                if(newVal.length <= 2){
                    this.tip = "用户名长度不能小于2";
                    return;
                }
                if(newVal.length >= 20){
                    this.tip = "用户名长度不能大于10";
                    return;
                }
                this.tip = '';
            }
        }

    })
</script>

从上面的例子我们可以看出，watch 是和 data 同级的一个属性，也是一个对象，它的属性名就是我们要监控的模型（username ），同时它有两个参数 newVal（新的值），oldVal （旧的值），监控的模型只要发生变化，新的值就会传给 newVal，我们就能实时监控模型的变化了
我们想到 computed 是依赖于其他的属性的，那么他所依赖的属性如果发生变化，那么 computed 也会发生改变，这样也是实时监控了模型，那 computed 和 watch 之间有什么区别呢？

computed 和 watch 的不同

其实他们的差别还是很大的
1：watch 是用来监控模型变化的，而 computed 用计算属性的，只不过他随着依赖属性的变化而变化，所以我们可以用它做来监控
2：如果我们的业务代理里面存在异步操作，则 computed 则不可以使用，则必须使用 watch 实现
但是就功能而言，他们的差别除了在异步里面之外，其他也没有什么了
对于目前的业务来说，我们只是实现前端的用户名的合法性校验， 真正要检验的应该是用户名是否在数据库里面重复，则这个时候需要使用ajax 进行异步请求后，得到响应的结果后进行消息的提示，发现 computed 里面的信息都是return出去的，但是如果有异步请求，则肯定会出现回调函数。则这个时候的 return 没有意义了。所以我们要用 watch

filter：过滤器

filter：过滤器，负责数据进行处理

他在2.x 中已经被移除了，虽然被移除，但是功能还在，所以我们还是要学习他。

vuejs 中自带了一些过滤器：
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
currency 输出金钱以及小数点…

也可以自定义我们自己的过滤器

使用方法：

我们知道在操作系统里面有操作系统管道的使用方式，就是可以把前面一个命令的输出作为下一个命令的输入，（可以叫做 管道，或者叫做过滤器），在 vuejs 里面也提供了类似操作系统管道的使用方式，在vuejs里面可以叫做过滤器，有的地方（程序员）也叫作变量调节器，来看下面这个例子

<div id="box">
//capitalize 是vuejs 1.x 自带的过滤器，所以要使用的话，我们引进的 vuejs 版本要是 1.x 的
    <p>{{ name | capitalize }}</p>
    //运行后我们可以知道他的表现是：Lili
    //执行方式就是 name 作为 capitalize 的输入，经过这个过滤器的处理，把它转换成首字母大写的形式输出
</div>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili"
        }
    })
</script>

由于过滤器在 2.x 版本已经被移除了，所以在这里就不多做解释了（主要是我自己也是只知道一点）