为什么vue中无法这样对新老变量做比较

Question

在一个interval定时器里面执行一个getAll方法，这个getAll方法会使用axios循环读取某个接口，一旦那个接口数据有变动，就会将新数据写入vue.count中，我现在想实现的是一旦检测到这个vue.count有变化就alert弹框并且audio标签播放声音，但是我发现这样做并没有效果，原因是什么呢？为什么old和new始终是一样的？

Answer 1

watch你值得拥有

Answer 2

因为你vue.old=vue.count这两个始终相等，你后续又用他们做比较，这种场景你可以使用watch实现，或者

先不赋值

if(vue.count===vue.old){

    数据无变化

}else{

    alert('new message')

}

Answer 3

你可以参照这样的写法

    new Vue({

        el: "#app",

        data() {

            return {

                count: ''

            }

        },

        methods: {

            getAll() {

                return new Promise((resolve, reject) => {

                    axios.get('../json/menu.json').then(res => {

                        resolve(res.data)

                    })

                })

            }

        },

        watch: {

            count: function () {

                alert('数据发生变化')

            }

        },

        mounted() {

            let that = this;

            setInterval(async () => {

                that.count = await that.getAll()

            }, 5000);

        }

    })

使用watch来监听count