Watch监听 Computed计算属性 filters过滤器

Watch监听 Computed计算属性 filters过滤器

Watch 监听:

(监听数据和路由的变化)选项允许我们执行异步操作(访问一个API),限制我们执行该操作的频率,并在我们的到最终结果前,设置中间状态。这是计算属性无法做到的。

watch可以监听data中的新旧值
三个参数:handler(操作函数) deep(深浅监听) immediate(立刻)

掩饰代码:

Eg:watch: {
    year: {
      handler (newValue, oldValue) {
        console.log('时间又过去了1年,今年是' + newValue)
        console.log('新值是' + newValue + ',旧值是' + oldValue)
      },
      immediate: true,
      deep: false
    },
   }

过滤器 filters

可以在差值语句和属性棒等的时候用,用法是原本的值 | 过滤器,在左右的实例里都能用,如果全局跟局部的过滤器重名的话,优先使用局部的
过滤器可以在差值语句和v-bind后用,过滤器默认的第一个参数是你要过滤的那个数据
第一个参数是你要过滤的那个数据,第二个参数是给过滤器传的值

一、用法两种:
1.在双花括号插值:

{{ 'ok' | globalFilter }}

2.在v-bind表达式中使用

<div v-bind:data="'ok' | globalFilter" ></div>

二、私有过滤器:
1.HTML元素中:

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

2.私有 filters 定义方式:

局部过滤器:
filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用
}
全局过滤器:
Vue.filter('dataFormat', function (input, pattern = '') {}

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用

Computed计算属性

计算属性 本质是一个data 必须要有一个return值 有缓存功能

computed 计算属性的用法?与 watch、methods(方法) 的区别?分别简述 computed 和 watch 的使用场景?

==计算属性默认只有 getter ==

computed 的属性可以被视为是 data 一样,可以分成 getter(读取) 和 setter(设值)一般情况下是没有 setter 的,computed 预设只有 getter ,也就是只能读取,不能改变设值。

 computed,在页面加载时直接调用,大多用来页面的初始赋值
 methods,这里面写的是函数,不调用时不会调用其中函数,通过@click等事件触发函数,才会执行
 watch,用来观察数据变动,比如用路由,列表页跳转到详情页时,详情也会存在,页面不重新渲染的问题,使用watch就能解决这个问题
computed和methods的区别?
①在调用的时候一个是属性的调用,一个是方法的调用(加不加())
②computed有缓存功能,methods没有
③跟在事件之后的方法就放在methods里,不跟在事件之后的方法就放在computed里(一进入页面就执行)
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页