【无标题】Vue计算属性computed、过滤器与侦听器

v-for更新、key作用

v-for更新监测

数组方法会改变原数组，就会导致v-for更新。数组方法不会改变原数组，而是返回新数组，就会导致v-for更新，可采用覆盖数组或this.$set(数组,索引,值)

数组方法

1. 不会修改原始数组的方法不会导致v-for更新

   • array.filter
   • array.slice

2. 修改原始数组的方法会导致v-for更新

   • array.push
   • array.reverse

key的作用

1. 数组变化v-for有key和无key是如何更新DOM的

   • 无key，就地更新
   • 有key，根据key查找元素，定位和更新

2. key值的要求：唯一不重复的字符串或者数值。

3. key的使用：有id用id，无id用索引。

4. key的好处：可以配合虚拟DOM提高更新性能。

Vue标签动态设置

动态class

• 语法： :class = "{ 类名: 布尔值 }"

• 类名有横线，加引号。

动态style

• 语法： :style = "{ 属性名: 样式值 }"

• 样式名有横线，加引号或者小驼峰。

过滤器

作用：转换格式，过滤器就是一个函数，传入值返回处理后的值。

过滤器只能用在插值表达式和v-bind动态属性里。

声明：Vue文件data同级的filters属性里

Vue中的过滤器场景

• 字符串翻转：{{ hi | reverse}}

• 字母转大写：{{"hello" | toUpperCase}}

定义过滤器

• main.js – Vue.filter('过滤器名字', 方法)

• 某.vue文件 – filters: {'过滤器名字': 方法}

语法

• 过滤器传参：{{ 表达式 | 过滤器(参数) }}

• 多个过滤器：{{ 表达式 | 过滤器1 | 过滤器2(参数1) }}

计算属性 - computed

作用：根据一些变量运算出来的属性。

声明：data同级的computed对象里。

计算属性方法要返回值。

完整写法： { get() {}, set(value) { } }

set函数和get函数什么执行：

• 给计算属性赋值的时候触发set函数。

• 获取计算属性的时候触发get函数。

侦听器

作用：可以侦听data / computed属性值改变

侦听一个属性变化，可使用侦听属性watch

语法：watch: { "被侦听的属性名" (newVal , oldVal) { } }

侦听复杂类型

• 立即侦听：immediate

• 深度侦听：deep

• 固定方法触发：handler