Vue基础/v-for/虚拟DOM...v-for 更新监测/虚拟DOM/key作用/计算属性-computed/侦听器

v-for 更新监测

1. 了解v-for更新的机制

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

哪些数组方法会导致v-for更新页面?

可以改变原数组的方法

有的数组方法不导致v-for更新页面, 如何处理?

拿返回的新数组, 直接替换旧数组
this.$set()方法更新某个值

2. v-for就地更新

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

虚拟DOM

概念:vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 在生成真实DOM片段, 才会渲染显示到真实DOM页面上

1.内存中生成一样的虚拟DOM结构(==本质是个JS对象==) 因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了比如template里标签结构 2.0. 以后vue数据更新

   生成新的虚拟DOM结构
   和旧的虚拟DOM结构对比
   找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁

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

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

问答:虚拟DOM是什么?

本质就是一个JS对象, 保存DOM关键信息

虚拟DOM的好处?

提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 更新真实DOM(打补丁)

key作用

基本属性:无key, 就地更新--- 有key为索引, 就地更新--- 有key为id, 对比新旧DOM, 无则创建/删除

问答:子元素或者内容改变会怎么比较?

无key, 就地更新, 有key按照key比较 key值要求是?
唯一不重复的字符串或者数值 key应该怎么用?
有id用id, 无id用索引 key的好处?
可以提高更新的性能

动态class/style

用v-bind给标签class设置动态的值

如何给标签class属性动态赋值?

:class=“{类名: 布尔值}”, true使用, false不用

动态style的语法:style="{css属性: 值}"

计算属性-computed

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

语法: computed: {

"计算属性名" () {

return "值"

}

计算属性特点:函数内使用的变量改变, 重新计算结果返回

注意事项:计算属性名和data里名字不能重复

计算属性的特性:带缓存---依赖项不变, 直接从缓存取---赖项改变, 函数自动执行并重新缓存

计算属性-完整写法

set函数和get函数什么执行?

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

侦听器-watch

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

语法:

如何侦听到某个变量值改变?

使用watch配置项, key是要侦听的data/计算属性名

Vue基础/v-for/虚拟DOM...