响应式丢失

响应式丢失

1.情景一：

 <div>
     {{city}}
     <button @click="add">添加城市</button>
 </div>
 ​
 <script setup>
     let city = reactive([])
     const add = () => {
       city = ['北京','上海','广州']
     }
 </script>

响应式丢失原因：地址指向了新的数组对象

修改方式一：使用push方法

 <div>
     {{city}}
     <button @click="add">添加城市</button>
 </div>
 ​
 <script setup>
     let city = reactive([])
     const add = () => {
       const newCity = ['北京','上海','广州']
       city.push(...newCity)
     }
 </script>

修改方式二：改用ref方式

 <div>
     {{city}}
     <button @click="add">添加城市</button>
 </div>
 ​
 <script setup>
     let city = ref([])
     const add = () => {
       city.value = ['北京','上海','广州']
     }
 </script>

修改方式三：改用对象方式

 <div>
     {{company.city}}
     <button @click="add">添加城市</button>
 </div>
 <script setup>
     let company = reactive({
       city: []
     })
 ​
     const add = () => {
       company.city = ['北京','上海','广州']
     }
 </script>

2.情景二

 <div>
     {{city}}
     <button @click="add">添加城市</button>
 </div>
 ​
 <script setup>
     let company = reactive({})
     let {city}  = toRefs(company)
     const add = () => {
       company['city'] = ['北京','上海','南京']
     }
 </script>
 ​

修改方式一：

 ​
 <div>
     {{city}}
     <button @click="add">添加城市</button>
 </div>
 ​
 <script setup>
     let company = reactive({})
     company['city'] = [] //必须要设置初始值，不然丢失响应式
     let {city}  = toRefs(company)
     const add = () => {
       company['city'] = ['北京','上海','南京']
     }
 </script>

修改方式二：

下面这种情况不用设置初始值，响应式不会丢失

 <div>
     {{company.city}}
     <button @click="add">添加城市</button>
 </div>
 ​
 <script setup>
     let company = reactive({})
     const add = () => {
       company['city'] = ['北京','上海','南京']
     }
 </script>
 ​

3.情景三

vue2中

 <template>
   <div>
     <p v-for="(item, index) in list" :key="index">{{item}}</p>
     <button @click="change">change</button>
   </div>
 </template>
 ​
 <script>
 export default {
   data(){
     return {
       list: [
         '张三',
         '李四',
         '王五',
       ]
     }
   },
   methods: {
     change() {
       this.list[0] = 'hsy';
       console.log('this.list[0]:' + this.list[0]);
     }
   }
 }
 </script>

解决方法：

 change() {
   // this.list[0] = 'hsy';
   this.$set(this.list, 0, 'hsy');
   //或者调用数组方法
   this.list.splice(0,1,'hsy');
   console.log('this.list[0]:' + this.list[0]);
 }