Vue 基础1.1 应用语法+知识点补充

Vue基础_v-for更新监测

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

-key key值 为索引或者 无key值 默认就地更新策略，尽可能的复用相同的Dom操作，减少Dom操作。当key值为 唯一字符串或数字时，是执行新旧Dom对比，使用key进行比较，差异更新，相当于打补丁的形式。

动态设置属性 class 和 style

• class 作用是根据 布尔值来动态控制类名是否生效 用法:class="{类名：布尔值（boolean）}"
• style 作用是 动态添加行内样式 用法 :style="{css样式名：css样式值}" （注意连续符改为驼峰命名）

计算属性

• computed 作用是依赖多个数据计算得来的结果，依赖的数据变化时自动更新结果，特点有：1 有缓存 2 不能和data里的数据重名 3 依赖数据发生变化自动更新结果。 简单写法：

computed: {
  计算属性名() {
    return 值(可以依赖其他地方的数据)
  }
}

完整写法：

computed: {
  计算属性名: {
    set(val) {}, 
    get() { return 值 }
  }
}

其中 get是 当读取和依赖属性发生变化时自动触发，而set是计算属性被修改时才会触发，触发后会把修改后的值传递过来

Vue侦听器-watch

• 可以侦听data/computed属性值改变，当发生改变是 触发函数执行

简单写法：

watch: {
  要侦听的数据名(newVal, oldVal) {
    // 当数据变化时, 函数调用
  }
}

完整写法

watch: {
  要侦听的数据名: {
    deep: true, // 深度侦听
    handler(newVal, oldVal) {}
  }
}

深度侦听 主要用来侦听数组和对象的内部属性变化

知识点补充

1 重绘：页面上的元素 颜色 透明度 等 信息发生改变是 会导致浏览器触发重绘

2 回流 : 页面上元素的几何信息（大小/位置）发生变化时 会导致浏览器触发回流。 （回流一定会触发重绘，重绘不一定触发回流）

3 虚拟Dom: 虚拟化DOM是记录关键DOM节点信息的 JS 对象，真实 DOM 一旦修改立即会触发页面重绘或回流，而且真实 DOM 太大，遍历属性更耗时。

4 diff算法对比规则 ：当数据更新是，新旧DOM术 逐层对比，有key就对比key，无key就地更新