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里(一进入页面就执行)