vue 学习之计算属性/方法/侦听属性

计算属性（computed） 方法（methods） 侦听属性（watch）

1. 计算属性 （computed）

模板变内的表达式过于复杂时，难以维护，这时便可以使用计算属性

例如：{{ name && length && name.length >6 ? name.substr(0,6)+'...' : name }} //模板中放入过长或逻辑复杂的表达式时，后期维护会比较复杂

可以转化为{{ cutString }}

在计算属性中

computed:{

cutString(){

          let name = this.name

          return name && name.length >6 ? name.substr(0,6)+'...' : name

}

}

2. 方法（methods）

同上的逻辑，可以把计算属性中的cutString()方法写在 methods(){}里面

二者的区别为：计算属性依赖为this.name的数据进行缓存，只有当this.name的值发生改变时，才会重新计算

方法 是每次访问cutString() 都会重新计算

可根据实际应用需求是否需要缓存数据来区分使用计算属性还是方法。

3. 侦听属性（watch）

用于观察和响应 Vue 实例上的数据变化

当数据变化时需要进行异步操作或者开销比较大的操作时，可以用侦听属性。

注：一般的数据变化进行的操作可以用计算属性来计算

例如：

watch:{

        name:{

             this.getDataList();//此方法用于重新获取数据

        }

},

methods:{

       getDataList: function (){

                let url = '/'

                axios.get(url).then(res=>{

                    //todo

                })

      }

}

ps:计算属性中的例子，也可以使用过滤器

{{name | cutString()}}  // 过滤器默认第一个参数是 | 前的变量，custring(data1,data2)中，可以继续传参，作为第二个第三个

filter:{

      custring:function(name){

            return name && length &&  name.length>6 ? name.substr(0,6)+'...' :name;

     }

}