第4节 数据和方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<div id="app">
    {{a}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
     // 我们的数据对象
  var data = { a: 1 }
  //这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
    //    Object.freeze(data);
  // 该对象被加入到一个 Vue 实例中
  var vm = new Vue({
    el : "#app",
    data: data
  })
  // 获得这个实例上的属性
  // 返回源数据中对应的字段
  vm.a == data.a // => true
  // 设置属性也会影响到原始数据
  vm.a = 2
  data.a // => 2
  //监听a变化，并且控制台输出改变前和改变后的值
  vm.$watch('a', function(newVal, oldVal){
    console.log(newVal, oldVal);
  })
    /* 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。
   * 它们都有前缀 $，以便与用户定义的属性区分开来*/
  vm.$data.a = "test...."// => test....
</script>