v-for更新、key作用
v-for更新监测
数组方法会改变原数组，就会导致v-for更新。数组方法不会改变原数组，而是返回新数组，就会导致v-for更新，可采用覆盖数组或this.$set(数组,索引,值)
数组方法
- 不会修改原始数组的方法不会导致v-for更新
- array.filter
- array.slice
- 修改原始数组的方法会导致v-for更新
- array.push
- array.reverse
key的作用
- 数组变化v-for有key和无key是如何更新DOM的
- 无key，就地更新
- 有key，根据key查找元素，定位和更新
- key值的要求：唯一不重复的字符串或者数值。
- key的使用：有id用id，无id用索引。
- 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
