v-for指令
1.用于展示列表数据
2.语法:v-for="(item,index) in xxx":key="yyy"
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
面试题: react、vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时, Vue会根据【新数据】生成【新的虚 拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
a.若虚拟DOM中内容没变,直接使用之前的真实DOM!
b.若虚拟DOM中内容变了,则生成新的真实DOM, 随后替换掉页面中之前的真 实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM,随后渲染到到页面。
3.用index作为key可能会引发的问题:
1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
2.如果结构中还包含输入类的DOM:
会产生错误DOM更新==> 界面有问题。
4.开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一 值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于 展示,使用index作为key是没有问题的。
Vue监视数据的原理:
1.vue会监视data中所有层次的数据。
2.如何监测对象中的数据?
通过setter实现监视,且要在new Vue时时就传入要监测的数据。
(1),对象中后追加的属性, Vue默认不做响应式处理
(2).如需给后添加的属性做响应式,请使用如下API:
Vue,set(target,propertyName/index, value) 或
vm.$set(target,propertyName/index, value)
3.如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1),调用原生对应的方法对数组进行更新。
(2),重新解析模板,进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法:
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue,set()或 vm.$set()
特别注意: Vue.set () 和 vm.$set()不能给vm 或vm的根数据对象添加属性!!
<!-- 准备好一个容器 -->
<div id="root">
<h1>学生信息</h1>
<button @click="student.age ++">年龄+1岁</button>
<button @click="addSex">添加性别属性,默认值:男</button>
<button @click="student.sex = '未知'">修改性别</button>
<button @click="addFirstFriend">在列表首位添加一个朋友</button>
<button @click="changeFirstFriendName">修改第一个朋友的名字为:张三</button>
<button @click="addHobby">添加一个爱好</button>
<button @click="changeFirstHobby">修改第一个爱好为:开车</button>
<button @click="removeSmoke">过滤掉第一个爱好为:抽烟</button>
<h3>姓名:{{student.name}}</h3>
<h3>年龄:{{student.age}}</h3>
<h3 v-if="student.sex">性别:{{student.sex}}</h3>
<h3>爱好:</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友们</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}-{{f.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
student:{
name:'kuromi',
age:18,
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:55},
{name:'pocky',age:23}
]
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男');
this.$set(this.student,'sex','男');
},
addFirstFriend(){
this.student.friends.unshift({name:'huahua',age:23})
},
changeFirstFriendName(){
this.student.friends[0].name = '张三';
},
addHobby(){
this.student.hobby.push('看书');
},
changeFirstHobby(){
// this.student.hobby[0] = '开车';
//不可以!!!!通过数组的索引值去赋值
// 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>