为什么 Vue 看不到数据的变化？

Question

我希望 function:createComparation 在 tableRowName 更改时工作，但实际上当 tableRowName 更改时，它没有工作，vue 紧随其后； createComparation 是另一个函数，它没有由 vue 定义，而是由 javascript

定义

const selectedRight =Vue.createApp({
    data(){
        return {
            tableRow:0,
            tableRowName:[],
            stockName:[],
            rectWidth:40,
            rectHeight:5,
        }
    },
    watch: {
        tableRowName(newtable,oldtable){
            console.log(1)
            createComparation()
        },
        immediate:true,
        stockName(){
            changeTip()
        },
        
    },
    methods:{

    }
}).mount('#selectedRight')

Answer 1

我想问题可能出在哪个数组上。你可以试试这个：

computed: {
    rowNames() {
        return this.tableRowName;
        // if the line above doesn't work:
        return this.tableRowName.join();
    }
},
watch: {
    rowNames(newtable,oldtable){
        createComparation()
    },

Answer 2

如果 tableRowName 包含对象，则必须使用

deep:true

watch: {
        tableRowName(newtable,oldtable){
            console.log(1)
            createComparation()
        },
        immediate:true,
        deep: true,
        stockName(){
            changeTip()
        },
        
    },

但我认为您正在以非响应方式更新数组，Vue 无法检测到数组的以下更改：

当您直接使用索引设置项目时，例如

vm.items[indexOfItem] = newValue

修改数组长度时，例如

vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // is NOT reactive
vm.items.length = 2 // is NOT reactive

Answer 3

我想这就是您要找的。您需要将处理程序定义为您要观看的属性的对象并设置 immediate: true.

Vue.config.productionTip = false
Vue.config.devtools = false

new Vue({
  el: "#app",
  data() {
    return {
      tableRow: 0,
      tableRowName: [],
      stockName: [],
      rectWidth: 40,
      rectHeight: 5,
    }
  },
  watch: {
    tableRowName: {
      handler(newtable) {
        console.log('Calling createComparation function');
        console.info(newtable);
      },
      immediate: true
    }

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="tableRowName.push(Math.random())">Trigger change manually again</button>
</div>

Answer 4

监视方法定义错误。当您需要立即使用时，您必须将函数体放入处理程序属性.

例如，

 watch: {
  tableRowName: {
    handler: function() {

    },
    immediate: true
  }
        
  },

为什么 Vue 看不到数据的变化？

Why Vue can't watch the data change?

javascript

vue.js

vuejs3