前言

// files已上传的文件
props: ['files'],
data () {
  return {
    fileList: this.files || []
  }
},
watch: {
  fileList (newValue, oldValue) {
    console.log(newValue)
  }
}

利用watch监听父组件传过来的某个数据变化，结果监听不到，搜索半天，尝试半天，发现这种方式只能监听基础类型的变量而这传递的是个数组。所以查了下还是做个总结吧。

注意：不能在 computed 中改变页面变量的值，如果需要改变，请使用 watch

普通基础类型数据

如上。

监听数组

 watch: {
  files: {
    handler (newValue, oldValue) {
      console.log(newValue)
      this.fileList = newValue
    },
    deep: true // 默认值是 false，代表是否深度监听
  }
}

监听对象

data() {
　return {
　　bet: {
　　　pokerState: 53,
　　　pokerHistory: 'local'
　　}   
  }
},
watch: {
  bet: {
	handler(newValue, oldValue) {
	　console.log(newValue)
	},
  	deep: true
  }
}

只要bet中的属性发生变化（可被监测到的），便会执行handler函数；
如果想监测具体的属性变化，如pokerHistory变化时，才执行handler函数，则可以利用计算属性computed做中间层。

对象的具体属性（活用computed）

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

watch中设置参数说明：
deep：是否深度监听
immediate：是否在页面初始化时就启用，true：是