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

Question

i want the function:createComparation work when tableRowName change,but acturely when tableRowName change, it didnt works,vue follows; createComparation is another function which didnt define by vue but only by 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

I guess whatching array might be the issue. You can try this:

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

Answer 2

in case of tableRowName contain objects then you have to use

deep:true

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

but i think you are updating the array without reactive manner, Vue cannot detect the following changes to an array:

When you directly set an item with the index, eg

vm.items[indexOfItem] = newValue

When you modify the length of the array, eg

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

I think this is what you're looking for. You need to define the handler as an object for the property you're trying to watch and set 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

The watch method definition is wrong. When you need to use immediate, you have to put you function body into handler property.

For example,

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

    },
    immediate: true
  }
        
  },