Vue监视数据总结
- vue会监视data中所有层次的数据
- 如何监测对象中的数据
- 通过setter实现监视，且要在new Vue时就传入要监测的数据
- 对象中后添加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API：Vue.set(target,propertyName/index,vaue)或vm.$set(target,propertyName/index,vaue)
- 通过setter实现监视，且要在new Vue时就传入要监测的数据
- 如何监测数组中的数据
- 通过包裹数组更新元素的方法实现，本质上就是做了两件事：
- 调用原生对应的方法对数组进行更新
- 重新解析模版，进而更新页面
- 通过包裹数组更新元素的方法实现，本质上就是做了两件事：
- 在vue修改数组中的某个元素一定要用到如下方法(参考：https://blog.csdn.net/weixin_55778010/article/details/124440233)
- 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。- splice:删除,替换,添加 splice('开始下标','删除个数','添加元素')
- 删除：splice('开始下标','删除个数')
- 替换：splice('开始下标','删除个数','添加元素')
- 添加：splice('开始下标','添加元素') --->添加元素可以多个
- reverse() 方法用来反转数组(前面的跑后面，后面的跑前面)。 该方法会直接改变原数组
- sort() 方法可以用来对数组中的元素进行排序。该方法会直接改变原数组，默认是按Unicode编码进行排序。
- concat() 方法可以连接两个或多个数组，并将新的数组返回。该方法不会改变原数组。也可以直接在concat()中写入要添加的元素。
- Vue.set()或vm.$set()
- 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
特别注意：Vue.set() 和vm.$set() 不能给vm 或 vm的根数据对象添加属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue监视数据总结</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>学生信息</h2>
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<hr>
<button @click="student.age++">年龄++</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="addHoppy">添加一个爱好</button><br />
<button @click="updateFirstHoppy">修改第一个爱好为：wpf</button><br />
<hr>
<h3>爱好：</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<hr>
<h3>朋友们：</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
<hr>
</div>
</body>
</html>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
student: {
name: 'sunwugang',
age: '18',
hobby: ['C#', 'vue', 'js'],
friends: [
{ name: '老张', age: 19 },
{ name: '老李', age: 22 },
]
},
},
methods: {
// 对象新增
addSex () {
// 写法一：
// Vue.set(this.student, 'sex', '男')
// 写法二：
this.$set(this.student, 'sex', '男')
},
// 对象首位新增
addFriend () {
// 首位添加 unshift 响应式
this.student.friends.unshift({ name: '老孙', age: 22 })
},
// 对象属性修改
updateFirstFriendName () {
this.student.friends[0].name = '大圣'
},
// 数组新增
addHoppy () {
this.student.hobby.unshift('one sql')
this.student.hobby.push('android')
},
// 数组修改
updateFirstHoppy () {
// 删除第一个并在第一个新增
// this.student.hobby.splice(0, 1, 'wpf')
// Vue.set(this.student.hobby, 0, 'wpf')
this.$set(this.student.hobby, 0, 'wpf')
},
},
})
</script>
标签：Vue,set,数组,23,--,元素,添加,student From： https://www.cnblogs.com/YYkun/p/18042920