vue 基础 API

vue 基础 API

v-for 中 key 的作用

重绘和回流

• 重绘

  • 页面上元素的颜色、透明度等信息改变时会触发重绘

• 回流

  • 页面上元素的大小、为止等信息改变时会触发回流

• 结论

  • 回流一定会触发重绘，重绘不一定会触发回流

虚拟 DOM

• 是什么？

  • 记录了关键 DOM 节点信息的 JS 对象

• 为什么要用虚拟 DOM？

  • 真实 DOM 一旦修改立即会触发页面重绘或回流
  • 真实 DOM 太大，遍历属性更耗时

• 怎么用（diff 算法对比规则）？

  • 当数据更新时，将新旧 DOM 树，逐层对比，有 Key 就对比 Key，无 Key 就地更新

无 Key

• 就地更新策略

  • 尽可能的复用相同的 DOM 元素，减少 DOM 操作

Key 是 index

• 和无 Key 一样是就地更新

Key 是 id

• 唯一的字符串或数字
• 新旧 DOM 对比时，使用 Key 进行比较，差异更新

动态设置 class 和 style

class

• 作用

  • 根据 boolean 值来动态控制类名是否生效

• 用法

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

style

• 作用

  • 动态的添加行内样式

• 用法

  • :style="{css 样式名: 样式值}"
  • 连接符改为驼峰命名

计算属性

作用

• 依赖多个数据计算得来的结果，依赖的数据变化时会自动更新结果

特点

• 依赖数据变化会自动重新调用
• 有缓存
• 不能和 data 中的数据重名

用法

• 简单写法

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

• 完整写法

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

  • 当计算属性被修改时会触发 set 方法, 并把修改的值传递过来

侦听器

作用

• 侦听数据变化, 触发函数执行

用法

• 简单写法

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

• 完整写法

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