Vue基础API_计算属性_过滤器_侦听器_品牌管理案例_核心问题

01_v-for更新监测

问题

1. 哪些数组方法会导致v-for更新页面?
2. 有的数组方法不导致v-for更新页面, 如何处理?

答案

1. 哪些数组方法会导致v-for更新页面?
   1. 可以改变原数组的方法
2. 有的数组方法不导致v-for更新页面, 如何处理?
   1. 拿返回的新数组, 直接替换旧数组
   2. this.$set()方法更新某个值

02_v-for如何更新DOM

问题

1. v-for更新时, 是如何操作DOM的?

答案

1. v-for更新时, 是如何操作DOM的?
   1. 循环出新的虚拟DOM结构, 和旧的虚拟DOM结构对比, 尝试复用标签就地更新内容

练习时间：5m

03_虚拟DOM

问题

1. 虚拟DOM是什么?
2. 虚拟DOM好处?

答案

1. 虚拟DOM是什么?
   1. 本质就是一个JS对象, 保存DOM关键信息
2. 虚拟DOM好处?
   1. 提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM(打补丁)

04_虚拟DOM比较

问题

1. diff算法如何比较新旧虚拟DOM?
2. 根元素变化?
3. 根元素未变, 属性改变?

答案

1. diff算法如何比较新旧虚拟DOM?
   1. 同级比较
2. 根元素变化?
   1. 删除重新建立整个DOM树
3. 根元素未变, 属性改变?
   1. DOM复用, 只更新属性

05_虚拟DOM比较内容？

问题

2. 子元素或者内容改变会分diff哪2种情况比较?
3. key值要求是?
4. key应该怎么用?
5. key的好处?

答案

1. 子元素或者内容改变会分diff哪2种情况比较?
   1. 无key, 就地更新
   2. 有key, 按照key比较
2. key值要求是?
   1. 唯一不重复的字符串或者数值
3. key应该怎么用?
   1. 有id用id, 无id用索引
4. key的好处?
   1. 可以配合虚拟DOM提高更新的性能

阶段总结

1. v-for什么时候会更新页面呢?
   1. 数组采用更新方法, 才导致v-for更新页面
2. vue是如何提高更新性能的?
3. 采用虚拟DOM+diff算法提高更新性能
4. 虚拟DOM是什么?
   1. 本质是保存dom关键信息的JS对象
5. diff算法如何比较新旧虚拟DOM?
   1. 根元素改变 – 删除当前DOM树重新建
   2. 根元素未变, 属性改变 – 更新属性
   3. 根元素未变, 子元素/内容改变
      1. 无key – 就地更新
      2. 有key – 按key比较

06_vue_动态class

问题

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

答案

1. 如何给标签class属性动态赋值?
   1. :class=“{类名: 布尔值}”, true使用, false不用

07_vue_动态style

问题

1. 给style赋值和class区别是?

答案

1. 给style赋值和class区别是?
   1. :class="{类名: 布尔值}”, true使用, false不用
   2. :style=“{css属性名: 值}”

练习时间：5m

08_案例_品牌管理(铺设)

问题

1. 用到了哪些技术点?

答案

1. 用到了哪些技术点?
   1. 布局用bootstrap, yarn下载引入使用
   2. v-for把数据渲染到表格里
   3. :class动态判断价格给红色类名

练习时间：30s（输入命令初始化项目）

09_案例_品牌管理(新增)

问题

1. 涉及到了哪些技术点？

答案

1. 涉及到了哪些技术点?
   1. @绑定事件
   2. v-model收集表单数据
   3. .prevent阻止按钮提交表单刷新页面
   4. v-model修饰符
   5. 数组取最后一个元素

练习时间：8m

10_案例_品牌管理(删)

问题

1. 涉及到了哪些技术点?

答案

1. 涉及到了哪些技术点?
   1. .prevent使用
   2. 事件传索引
   3. 删除数组元素方法
   4. id值判断问题

练习时间：3m

11_vue_过滤器

问题

