vue 官方教程文档笔记

1.Vue视图数据响应式更新

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

注释：
1。 data中所有的值都挂在vm实例中，当修改vm 实例中的属性值时data中的值回相应改变。且视图重新渲染。反之同理
2。值得注意的是只有在data中定义的属性发生变化的时候试图才会被渲染，如果在试图中没有定义的数据如(vm.text = 1) 发生改变不会触发视图的改变，如需要改数据也是响应式的只需在data中初始化该值即可

2.object.freeze() 阻止数据视图相应

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

• 在vue 中除了数据属性，Vue还暴露了许多实例方法。他们都以前缀 $开头。如下

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true 获取实例中的data
vm.$el === document.getElementById('example') // => true 获取实例挂在的dom

// $watch 是一个实例方法 监听属性可以监听路由，数据的变化(对 对象数据的监听有一定的变化详细见后)
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})