学习day49

computed和watch的区别

1.computed能完成的功能，watch都可以实现

2.watch能完成的，computed不一定能实现，例如：watch可以进行异步操作

两个重要的小原则

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

2.所有不被Vue所管理的函数（定时器回调函数，ajax的回调函数，Promise的回调函数），最好写成箭头函数

这样的this指向才是vm或组件实例对象

条件渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>条件渲染</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"><h2>{{n}}</h2><button @click="n++">点我加一</button><!-- 用v-show作条件渲染 --><h2 v-show="false">欢迎来到{{name}}</h2><!-- 用v-if作条件渲染 --><h2 v-if="false">欢迎来到{{name}}</h2><div v-show="n===1">Angular</div><div v-show="n===2">React</div><div v-show="n===3">Vue</div></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm= new Vue({el:"#root",data:{name:'尚硅谷',n:0}})
</script></html>

v-for指令

1.用于展示列表数据

2.语法：v-for="(item,index) in xxx " :key="yyy"

3.可遍历：数据，对象，字符串（用的少），指定次数（用的少）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本列表</title><script type="text/javascript" src="../js/vue.js"></script> 
</head>
<body><!-- v-for指令1.用于展示列表数据2.语法：v-for="(item,index) in xxx " :key="yyy"3.可遍历：数据，对象，字符串（用的少），指定次数（用的少）--><div id="root"><h2>人员列表</h2><ul><li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li></ul><h2>汽车信息</h2><ul><li v-for="(a,b) of car">{{a}}--{{b}}</li></ul><h2>字符串</h2><ul><li v-for="(char,index) of str" :key="index">{{char}}--{{index}}</li></ul><h2>指定次数</h2><ul><li v-for="(number,index) of 5" :key="index">{{number}}--{{index}}</li></ul></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:'18'},{id:'002',name:'李四',age:'19'},{id:'003',name:'王五',age:'20'}],car:{name:'奥迪A8',price:'70w',color:'黑色'},str:'hello'}})
</script>
</html>

key

面试题：react，vue中的可以有什么作用？（key的内部园路）

1.虚拟DOM中的key的作用：

key是虚拟DOM对象的标识，当数据发生改变时，Vue会根据【新数据】生成【新的虚拟DOM】

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】差异比较，比较规则如下

2.对比规则

(1)旧虚拟DOM中找到了与新虚拟DOM相同的key：

1.若虚拟DOM中的内容没变，直接使用之前的真实DOM

2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM

(2)旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到页面

3.用index作为key可能引发的问题

1.若对数据进行：逆序添加，逆序删除等破坏顺序的操作：

会产生没有必要的真实DOM更新 ==》页面效果没问题，但效率低

2.若结构中还包含输入类的DON：

会产生错误DOM更新==》界面更新有问题

开发中如何选择key？：

1.最好使用每条数据的唯一的标识作为key，比如id，手机号，身份证号，学号等

2.如果不存在对数据的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染列表用于战术，

使用index作为key是没有问题的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>:key的原理</title><script type="text/javascript" src="../js/vue.js"></script> 
</head>
<body><!-- 面试题：react，vue中的可以有什么作用？（key的内部园路）1.虚拟DOM中的key的作用：key是虚拟DOM对象的标识，当数据发生改变时，Vue会根据【新数据】生成【新的虚拟DOM】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】差异比较，比较规则如下2.对比规则(1)旧虚拟DOM中找到了与新虚拟DOM相同的key：1.若虚拟DOM中的内容没变，直接使用之前的真实DOM2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM(2)旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面3.用index作为key可能引发的问题1.若对数据进行：逆序添加，逆序删除等破坏顺序的操作：会产生没有必要的真实DOM更新 ==》页面效果没问题，但效率低2.若结构中还包含输入类的DON：会产生错误DOM更新==》界面更新有问题开发中如何选择key？：1.最好使用每条数据的唯一的标识作为key， 比如id， 手机号，身份证号，学号等2.如果不存在对数据的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染列表用于战术，使用index作为key是没有问题的--><div id="root"><h2>人员列表</h2><button @click.once="add">添加一个老刘</button><ul><li v-for="(p,index) of persons" :key="p.id">{{p.name}}-{{p.age}}<input type="text"></li></ul></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm = new 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>
</html>

列表过滤，即进行一个模糊搜索的处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script> 
</head>
<body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p,index) of filPersons" :key="index">{{p.name}}-{{p.age}}--{{p.sex}}</li></ul></div></body>
<script type="text/javascript">Vue.config.productionTip=false//用watch实现//#region// new Vue({//     el:'#root',//     data:{//         keyWord:'',//         persons:[//             {id:'001',name:'马冬梅',age:'18',sex:'女'},//             {id:'002',name:'周冬雨',age:'19',sex:'女'},//             {id:'003',name:'周杰伦',age:'20',sex:'男'},//             {id:'004',name:'温兆伦',age:'22',sex:'男'}//         ],  //         filPersons:[]//     },//     watch:{//         keyWord:{//             immediate:true,//             handler(val){//                 this.filPersons=this.persons.filter((p)=>{//                     return p.name.indexOf(val)!==-1//                 })//             }//         }//     }// })//#endregion//用computed实现new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:'18',sex:'女'},{id:'002',name:'周冬雨',age:'19',sex:'女'},{id:'003',name:'周杰伦',age:'20',sex:'男'},{id:'004',name:'温兆伦',age:'22',sex:'男'}],  },computed:{filPersons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyWord)!==-1})}}})
</script>
</html>

列表的年龄排序问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表排序</title><script type="text/javascript" src="../js/vue.js"></script> 
</head>
<body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">年龄升序</button><button @click="sortType = 1">年龄降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p,index) of filPersons" :key="index">{{p.name}}-{{p.age}}--{{p.sex}}</li></ul></div></body>
<script type="text/javascript">Vue.config.productionTip=false//用computed实现new Vue({el:'#root',data:{keyWord:'',sortType:0, //0代表原顺序，1降序，2升序persons:[{id:'001',name:'马冬梅',age:'33',sex:'女'},{id:'002',name:'周冬雨',age:'45',sex:'女'},{id:'003',name:'周杰伦',age:'12',sex:'男'},{id:'004',name:'温兆伦',age:'22',sex:'男'}],  },computed:{filPersons(){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}}})
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/6514.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！