1. Vue中过滤器作用?
2. 如何定义过滤器?
3. 如何使用过滤器?
4. 过滤器注意事项?

答案

1. Vue中过滤器作用?
   1. 传入一个值, 处理后返回另外一个值
2. 如何定义过滤器?
   1. main.js – Vue.filter(‘过滤器名字’, 函数体)
   2. 某.vue文件 – filters: {‘过滤器名字’: 函数体}
3. 如何使用过滤器?
   1. Vue变量 | 过滤器名字
4. 过滤器注意事项?
   1. 插值表达式 / 动态属性

12_vue_过滤器更多用法

问题

1. 多个过滤器使用?
2. 如何给过滤器传额外值

答案

1. 多个过滤器使用?
   1. vue变量 | 过滤器1 | 过滤器2
2. 如何给过滤器传额外值
   1. vue变量 | 过滤器(值)

14_案例_品牌管理(时间格式化)

问题

1. 涉及到了哪些技术点?

答案

1. 涉及到了哪些技术点?
   1. yarn下包
   2. 过滤器定义和使用
   3. moment复习

练习时间：5m

15_vue_计算属性

问题

1. 计算属性使用场景?
2. 计算属性特点?
3. 计算属性注意事项?

答案

1. 计算属性使用场景?
   1. 当变量的值, 需要通过别人计算而得来
2. 计算属性特点?
   1. 函数内使用的变量改变, 重新计算结果返回
3. 计算属性注意事项?
   1. 计算属性名和data里名字不能重复

16_vue_计算属性缓存

问题

1. 计算属性好处是?
2. 计算属性使用场景?

答案

1. 计算属性好处是?
   1. 带缓存
   2. 依赖项不变, 直接从缓存取
   3. 依赖项改变, 函数自动执行并重新缓存
2. 计算属性使用场景?
   1. 当变量值, 依赖其他变量计算而得来才用

17_案例_品牌管理(总价和均价)

问题

1. 涉及到的知识点?

答案

1. 涉及到的知识点?
   1. computed定义和使用计算属性
   2. 数组reduce方法累积运算

练习时间：5m

18_vue_计算属性完整写法

问题

1. 何时用计算属性完整写法?
2. set函数和get函数什么执行?

答案

1. 何时用计算属性完整写法?
   1. 给计算属性变量赋值时
2. set函数和get函数什么执行?
   1. set接收要赋予的值
   2. get里要返回给这个计算属性具体值

19_案例_小选影响全选

问题

1. 小选框如何影响全选框选中状态的?

答案

1. 小选框如何影响全选框选中状态的?
   1. v-model给全选框绑定isAll计算属性
   2. isAll计算属性里返回统计小选框选中状态结果

练习时间：3m

20_案例_全选影响小选

问题

1. 全选如何影响小选框选中状态的?

答案

1. 全选如何影响小选框选中状态的?
   1. 小选框v-model, 关联数组里对象的c属性
   2. isAll计算属性的set方法, 拿到全选框状态
   3. 状态值赋给, 数组里每个对象的c属性

练习时间：3m

21_案例_反选

问题

1. 反选如何实现的?

答案

1. 反选如何实现的?
   1. 遍历每个对象, 把c属性的值取反再赋予回去

练习时间：3m

22_vue_侦听器

问题

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

答案

1. 如何侦听到某个变量值改变呢?
   1. 使用watch配置项, key是要侦听的data/计算属性名

23_vue_深度侦听和立即侦听

问题

1. 如何侦听一个对象/数组呢?
2. 侦听器函数马上执行?

答案

1. 如何侦听一个对象/数组呢?
   1. 把侦听器写成对象形式, 给handler方法和deep:true
2. 侦听器函数马上执行?
   1. immediate: true

24_案例_品牌管理(数据缓存)

问题

1. 涉及到了哪些知识点?

答案

1. 涉及到了哪些知识点?
   1. watch深度侦听数组, deep: true
   2. localStorage本地缓存里只能存储字符串
   3. JSON.stringify和JSON.parse使用
   4. 逻辑或

练习时间：5m