网站图片加载顺序,淘宝网怎样做网站,公司申请网站建设申请理由,wordpress无法上传文件1. 能够了解更新监测, key作用, 虚拟DOM, diff算法2. 能够掌握设置动态样式3. 能够掌握过滤器, 计算属性, 侦听器4. 能够完成品牌管理案例
一.Vue基础_更新监测和key
1.v-for更新监测 目标#xff1a;目标结构变化, 触发v-for的更新
情况1: 数组翻转情况2: 数组截取情况3…1. 能够了解更新监测, key作用, 虚拟DOM, diff算法2. 能够掌握设置动态样式3. 能够掌握过滤器, 计算属性, 侦听器4. 能够完成品牌管理案例
一.Vue基础_更新监测和key
1.v-for更新监测 目标目标结构变化, 触发v-for的更新
情况1: 数组翻转情况2: 数组截取情况3: 更新值 口诀:
数组变更方法, 就会导致v-for更新, 页面更新
push 方法是 JavaScript 数组对象的一个方法用于向数组的末尾添加一个或多个新元素并返回添加新元素后数组的新长度 pop 方法是 JavaScript 数组对象的一个方法用于移除数组的最后一个元素并返回被移除的元素。shift 方法是 JavaScript 数组对象的一个方法用于移除数组的第一个元素并返回被移除的元素。unshift 方法是 JavaScript 数组对象的一个方法用于向数组的开头添加一个或多个新元素并返回添加新元素后数组的新长度。splice 方法是 JavaScript 数组对象的一个方法用于在指定位置插入或删除元素并返回被删除的元素组成的数组。sort 方法是 JavaScript 数组对象的一个方法用于对数组的元素进行排序。默认情况下sort 方法会将数组的元素转换为字符串然后按照 Unicode 码点顺序进行排序。reverse 方法是 JavaScript 数组对象的一个方法用于颠倒数组中元素的顺序即将数组中的元素从后向前排列。
数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()
filter 方法可以帮助程序员方便地对数组进行筛选从而得到符合特定条件的元素集合。 新建一个文件夹用vscode打开文件在用命令vue create demo创建项目 templatedivulli v-for(val,index) in arr :keyindex{{ val }}/li/ulbutton clickrevBtn数组翻转/buttonbutton clicksliceBtn截取前三个/buttonbutton clickupdateBtn点击改掉第一个元素的值/button/div
/templatescriptexport default {data(){return {arr: [5,3,9,2,1]}},methods: {revBtn(){// 1.数据翻转可以让v-for更新this.arr.reverse()},sliceBtn(){// 2.数组slice方法不会造成v-for更新// slice不会改变原始数组this.arr.slice(0,3)// console.log(re)// 解决v-for更新 ---覆盖原始数组let newArr this.arr.slice(0,3)this.arr newArr},updateBtn(){// 3.更新某个值的时候v-for是监测不到的// this.arr[0] 1000;// 解决-This.$set()// 参数1:更新目标结构// 参数2更新位置// 参数3:更新值this.$set(this.arr,0,1000)}}}
/scriptstyle/style 在截取前三个问题中如何解决v-for更新如下图: 在点击改掉第一个元素的值中如何解决v-for更新问题如下: 1. 哪些数组方法会导致v-for更新页面? 可以改变原数组的方法 2. 有的数组方法不导致v-for更新页面, 如何处理? 拿返回的新数组, 直接替换旧数组 this.$set()方法更新某个值 2.v-for就地更新 目标当数组改变后是如何更新的
旧-虚拟DOM结构: 新-虚拟DOM结构 新旧DOM产生后对比, 然后决定是否复用真实DOM/更新内容
templatedivulli v-for(val, ind) in arr :keyind{{ val }}/li/ulbutton clickbtn下标1位置插入新来的/button/div
/templatescriptexport default {data(){return {arr: [老大,老二,老三]}},methods: {btn(){this.arr.splice(1,0,新来的)}}}
/scriptstyle/style v-for更新时, 是如何操作DOM的? 循环出新的虚拟DOM结构, 和旧的虚拟DOM 结构对比, 尝试复用标签就地更新内容 3.真实DOM
目标在document对象上, 渲染到浏览器上显示的标签 虚拟DOM
目标本质是保存节点信息, 属性和内容的一个JS对象 ,真实DOM属性过多, 遍历耗时 目标在内存中比较变化部分, 然后给真实DOM打补丁(更新) 内存中生成一样的虚拟DOM结构(本质是个JS对象) 因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了 比如template里标签结构 templatediv idboxp classmy_p123/p/div
/template 对应的虚拟DOM结构 const dom {type: div,attributes: [{id: box}],children: {type: p,attributes: [{class: my_p}],text: 123}
} 以后vue数据更新 生成新的虚拟DOM结构 和旧的虚拟DOM结构对比 利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁
好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)
好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性) 1. 虚拟DOM是什么? 本质就是一个JS对象, 保存DOM关键信息 2. 虚拟DOM好处? 提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM(打补丁) 3.diff算法
目标同级比较-根元素变化-整个dom树删除重建 旧虚拟DOM
div idboxp classmy_p123/p
/div
新虚拟DOM
ul idboxli classmy_p123/li
/ul
情况2: 根元素没变, 属性改变, 元素复用, 更新属性
旧虚拟DOM
div idboxp classmy_p123/p
/div
新虚拟DOM
div idmyBox title标题p classmy_p123/p
/div
01、第一章webpackvue基础/1-20 虚拟DOMDiff算法 1. diff算法如何比较新旧虚拟DOM? 同级比较 2. 根元素变化? 删除重新建立整个DOM树 3. 根元素未变, 属性改变? DOM复用, 只更新属性 4.无key
目标:从第二个往后更新内容 – 性能不高 情况3: 根元素没变, 子元素没变, 元素内容改变
无key - 就地更新
v-for不会移动DOM, 而是尝试复用, 就地更新如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示
ul idmyULli v-forstr in arr{{ str }} input typetext/li
/ul
button clickaddFn下标为1的位置新增一个/button
export default {data(){return {arr: [老大, 新来的, 老二, 老三]}},methods: {addFn(){this.arr.splice(1, 0, 新来的)}}
}; 目标最大限度尝试就地修改/复用相同类型元素 有key, 值为索引 目标有key属性, 基于key的来比较新旧虚拟DOM, 移除key不存在元素 目标先产生新旧虚拟DOM, 根据key比较, 还是就地更新 有key, 值唯一不重复的字符串或数字
目标有key属性, 基于key的来比较新旧虚拟DOM, 移除key不存在元素
给每个数据换成对象, 准备id, 把id的值作为key 有key, 值为id
目标先产生新旧虚拟DOM, 根据key比较 1. 子元素或者内容改变会分diff哪2种情况比较? 无key, 就地更新 有key, 按照key比较 2. key值要求是? 唯一不重复的字符串或者数值 3. key应该怎么用? 有id用id, 无id用索引 4. key的好处? 可以配合虚拟DOM提高更新的性能 v-for什么时候会更新页面呢? 数组采用更新方法, 才导致v-for更新页面 vue是如何提高更新性能的? 采用虚拟DOMdiff算法提高更新性能 虚拟DOM是什么? 本质是保存dom关键信息的JS对象 diff算法如何比较新旧虚拟DOM? 根元素改变 – 删除当前DOM树重新建 根元素未变, 属性改变 – 更新属性 根元素未变, 子元素/内容改变 无key – 就地更新 / 有key – 按key比较 5.动态class
目标: 用v-bind给标签class设置动态的值
语法 :class{类名: 布尔值} 如何给标签class属性动态赋值? :class“{类名: 布尔值}”, true使用, false不用 6.动态style
目标: 给标签动态设置style的值
语法 :style{css属性名: 值} 给style赋值和class区别是? :class{类名: 布尔值}”, true使用, false不用 :style{css属性名: 值} 7.案例-品牌管理(铺)
