Vue学习笔记（三）

芒果炒香菜
1,430 阅读4分钟

Vue核心（续）

2.15列表渲染

因为列表渲染渲染比较复杂，我把它拆成了一个个的小模块来逐步讲解，所有代码可运行

1.建立一个基本列表

了解v-for的基本使用：

  • 用于展示列表数据
  • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
  • v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名（形参）。
  • v-for 还支持一个可选的第二个参数，即当前项的索引。
  • 语法：v-for="(item, index) in xxx" :key="yyy"
  • 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>基本列表</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）</h2>
		<ul>
			<li v-for="(p,index) of persons" :key="p.id">
				<!-- {{p}} -->
				{{p.name}}-{{p.age}}--{{p.id}}
			</li>
		</ul>

		<!-- 遍历对象 -->
		<h2>汽车信息（遍历对象）</h2>
		<ul>
			<li v-for="(value,name) of car" :key="name">
				{{name}}-{{value}}
			</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">
				{{index}}-{{number}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		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'
			}
		})
	</script>
</html>

2.key的原理

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

面试题：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是没有问题的。
    3.如果不写key，则默认为index

image.png

image.png

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>key的原理</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 遍历数组  :key="index"-->
		<h2>人员列表（遍历数组）:key="index"</h2>
		<button @click.once="add">添加一个老刘</button>
		<ul>
			<li v-for="(p,index) of persons" :key="index">
				{{p.name}}-{{p.age}}
				<input type="text">
			</li>
		</ul>
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）:key="p.id"</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>

	<script type="text/javascript">
		Vue.config.productionTip = false

		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)
                                        //将p插入到persons的开头
				}
			},
		})
	</script>

</html>

初始输入：
image.png

点击添加一个老刘:
image.png

3.列表过滤

用computed实现（推荐）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>列表过滤</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 1.收集用户输入
	     2.拿用户输入的东西进行数据匹配
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>人员列表</h2>
		<input type="text" placeholder="请输入名字" v-model="keyWord">
		<ul>
			<li v-for="(p,index) of filPerons" :key="index">
				{{p.name}}-{{p.age}}-{{p.sex}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		// 用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>
</html>

用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调用一下,因为开始filPerons: []为空数组,
                        // 页面上什么内容都不显示,而恰巧handler(val)获取的值为空,
                        // 而所有字符串第0位不仅包含自己第一个字符,也包含着一个空字符,p.name.indexOf('')为0 
                        // 所以handler(val)函数判断成功,页面显示内容
                        handler(val) {
                                this.filPerons = this.persons.filter((p) => {
                                        return p.name.indexOf(val) !== -1
                                        // 判断p.name中是否包含有val值，如果不等于-1，则说明包含
                                        // filter返回一个全新的数组，原数组不变
                                })
                        }
                }
        }
})

初始值：
image.png

过滤后：
image.png

4.列表排序

列表排序与列表过滤一般是连在一起使用的

<!DOCTYPE html>
<html>

<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 filPerons" :key="p.id">
				{{p.name}}-{{p.age}}-{{p.sex}}
				<input type="text">
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new 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 !== 0) {
						arr.sort((p1, p2) => {
							return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
						})
					}
					return arr
				}
			}
		})

	</script>

</html>

5.数据监测（ Vue.set）

Vue.set()的使用

Vue.set(添加目标,'添加属性','属性值')

  • Vue.set(this.student,'sex','男') //添加目标可以用this.student，也可以用vm.student（_data因为数据代理可省略）
  • this.$set(this.student, 'sex', '男') 原理：
    向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi'（vm.上面的对象.添加的新属性 = '属性值'）)

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

image.png

