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

      }

    }

  })

})()

效果截图如下：