中国建设银行网站评价,网站开发最新流程,公司网站销售平台建设费分录,wordpress微博头条列表渲染/数据监视 基本列表Key的作用与原理列表过滤列表排序Vue 数据监视原理 基本列表
v-for指令
用于展示列表数据语法#xff1a;v-for“(item,index) in xxx” :key“yyy”可遍历#xff1a;数组#xff0c;对象#xff0c;字符串#xff08;用的很少#xff09;v-for“(item,index) in xxx” :key“yyy”可遍历数组对象字符串用的很少指定次数用的很少 div idroot!--遍历数组--ulh3遍历数组/h3li v-forp in persons :keyp.id{{p.name}}-{{p.age}}/lih3遍历数组-index/h3li v-for(p,index) in persons :keyindex{{p.name}}--{{p.age}}-{{index}}/li/ul!--遍历对象--ulh3遍历对象/h3li v-for(value,k) of car :keyk{{k}}-{{value}}/li/ul!--遍历字符串--ulh3遍历字符串/h3li v-for(char,index) of str :keyindex{{char}}-{{index}}/li/ul!--测试遍历指定次数--ulh3测试遍历指定次数/h3li v-for(number,index) of 5 :keyindex{{number}}-{{index}}/li/ul /divscript typetext/javascriptVue.config.productionTip false 阻止Vue启动时生成提示//创建Vue实列const vmnew Vue({el:#root, //el 用于指定当前Vue实例未哪个容器服务值通常为css选择器字符串。document.getElementById(root) data: {persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}],car:{name:奥迪A8,price:70万,color:黑色},str:hello }});/scriptKey的作用与原理
原理 面试题react. vue中的key有什么用(key的内部原理)
虚拟Dom中key的作用
key是虚拟DOM对象的标识档数据发生改变时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较比较规则如下
对比规则 (1)旧虚拟DOM中找到了与虚拟DOM相同的key: 1. 若虚拟DOM中内容没有变直接使用之前的真实DOM 2. 若虚拟DOM中内容变了则生成新的真实DOM随后替换掉页面中之前的真实DOM (2)旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实的DOM。随后渲染到页面。用index作为key可能会引发的问题 1. 若对数据进行逆序添加逆序删除等破坏顺序操作 会产生没有必要的真实DOM更新 界面效果没问题但效率低 2.如果结构中还包含输入类的DOM: 会产生错误DOM更新》界面有问题开发中如何选择key 1.最好使用每条数据的唯一标识作为key,比如id,手机号,身份证学号等唯一值。 2.如果不存在对数据的逆序添加逆序删除等破坏顺序操作。仅用于渲染列表用于展示。 使用index作为leuy是没有问题的。 div idroot!--遍历数组--h3遍历数组/h3button click.onceadd添加一个老刘/buttonulli v-forp in persons :keyp.id{{p.name}}-{{p.age}}input typetext/li/ul /divscript typetext/javascriptVue.config.productionTip false 阻止Vue启动时生成提示//创建Vue实列const vmnew Vue({el:#root, data: {persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}]},methods:{add(){const p {id:004,name:老刘,age:40}this.persons.unshift(p)}}});/script列表过滤 !-- 准备好一个容器--div idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordulli v-for(p,index) of filPerons :keyindex{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript typetext/javascriptVue.config.productionTip false//用watch实现//#region /* new Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}],filPerons:[]},watch:{keyWord:{immediate:true,handler(val){this.filPerons this.persons.filter((p){return p.name.indexOf(val) ! -1})}}}}) *///#endregion//用computed实现new Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}]},computed:{filPerons(){return this.persons.filter((p){return p.name.indexOf(this.keyWord) ! -1})}}}) /script列表排序 div idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordbutton clicksortType 2年龄升序/buttonbutton clicksortType 1年龄降序/buttonbutton clicksortType 0原顺序/buttonulli v-for(p,index) of filPerons :keyp.id{{p.name}}-{{p.age}}-{{p.sex}}input typetext/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{keyWord:,sortType:0, //0原顺序 1降序 2升序persons:[{id:001,name:马冬梅,age:30,sex:女},{id:002,name:周冬雨,age:31,sex:女},{id:003,name:周杰伦,age:18,sex:男},{id:004,name:温兆伦,age:19,sex:男}]},computed:{filPerons(){const arr this.persons.filter((p){return p.name.indexOf(this.keyWord) ! -1})//判断一下是否需要排序if(this.sortType){arr.sort((p1,p2){return this.sortType 1 ? p2.age-p1.age : p1.age-p2.age})}return arr}}}) /scriptVue 数据监视
更新时的一个问题 this.persons[0] {id:‘001’,name:‘马老师’,age:50,sex:‘男’} 更改data数据Vue不监听模板不改变。 div idrooth2人员列表/h2button clickupdateMei更新马冬梅的信息/buttonulli v-for(p,index) of persons :keyp.id{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{persons:[{id:001,name:马冬梅,age:30,sex:女},{id:002,name:周冬雨,age:31,sex:女},{id:003,name:周杰伦,age:18,sex:男},{id:004,name:温兆伦,age:19,sex:男}]},methods: {updateMei(){// this.persons[0].name 马老师 //奏效// this.persons[0].age 50 //奏效// this.persons[0].sex 男 //奏效// this.persons[0] {id:001,name:马老师,age:50,sex:男} //不奏效this.persons.splice(0,1,{id:001,name:马老师,age:50,sex:男})}}}) /script模拟数据监测 script typetext/javascript let data {name:尚硅谷,address:北京,}//创建一个监视的实例对象用于监视data中属性的变化const obs new Observer(data) console.log(obs) //准备一个vm实例对象let vm {}vm._data data obsfunction Observer(obj){//汇总对象中所有的属性形成一个数组const keys Object.keys(obj)//遍历keys.forEach((k){Object.defineProperty(this,k,{get(){return obj[k]},set(val){console.log(${k}被改了我要去解析模板生成虚拟DOM.....我要开始忙了)obj[k] val}})})}/script原理
Vue监视数据的原理 vue会监视data中所有层次的数据。 如何监测对象中的数据 通过setter实现监视且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性Vue默认不做响应式处理 (2).如需给后添加的属性做响应式请使用如下API Vue.set(targetpropertyName/indexvalue) 或 vm.$set(targetpropertyName/indexvalue) 如何监测数组中的数据 通过包裹数组更新元素的方法实现本质就是做了两件事 (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板进而更新页面。 在Vue修改数组中的某个元素一定要用如下方法 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.Vue.set() 或 vm.$set()
特别注意Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性 body!-- 准备好一个容器--div idrooth1学生信息/h1button clickstudent.age年龄1岁/button br/button clickaddSex添加性别属性默认值男/button br/button clickstudent.sex 未知 修改性别/button br/button clickaddFriend在列表首位添加一个朋友/button br/button clickupdateFirstFriendName修改第一个朋友的名字为张三/button br/button clickaddHobby添加一个爱好/button br/button clickupdateHobby修改第一个爱好为开车/button br/button clickremoveSmoke过滤掉爱好中的抽烟/button br/h3姓名{{student.name}}/h3h3年龄{{student.age}}/h3h3 v-ifstudent.sex性别{{student.sex}}/h3h3爱好/h3ulli v-for(h,index) in student.hobby :keyindex{{h}}/li/ulh3朋友们/h3ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{student:{name:tom,age:18,hobby:[抽烟,喝酒,烫头],friends:[{name:jerry,age:35},{name:tony,age:36}]}},methods: {addSex(){// Vue.set(this.student,sex,男)this.$set(this.student,sex,男)},addFriend(){this.student.friends.unshift({name:jack,age:70})},updateFirstFriendName(){this.student.friends[0].name 张三},addHobby(){this.student.hobby.push(学习)},updateHobby(){// this.student.hobby.splice(0,1,开车)// Vue.set(this.student.hobby,0,开车)this.$set(this.student.hobby,0,开车)},removeSmoke(){this.student.hobby this.student.hobby.filter((h){return h ! 抽烟})}}})/script
