vue2中watch能不能观察外部属性？

Question

我用的vue2.0，写的一个组件watch有点疑问请教一下各位大神。

我在data里面声明了一个变量isVRMode：

然后我页面上引入了一个库（Cesium）的三维场景，上面自带了一个按钮vrButton，它有一个属性vrBotton.viewModel.isVRMode。

问题来了，我有没有办法观察vrBotton.viewModel.isVRMode这个属性的变化呢？或者是和我的data中的isVRMode关联起来，然后观察呢？

由于vrBotton.viewModel.isVRMode的值改变是点那个按钮自动触发的，不是我控制的，我搞了好久了，没找到解决办法，望处理过类似的大拿指点一下。

var myObject = {}
Object.defineProperty(myObject, 'isVRMode', {
value: viewer._vrButton.viewModel.isVRMode
         })

this.$watch('myObject.isVRMode', function (val) {
console.log('myObject.isVRMode')
         }, {
deep: true
         })

window.myObject = myObject
我试图这样把属性关联起来，但实际上并没什么用，如下图，我点按钮后viewer._vrButton.viewModel.isVRMode已经是true了，但是myObject.isVRMode仍然是false。

不知这种情况是不支持，还是我思路弄错了呢？

Answer 1

watch:{

isVRMode: function(new,old){
    //变化时你要做的操作
}

}

Answer 2

// 模拟你的对象
let vrBotton = {
  viewModel: {
    isVRMode: 'hello'
  }
}

// 处理逻辑
function change (val, oldVal) {
  console.log(`new value: ${val}, old value: ${oldVal}`)
}

(function () {
  let val = vrBotton.viewModel.isVRMode
  Object.defineProperty(vrBotton.viewModel, 'isVRMode', {
    get () {
      return val
    },
    set (cur) {
      if (val !== cur) {
        change(cur, val) // 数据改变的时候调用change方法
        val = cur
      }
    }
  })
})()

效果截图如下：