vue2数据响应式的缺陷

红太狼 2023-01-20 06:58 151阅读 0赞

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />
        
        <div>
          <p v-for="(item, index) in list" :key="index">
            
            { {  item }}
          </p>
          <button @click="changeArray">改变数组</button>
          <p v-for="(item, index) in girls" :key="index">{ {  item }}</p>
          <button @click="changeObject">改变对象</button>
        </div>
      </div>
    </template>
    <script>
    // @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'
    
    export default { 
      name: 'Home',
      components: { 
      },
      data () { 
        return { 
          list: ['苹果', '香蕉', '菠萝'],
          girls: { 
            name: '宋江',
            age: 40,
            gender: 'male',
            hobby: '喝酒'
          }
        }
      },
      methods: { 
        changeObject () { 
          this.girls.name2 = '我在哪儿'
          console.log(this.girls, 'this.girls')
        },
        changeArray () { 
          this.list[1] = '我是谁'
          console.log(this.list, 'this.list')
        }
      }
    }
    </script>

## 页面展示效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70]

#### 1.当点击修改对象的时候 如图： ####

![在这里插入图片描述][20210511173054705.png]

> 此时对象里面的数据有被修改但是 页面不会修改 如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 1]

> 解决办法：用vue 中的set 方法

#### 1.当点击修改数组的时候 如图： ####

![在这里插入图片描述][20210511173653375.png]

> 此时数组里面的数据有被修改但是 页面不会修改 如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 2]

> 解决办法：数组更新vue并不会改变数据 当vue遇到push pop shift unshift splice sort reverse 的时候数组都会改变，尤雨溪用了重写数组的方法来实现数据的响应绑定

> 原因：Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70]: /images/20221021/5e42741ab79844819d22580c72875e38.png
[20210511173054705.png]: /images/20221021/3335a236ab5e4b3eb09ccffec8eaeae4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 1]: /images/20221021/54601047a4c7436786a639d9cdfbbd56.png
[20210511173653375.png]: /images/20221021/c798dfce033b4a6eb8fcb501e5322310.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 2]: /images/20221021/376ddeeba91b440a95eae48b96ab21b9.png