今天在做專案的時候，遇到這麼一個需求，就是當頁面切換的時候，如果當前頁面沒有改動，就彈出一個提示窗。我當時的第一反應是，這裡應該使用watch來進行觀察，再用一個變數來標識是否使用者進行了改動，程式碼如下：

export default
{
    data()
    {
        return {
            data_list: [],
            do_not_save: false,
        }
    },
    watch: 
    {
        data_list: {
            handler: function
 
(after, before) {
                this.do_not_save = true
            },
            deep: true,
        }
    },
    created: function() {
        axios.get(url).then(function(response){
            vm.data_list = response.data
        }
    }       
}

後來發現do_not_save這個變數，始終都是true。想了半天（原諒我很菜），原來我在初始化的時候，對data_list進行賦值，此時watch就觀察到了data_list的變化，把do_not_save這個變數轉換成了true。所以說，watch這個特性，是針對當前元件中的初始值來進行判斷的，我們在初始化的時候，這個data_list已經被修改了，此時watch已經被觸發。解決方法如下：

created: function() {
    axios.get(url).then(function(response){
        vm.data_list = response.data
    }
    this.$watch('data_list', function(){this.do_not_save = true}, {deep: true})
}

我把觀察的方法，放在了初始化data_list之後，這樣watch的初始值就不再是原來的空陣列了，而是我們賦值之後的data_list了。歡迎大家批評指正！