computed，watch，filter的区别_综合

computed

翻译过来是计算出来，意思是某个属性是依靠其他的模型变量进行得来的

<body>
<p>
//在这里插值的是computed里面的change函数<input type="text" v-model="username">{
    {
     change}}
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    //这里已经定义的模型变量不能在computed里面再定义一次，否则会报错username:''},computed:{
    //在这里change定义为一个函数，但是调用时为一个属性change(){
    if(!this.username){
    return '用户名不能为空 '}if( this.username.length<=3){
    return '用户名不能少于三位'}if(this.username.length>=10){
    return '用户名不能超过十位'}}}})
//在这里change函数是依靠data中的username这个模型变量的变化进行得来的
</script>
</body>

watch

翻译过来是监视的意思，监视某个模型的变化

<body>
<p>
//这里插值的是变量信息<input type="text" v-model="username">{
    {
     msg }}
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    username:'',msg:''},watch:{
    //**这里的函数名必须是模型变量里面有的变量** username(){
    if(!this.username){
    this.msg='用户名不能为空'return}if(this.username.length<=3){
    this.msg='用户名不能小于三位'return}if(this.username.length>=10){
    this.msg='用户名不能超过十位'return}}}})</script>
</body>

总结一下：
由上面的例子我们知道了
1，computed与watch的使用方法不一样，
computed：在computed里面定义一个函数，这个函数会返回一个值，然后在插值表达式里面调用它，而且这里是函数的方式定义，属性的方式调用
watch：在watch中定义一个函数，但是在模型里面还要定义一个属性msg（名字随便取的），通过watch里面这个函数去改变msg的值，在插值表达式中调用msg
2，函数名不一样，computed里面定义的函数名不能使用模型变量里面已经有的，否则会报错，watch里面函数名必须是你要监视的那个变量，所以必须是data里面有的属性，
3，虽然最后用户看到的结果都是一样的，但是computed return返回一个值，watch是改变一个值，不过在日常需求下用两个其实没有太大的区别
4，但是如果存在异步函数，例如ajax，return就没有意义，但是其实我刚刚在上面做的表单验证都是前端的验证，真正的验证是要通过数据库查询该用户是否存在，这就一定要用到ajax，用到它就有了异步操作，这个时候return就没有意义了
这个时候computed就不再适用了，要使用watch这个方法

filter

翻译过来是过滤器的意思，负责数据的处理，也叫作变量调节器
vuejs 1.x版本中已经把内置的filter移除了，但是这个方法还是存在的，支持程序员自定义过滤器
1，vue 1.x里面的过滤器，先把1.x版本的vue引进来，在插值表达式中如下书写代码
{ { A| B }}，A的输出作为B的输入，B对A的输出做一些处理再输出
2，下面的例子中currency是将price保留两位小数，并且在前面加上$符号

<body>
<p>{
    {
     price |currency }}
</p>
<script src="https://cdn.bootcss.com/vue/1.0.27/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    price:2.32542332}})
</script>
</body>

vue 2.x中虽然没有内置的过滤器了，但是我们可以自定义
这里有两种过滤器，一种是全局过滤器，一种是局部过滤器
（1）全局过滤器

直接定义在Vue上，而且必须写在实例对象的前面
Vue.filter(参数一，参数二)，
------- 参数一：过滤器名称，必须加引号，
------- 参数二：是一个函数，是过滤器的实现代码，这个函数同样有两个参数，
---------------------参数一：是模型变量，也就是上一个的输出，
---------------------参数二：是其他参数，代表用户的传参

<p>{
    {
     price |toFixed(2)}}//保留两位小数
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.filter('toFixed',(input,parmas)=>{
    return  input.toFixed(parmas)})var vm = new Vue({
    el: "p",data: {
    price:2.32542332}})</script>
</body>

（2）局部过滤器

这个过滤器是写在vm控制器里面的，
toFixed（参数一，参数二）
------参数一：是模型变量，也就是上一个的输出，
------参数二：是其他参数，代表用户的传参

<body>
<p>{
    {
     price |toFixed (2)}}//保留两位小数
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    price:2.32542332},filters:{
    toFixed(input,parmas){
    return  input.toFixed(parmas)}}})</script>
</body>