Vue学习笔记23--监视数据总结

Vue监视数据总结

vue会监视data中所有层次的数据
如何监测对象中的数据
- 通过setter实现监视，且要在new Vue时就传入要监测的数据
  - 对象中后添加的属性，Vue默认不做响应式处理
  - 如需给后添加的属性做响应式，请使用如下API：Vue.set(target,propertyName/index,vaue)或vm.$set(target,propertyName/index,vaue)
如何监测数组中的数据
- 通过包裹数组更新元素的方法实现，本质上就是做了两件事：
  - 调用原生对应的方法对数组进行更新
  - 重新解析模版，进而更新页面
在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()

特别注意：Vue.set() 和vm.$set() 不能给vm 或 vm的根数据对象添加属性。

100

101

<!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>