vue.js - Vuejs 设置数据不是响应式的

Question

我对 Vuejs 完全陌生，对不起，如果这是一个愚蠢的问题。这是一个 nuxt 应用程序，正在使用 IntersectionObserver 并且取决于元素可见性，我试图改变内部状态（数据）。但除非我在 vue 开发工具中刷新，否则它不会反应。

所以这是我的方法

async mounted(){
    let options = {
        root: document.querySelector('#scroll-root'),
        rootMargin: '0px',
        threshold: 1.0
      }
    
    const testimonialStart:any = document.querySelector('#testimonial-start')
    let startObserver = new IntersectionObserver(((entries,observer)=>{
        entries.forEach((entry)=>{
            if(entry.isIntersecting){
              this.updateTesti(false)
            }
            else{
              this.updateTesti(true)
            }
        })
    }), options);
    startObserver.observe(testimonialStart)
  }

在方法中

updateTesti(st:boolean){
    this.testiPrev = st
    console.log(st,'state')
},

在数据中

data(){
   return {
      testiPrev:false,

   }
}

交叉点观察器没有问题，在 console.log 中按预期获取布尔值。我应该怎么做才能在这里获得反应？

临时解决方案： 我发现如果我像下面这样在手表中添加 testiPrev，就会得到反应。

watch: {
   testiPrev: function(){
   }

},

这让我又问了一个问题，我们是否需要明确地包含手表内的所有属性以实现反应性，如果有更好的方法请告诉我。

标签： vue.js