模板数据的二次加工

watch、computed

因为watch和computed很相似 所以放在一起说

        watch:

                监听对应某条数据变化, 执行对应逻辑回调.

                不会缓存数据, 必须是data中存在的数据

                不需要return

                如果需要加载执行则需要添加immediate:true属性

                适用于一个数据变化, 影响多条数据时, 执行对应数据逻辑回调

 

 

        computed

                监听多条数据变化, 计算产生一个结果.

                有缓存数据, data中不存在的数据

                需要return一个结果作为计算接结果

                默认加载就会执行

                适用于多个数据变化, 计算产生一个结果时, 执行对应数据逻辑回调

 
 

filters过滤器

        单|竖线为管道符 将前方数据注入后方的注册过滤器函数中处理后返回

                <div>{ { data | format }}</div>

        相当于将data导入format(data)执行

                <div>{ { data | format(val, 'type') }}</div>

        这时data将会作为第一个参数val传入fromat后续参数可自定义传入随意参数执行

        单组件注册:

                filters: {

                        format (val) {

                                return 99 ? 99 || val

                        }

                }

        全局注册

                Vue.filter('format', function (val) {

                        return 99 ? 99 || val

                })

        使用:

                <div>{ { data | format }}</div>

参考： API — Vue.js