Vue.js 2中如何让watch监听不触发初始接口数据赋值的变更

解决方案1：添加初始化状态标志位（最通用，无场景限制） #

在data中新增一个标记位记录初始加载是否完成，只有初始加载完成后才执行watch的后续逻辑：

import axios from "axios";

export default {
  name: 'Settings',
  data: () => ({
    motionSensor: null,
    // 新增初始化标记，默认未完成
    isInitFinished: false
  }),
  mounted() {
    axios
      .get('http://localhost:8000/status.json')
      .then(response => {
        this.motionSensor = response.data['motionsensor'] ? "1" : "0";
        // 初始赋值完成后再把标记设为true
        this.isInitFinished = true;
      })
  },
  watch: {
    motionSensor: function(val) {
      // 初始未完成时直接返回，不执行后续逻辑
      if (!this.isInitFinished) return
      alert('Motion sensor value is now: ' + val)
    }
  }
}

解决方案2：请求完成后手动挂载监听器（代码更简洁，无冗余标记） #

不在组件初始化时就声明watch，而是等初始数据赋值完成后，再调用Vue实例的$watch方法手动注册监听：

import axios from "axios";

export default {
  name: 'Settings',
  data: () => ({
    motionSensor: null
  }),
  mounted() {
    axios
      .get('http://localhost:8000/status.json')
      .then(response => {
        this.motionSensor = response.data['motionsensor'] ? "1" : "0";
        // 初始赋值完成后再注册监听器，自然不会触发初始赋值的回调
        this.$watch('motionSensor', function(val) {
          alert('Motion sensor value is now: ' + val)
        })
      })
  }
}

解决方案3：通过watch旧值判断（适用不会把变量重置为初始值null的场景） #

watch回调默认接收两个参数：新值、旧值，初始赋值时旧值为你设置的初始值null，判断旧值为null时直接跳过即可：

import axios from "axios";

export default {
  name: 'Settings',
  data: () => ({
    motionSensor: null
  }),
  mounted() {
    axios
      .get('http://localhost:8000/status.json')
      .then(response => {
        this.motionSensor = response.data['motionsensor'] ? "1" : "0";
      })
  },
  watch: {
    // 第二个参数为旧值
    motionSensor: function(val, oldVal) {
      // 初始赋值时旧值为null，直接跳过
      if (oldVal === null) return
      alert('Motion sensor value is now: ' + val)
    }
  }
}

内容的提问来源于stack exchange，提问作者Daniel