一、过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式 化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符 ”进行

调用，示例代码如下：

1、定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代

码如下：

2、私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器 ”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式

定义全局过滤器：

3、连续调用多个过滤器

过滤器可以串联地进行调用，例如：

示例代码：

在企业级项目开发中：

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能

如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代

替被剔除的过滤器功能

二、watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的

变化做特定的操作。

语法格式如下：

使用 watch 检测用户名是否可用侦听属性 watch：

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检

测当前输入的用户名是否可用

immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。

如果想让 watch 侦听器立即被调用，则需要使

用 immediate 选项。示例代码如下：

deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选

项，代码示例如下：

三、 Computed 计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods方法使用。示例代码如下：

计算属性 computed 特点

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

案例：全选和非全选

步骤：1、先写数据 data

2、进行 v-for 遍历数据渲染视图

3、进行对 id 的过滤处理

4、找到监听的元素实施监听

相同

1   computed 和 watch 都是观察页面的数据变化的。

2   watch、computed 与 data 同级

不同：

1   Computed  计算监视对象,写在了函数内部,凡是函数内部 有 this.相关属性 改变都会触发当前函数，当数据没有变化时，它 会读取缓存。而 watch 每次都需要执行函数。methods 也是每次都需

要执行

2   数据变化时执行异步操作，这个时候使用 watch

3   watch 监听单个，computed 监听多个

4   Computed 监听的属性不能和 data 中的属性冲突，但是watch

中监听的属性必须在 data 中声明了

案例：

买狗子购物车

练习：购物车

要求：

1.添加课程和价格的功能，添加上的商品会显示在列表当中

2.点击添加购物车，此商品会添加到下面的表格中

3.购物车中的数量可以加减

4.购物车下面有选中的课程记录，和选中商品的金额