image.png

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Vue监测数据改变的原理</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>学校信息</h1>
		<h2>学校名称：{{school.name}}</h2>
		<h2>学校地址：{{school.address}}</h2>
		<h2 v-if="school.leader">校长是：{{school.leader}}</h2>
		<button @click='addRen'>添加校长</button>
		<hr />
		<h1>学生信息</h1>
		<button @click="addSex">添加一个性别属性，默认值是男</button>
		<h2>姓名：{{student.name}}</h2>
		<h2 v-if="student.sex">性别：{{student.sex}}</h2>
		<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
		<h2>朋友们</h2>
		<ul>
			<li v-for="(f,index) in student.friends" :key="index">
				{{f.name}}--{{f.age}}
			</li>
		</ul>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			school: {
				name: '尚硅谷',
				address: '北京',
			},
			student: {
				name: 'tom',
				age: {
					rAge: 40,
					sAge: 29,
				},
				friends: [
					{ name: 'jerry', age: 35 },
					{ name: 'tony', age: 36 }
				]
			}
		},
		methods: {
			addSex() {
				// Vue.set(this.student,'sex','男')
				// Vue.set(添加目标,'添加属性','属性值')
				this.$set(this.student, 'sex', '男')
			},
			addRen() {
				// Vue.set(添加目标,'添加属性','属性值')
				this.$set(this.school, 'leader', '一个教授')
			}
		}
	})
</script>
</html>

Vue检测对象/数组中的元素改变

Vue监视数据的原理：
	1. vue会监视data中所有层次的数据。
        2. 如何监测对象中的数据？
		通过setter实现监视，且要在new Vue时就传入要监测的数据。
			(1).对象中后追加的属性，Vue默认不做响应式处理，即改变其值页面无变化
			(2).如需给后添加的属性做响应式，请使用如下API：
			      Vue.set(target，propertyName/index，value) 或 
			      vm.$set(target，propertyName/index，value)
                              //vm.$set(添加目标,'添加属性/索引值','属性值')
        3. 如何监测数组中的数据？
		通过包裹数组更新元素的方法实现，本质就是做了两件事：
			(1).调用原生对应的方法对数组进行更新。
			(2).重新解析模板，进而更新页面。
        4.在Vue修改数组中的某个元素一定要用如下方法：
		1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
		2.Vue.set() 或 vm.$set()
		3.如果不使用上面方法而是直接对数组赋值则vue无法响应，例如：
                this.student.hobby[0] = "开车"，数据已被更改，但页面中无任何反应
	特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象(vm._data) 添加属性！！！

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>总结数据监视</title>
	<style>
		button {
			margin-top: 10px;
		}
	</style>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>学生信息</h1>
		<button @click="student.age++">年龄+1岁</button> <br />
		<button @click="addSex">添加性别属性，默认值：男</button> <br />
		<button @click="student.sex = '未知' ">修改性别</button> <br />
		<button @click="addFriend">在列表首位添加一个朋友</button> <br />
		<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br />
		<button @click="addHobby">添加一个爱好</button> <br />
		<button @click="updateHobby">修改第一个爱好为：开车</button> <br />
		<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br />
		<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>
</body>

<script type="text/javascript">
	Vue.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','男')
				Vue.set(vm._data.student, 'sex', '男')
                               // 往student对象再追加属性
			},
			addFriend() {
				this.student.friends.unshift({ name: 'jack', age: 70 })
			},
			updateFirstFriendName() {
                             // 直接this.student.friends[0] = 'xx' 是错的，数组不能直接修改
				this.student.friends[0].name = '张三'
			},
			addHobby() {
				this.student.hobby.push('学习')
			},
			updateHobby() {
				// this.student.hobby.splice(0,1,'开车')  用数组属性修改元素
				// Vue.set(this.student.hobby,0,'开车') 直接使用Vue.set修改
				this.$set(this.student.hobby, 0, '开车')
			},
			removeSmoke() {
				// filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
				this.student.hobby = this.student.hobby.filter((hobby) => {
					// 所有不是由vue控制的回调，尽可能写成箭头函数
					return hobby !== '抽烟'
				})
			}
		}
	})
</script>

</html>
avatar
文章
阅读
粉丝