不是响应式的数据改变导致了页面的改变

Question

老师，我在用vue3做毕业设计的时候遇到了一件比较奇怪的事情

模板部分

<div  v-for="companion in travelCompanions" >
	<div v-for="similiarAttraction in companion.similiarAttractions"
          :key="similiarAttraction"
     >
       {{similiarAttraction}}
     </div>
   <img ... @click="()=>showEmailPopup(companion)"/>
</div>

setup函数中处理函数

const showEmailPopup = (companion) => {
        if(companion){
            console.log('我是不是响应式数据呢',companion)//打印出来的就是普通对象
            companion.similiarAttractions = ['kk']
        }

当我修改了这个非响应式数据的时候，我发现页面也随之改变了，这是为什么呢

Answer 1

提问者 sony的小鼠 2021-03-24 16:14:42

老师，我后来做了一下实验，发现是因为我点击之后，有一个响应式的数据发送了变化，导致页面发生了变化，是不是页面发送了变化，哪怕你这个数据不是响应式的，也会随之改变

• Dell #1

  不是的，你必须是响应式的数据，才会同步到页面上的

• 提问者 sony的小鼠 回复 Dell #2

  可是，我这个数据就是普通的js对象，不具备响应式啊，我做的实验是如果这个对象单独发生改变，他不会引起页面的变化，如果有另一个响应式的数据变化了，页面改变了，那之前那个改变了的对象也会重新渲染到页面上。

• 提问者 sony的小鼠 回复 Dell #3

  template: `
                  <div
                   v-for="item in test"
                   :key="item"
                   @click="() => handleClick()"
                  >
                      {{item}}
                  </div>
                  <div v-if="show">我是弹窗</div>
              `,
              setup(props, context){
                  const {ref} =Vue;
                  const test = [1,2,3]
                  const show = ref(false)
                  const handleClick = () => {
                      show.value = !show.value
                      test.push('kk')
                  }
                  return { test, handleClick, show }
              }
  老师，我把这些东西抽丝剥茧出这个最简单的demo，实验结果发现，test数组不是响应式的数据，但是当我点击之后，页面虽test数组发送了改变

点开查看后面3条评论