【Vue.js】Vue官方文档学习-Vue实例

一、创建一个Vue实例

var vm = new Vue({
  // 选项
})

每个Vue应用程序都是通过Vue函数创建出一个新的Vue对象开始的。
通常我们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。
在创建一个 Vue 实例时，你会传入一个选项对象。
Vue 应用程序由「一个使用 new Vue 创建的 Vue 根实例」、「嵌套的树结构（可选）」和「可复用的组件」组成。
所有 Vue 组件，都是 Vue 实例，并且组件都接收相同的选项对象（除了一些根实例特有(root-specific)的选项）。

二、data

响应式

// data 对象
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

在创建 Vue 实例时，会将所有在 data 对象中找到的属性，都添加到 Vue 的响应式系统中。每当这些属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。
每当 data 对象发生变化，都会触发视图重新渲染。
如果实例已经创建，那么只有那些 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'">点我修改</button>
</div>

前缀$

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
在这个过程中，Vue 实例会调用执行一些生命周期钩子函数，这样用户能够在特定阶段添加自己的代码。

//  在实例创建后将调用 created 钩子函数：
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，会在实例生命周期的不同阶段调用，如 mounted、updated 和 destroyed。
所有的钩子函数在调用时，其 this 上下文都会指向调用它的 Vue 实例。

生命周期示意图

这里写图片描述