v-for更新机制-计算属性-过滤器-侦听器

1.vue基础
1.0 v-for更新监测
数组变更方法，就会导致v-for更新，页面更新
数组非变更方法，返回新数组，就不会导致v-for更新，可采用覆盖数组或者this.$set()来设置
数组方法改变，v-for会监测并更新页面

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
• 这几个不会触发v-for更新

• slice()* filter()* concat()
  1.1v-for的原地更新
  v-for 的默认行为会尝试原地修改元素而不是移动它们。
  在新旧虚拟DOM中对比那些发生了变化，然后进行更新
  这种 虚拟DOM对比方式, 可以提高性能 - 但是还不够高
  1.2虚拟DOM
  虚拟DOM的本质是一个JS对象。
  vue数据更新
• 生成新的虚拟DOM结构
• 和旧的虚拟DOM结构对比
• 利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁。
• 优点1：提高了更新DOM的性能(不用把页面全删除重新渲染)
  优点2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)
  虚拟DOM保存在内存中，只记录DOM关键信息，配合diff算法提高DOM更新的性能
  1.3diff算法
  vue用diff算法，新旧虚拟DOM进行比较
  情况一：根元素变化，删除重建
  情况二：跟元素没有变化，属性改变，元素复用，更新属性
  情况三：根元素没有变，子元素没有变，元素内容改变
  无key 就地更新
  v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示。
  有key-值为索引

• 还是就地更新
  因为新旧虚拟DOM对比, key存在就复用此标签更新内容, 如果不存在就直接建立一个新的。
  有key - 值为id
  key的值只能是唯一不重复的, 字符串或数值
  v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示
  新DOM里数据的key存在, 去旧的虚拟DOM结构里找到key标记的标签, 复用标签
  新DOM里数据的key存在, 去旧的虚拟DOM结构里没有找到key标签的标签, 创建
  旧DOM结构的key, 在新的DOM结构里没有了, 则==移除key所在的标签。
  1.4 动态class
  目的：用v-bind给标签class设置动态的值
  语法：:class="{类名: 布尔值}"
  1.5动态style
  目的：给标签动态设置style的值
  语法 :style="{css属性: 值}"
  2.vue 过滤器
  目的：转化格式，过滤器就是一个函数，传入值返回处理后的值。
  过滤器只能用在 插值表达式和v-bind 表达式中
  2.0vue过滤器使用的场景
  处理时间的格式，字符串的翻转，大小写转化
  语法：
  全局注册：
  Vue.filter("过滤器名", (值) => {return "返回处理后的值"})
局部注册：
  filters: {过滤器名字: (值) => {return "返回处理后的值"}
小计： 把值转成另一种形式, 使用过滤器, Vue3用函数替代了过滤器.
  全局注册最好在main.js中注册, 一处注册到处使用
  2.1 vue过滤器-传参和多过滤器
  目的：可以同时使用多个过滤器，或者给过滤器传参
  语法：* 过滤器传参: vue变量 | 过滤器(实参)
  *多个过滤器: vue变量 | 过滤器1 | 过滤器2
  3.vue计算属性
  3.0计算属性-computed
  目的：一个数据，依赖另外一些数据计算而来的结果
  语法：

computed: {
    "计算属性名" () {
        return "值"
    }
}

应用场景 购物车的结算
3.1vue计算属性-缓存
目的：计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果。
优点：计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高。
4.vue侦听器
4.0 vue侦听器-watch
目的：可以侦听data/computed属性值的变化
语法：

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

小技巧：想要侦听一个属性变化, 可使用侦听属性watch
4.1vue侦听器-深度侦听和立即执行
目的：侦听复杂数据类型或者立即执行函数的侦听
语法：

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {  
        }
    }
}