vue学习记录（二）

说明：因为是在vue官网学习的 ，所以先按官网的进度来，一些详细的可以在官网的api文档中浏览，目前先不做整理。

-------------------

我知道 当数据改变时，视图会进行重新渲染。注意点：“只有当实例被创建时 data 中存在的属性才是响应式的，”（也就是说如果你添加一个新属性，那么对新属性的更改不会触发任何视图的更新。如果你晚些需要一个属性，请在一开始把他设置为空或不存在）

我们还需要注意的一点是使用 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中 除了数据属性，还有一些有用的实例属性与方法，为便于区分，他们都有前缀$。例如：

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

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

实例生命周期钩子

Vue 实例在被创建时都要经过一系列的初始化过程，（需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等），在这个过程中会运行一些生命周期钩子的函数，方便用户在不同阶段添加自己的代码。

created钩子

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

其它的钩子：mounted、updated和destroyed等。

注意点：

1.申明周期钩子的this上下文指向的是调用他的vue实例。

2.不要在选项属性或回调上使用箭头函数。（会出现的报错

Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。）

生命周期图示

注意位置与写法：