Vuejs监测数据的原理七

最新推荐文章于 2024-06-21 16:02:51 发布

米白蓝

最新推荐文章于 2024-06-21 16:02:51 发布

阅读量499

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124192618

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<body>
  <div id="root">
        <button @click="persOwn">更改第一个</button>
    <ul>
      <li v-for="(p, index) in persons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>
    <hr>
    <h2>姓名：{{name}}</h2>
    <h3>地址：{{address}}</h3>
    <hr>
    <button @click="addSex">添加性别</button>
    <button @click="addFriend">添加朋友的朋友</button>
    <button @click="updateFirstFriendName">修改朋友的第二个朋友的地址</button>
    <h2>朋友：{{firend.name}}</h2>
    <h3>年龄：{{firend.age.age1}}</h3>
    <h3 v-if="firend.sex">性别：{{firend.sex}}</h3>
    <hr>
    <h2>朋友的朋友</h2>
    <ul>
      <li v-for="(f,index) in firend.firend" :key="index">{{f.name}}--{{f.address}}</li>
    </ul>
    <hr>
    <h2>爱好</h2>
    <ul>
      <li v-for="(h, index) in firend.hobby" :key="index">{{h}}</li>
    </ul>
  </div>
<!--vue检测数据的原理-->
<!-- <script>
    let data = {
      name: '孙悟空',
      address: '水帘洞'
    }
    let obs = new Observer(data)
    console.log(obs);
    console.log(Object.keys(data));
    let vm = {}
    vm._data = data = obs
    function Observer(obj) {
      const keys = Object.keys(obj)
      keys.forEach((k) => {
        Object.defineProperty(this, k, {
          get() {
            return obj[k]
          },
          set(val) {
            console.log(`${k}被改变了`);
            obj[k] = val
          }
        })
      })
    }
  </script> -->
  <script>
    let vm = new Vue({
      el: '#root',
      data: {
        keyWord: '',
        name:'孙悟空',
        address: '水帘洞',
        persons: [
          { id: 001, name: '荷花', age: 20, sex: '男' },
          { id: 002, name: '梅花', age: 21, sex: '女' },
          { id: 003, name: '梅雨', age: 22, sex: '男' },
          { id: 004, name: '春风细雨', age: 23, sex: '女' }
        ],
        firend: {
          name: '沙和尚',
          addres: '高老庄',
          age: {
            age1: 91,
            age2: 19
          },
          hobby:['吃饭','睡觉', '打豆豆'],
          firend: [
            {name: '唐生', address: '西天'}
          ]
        }
      },
      methods: {
        // 更新数组元素内容
        persOwn() {
          // this.persons[0] = {id: 001, name: '莲花', age: 10, sex: '女' }  不能使用索引值的方式改，数组里的数据是不进行代理的，因此，数据改变不会响应式改变；需要使用数组的方法进行改变
          // this.persons.splice(0,1,{id: 001, name: '莲花', age: 10, sex: '女' })//把第一个替换掉
          // Vue.set(this.persons, 0, {id: 001, name: '莲花', age: 10, sex: '女' }) //第二种方法
          this.$set(this.persons, 0, {id: 001, name: '莲花', age: 10, sex: '女' }) // 第三种方法

        },
        // 增加对象中的属性
        addSex() {
          // Vue.set(this.firend,'sex','男') 第一种方法
          this.$set(this.firend,'sex','男') //第二种方法
        },
        // 修改数组元素
        addFriend() {
          this.firend.firend.push({name:'猪八戒',address:'未知'})
        },
        // 数组中的对象是做了数据代理的
        updateFirstFriendName() {
          this.firend.firend[1].address = '还是未知'
        }
      }
    })
  </script>

监测数据的原理：

vue会监视data中所有层次的数据；
监测对象中的数据：通过setter实现数据监视，在new vue的时候就传入了要监视的数据；1.对象后面新增的数据，vue默认不会做响应式处理；2.可以通过Vue.set(新增位置，新增属性名，值)或者vm.$set(新增位置，新增属性名，值)实现；
监测数组汇总的数据：不可以通过数组索引的形式去增删查改数组元素，因为数组中的元素vue中没有给setter和getter方法；需要使用数组的这些方法（push()，pop()，shift()，unshift，splice()替换，sort()排序，reverse()）也可以通过Vue.set()和vm.$set();通过数组方法时Vue本质做了1.调用原生对应的数组方法对数组进行更新；2.重新解析末班，更新页面；因此这里面的方法和原数组方法是有一定区别的；
Vue.set()和vm.$set()两个方法是不可以给vm或vm上的根数据对象添加属性的；
数据劫持：给原data中的数据该为有setter和getter的形式或监视数据的变化，一但发证变化就会响应式的在页面上发生改变；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs监测数据的原理七

<body> <div id="root"> <button @click="persOwn">更改第一个</button> <ul> <li v-for="(p, index) in persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> <hr&g
复制链接

扫一扫