Vue笔记三:计算属性 监听器 过滤器

通过new Vue()创建的vue实例 具有以下属性和方法
data(){ return { //存放数据 }}
methods:{//存放事件处理函数}
computed:{//计算属性}
watch:{//监听器}
实例生命周期钩子函数

计算属性

计算属性通常用于 自己不保存属性值而是根据其他属性值动态计算结果时，只要页面上需要的属性值后端或内存中没有直接可用的数据！
new Vue({computed:{属性名(){return 计算结果}}})
计算属性的用法和data中普通属性的用法完全一样
定义计算属性加() 但是使用计算属性时 不加()
vue会缓存计算属性的结果 即使反复计算 只要参与计算的属性值没有改变 就不会重复计算

计算属性 vs method中的函数
相同点:都能通过计算获得计算后的结果
不同点:使用函数必须加() 使用计算属性不用加()
vue会缓存计算属性的计算结果 只要依赖的其他属性值不变就不会重复计算
vue不会缓存函数的执行结果 所以如果多次调用函数 会导致重复计算

    如果更关心执行过程 不关心结果时 首选函数
    如果更关心执行结果 不关心过程时 使用计算属性

监听器

vue通过watch响应数据变化
当需要在数据变化时执行异步或其他操作时 使用watch监听该数据

过滤器

对变量的原始值进行再加工再显示的函数
如何: 定义过滤器函数
Vue.filter(“过滤器名称”,function(oldValue){ return newValue })
使用过滤器 在绑定变量时{{变量|过滤器}}
先将变量值交给过滤器 在此位置显示处理后的新值

 Vue.filter("过滤器名称",function(oldValue,形参1,形参2,..){ return newValue }
 在调用时 谨记 过滤器自动传入变量原始值值 所以默认传入第一个实参 实参列表开始位置对应的是形参列表的第二个