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>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!