vue基础 计算属性 侦听器

1.Vue基础_v-for更新监测

数组变更方法, 就会导致v-for更新, 页面更新

数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

这些方法会触发数组改变, v-for会监测到并更新页面

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

这些方法不会触发v-for更新

• slice()

• filter()

• concat()

注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

总结: 改变原数组的方法才能让v-for更新

2.Vue基础_v-for就地更新

v-for 的默认行为会尝试原地修改元素而不是移动它们

从变化节点往后, 会依次变化

这种 DOM对比方式, 可以提高性能 - 但是还不够高

3.Vue基础_虚拟DOM

1.内存中生成一样的虚拟DOM结构(==本质是个JS对象==)

因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了

2.以后vue数据更新

• 生成新的虚拟DOM结构

• 和旧的虚拟DOM结构对比

• 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁

==好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)==

==好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)==

4.Vue基础_key作用

无key - 就地更新

v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

有key - 值为索引 - 就地更新

• 还是就地更新

因为新旧虚拟DOM对比, key存在就复用此标签更新内容, 如果不存在就直接建立一个新的

有key - 值为id - 性能最高

key的值只能是唯一不重复的, 字符串或数值

5.Vue基础_动态class

语法:

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

 总结: 就是把类名保存在vue变量中赋予给标签

6.Vue基础-动态style

语法

• :style="{css属性: 值}"

 总结: 动态style的key都是css属性名

7.Vue计算属性-computed

一个数据, 依赖另外一些数据计算而来的结果

计算属性给v-model使用

语法:

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

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

8.Vue计算属性-缓存

// 计算属性优势:
  // 带缓存
  // 计算属性对应函数执行后, 会把return值缓存起来
  // 依赖项不变, 多次调用都是从缓存取值
  // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值

总结: 计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

9.Vue计算属性-完整写法

语法:

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

set接收要赋予的值
get里要返回给这个计算属性具体值

10.Vue侦听器-watch

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

语法:

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

11.Vue侦听器-深度侦听

• 语法:

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