改变vue的$root的数据不触发模板修改

Question

示例：http://jsbin.com/tulagosafa/e...

当我加上一个this.num上的改变的时候，就可以触发改变，但是只改变$root上的数据的时候，不触发模板更新

new Vue({
  el: '#root',
  data:{
      num:0,
  },
  created(){
    this.$root.time = +new Date()
    setInterval(()=>{
      this.$root.time = +new Date()
      this.num = Math.random()
    },1000)
  }
})

Answer 1

$root下并没有time这个参数

new Vue({
  el: '#root',
  data:{
time: 0
  },
  created(){
this.$root.time = +new Date()
setInterval(()=>{
  this.$root.time = +new Date()
},1000)
  }
})

Answer 2

对的,所有使用的属性要在data声明,因为Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化