vue列表渲染及数据监测
列表渲染
v-for指令:
1.语法：v-for=“(item, index) in xxx” :key=“yyy”
2.用于展示列表数据
3.可遍历数组、对象、字符串（用的很少）、指定次数（用的很少），也可用于列表过滤（模糊查询）、列表排序sortType（升序、降序）
Vue监视数据原理
- vue会监视data中所有层次的数据。
- 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value) - 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。 - 在Vue修改数组中的某个元素一定要用如下方法
1.使用这些API:
unshift() 头部添加元素
shift() 头部删除元素
push() 尾部新增元素
pop() 尾部删除元素
splice() 在数组指定位置添加或删除一个元素或者替换某个元素
sort() 对数组排序
reverse() 反转数组
2.Vue.set() 或 vm.$set()
注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性
react、vue中的key有什么作用？
（key的内部原理）
1. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3. 用index作为key可能会引发的问题：
(1). 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
(2) 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
(1)最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。
人员列表（遍历数组）
-
{{p.name}}-{{p.age}}
汽车信息（遍历对象）
-
{{k}}-{{value}}
测试遍历字符串（用得少）
-
{{char}}-{{index}}
测试遍历指定次数（用得少）
-
{{index}}-{{number}}
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:'70万',
color:'黑色'
},
str:'hello'
}
})`
学生信息
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好：
-
{{h}}
朋友们：
-
{{f.name}}--{{f.age}}
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 !== '抽烟'
})
}
}
})