创建一个 Vue 实例

每个web应用都是通过Vue函数来创建新的Vue实例开始的:

var vm=new Vue({
//...
})

没有完全遵循MVVM模型，文档中经常会使用vm(ViewModel)这个变量表示vue实例

创建实例时，可以传入一个 选项对象 。这里主要描述的就是 如何使用这些对象来创建想要的行为。

一个vue通过new Vue()来创建一个 根实例 ，以及可选的嵌套的、可复用的组件树组成。

数据与方法

当一个vue实例创建后，会将data对象中和所有属性加入到Vue的 响应式系统 中，这些属性值发生变化时，页面对应渲染出信息

//我们的数据对象
var data={a:1};
//加入对象到vue实例
var vm=new Vue({
    data:data
})
//获取实例上属性
data.a==vm.a;//=>true
//设置属性也会影响到原始数据
vm.a=2
data.a//=>2
//设置元素数据也会影响到实例中的属性
data.a=3
vm.a//=>3

==当这些数据发生变化时，视图会重新进行渲染，只有被实例创建时在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。在执行过程中也会执行 生命周期钩子 函数，给用户在不同阶段添加自己代码的机会

如 ==create==钩子可以在实例创建后执行代码

new Vue({
    data:{},
    created:function(){
        //实例创建后执行,这里this只想vm实例
        console.info("a is :"+this.a);
    }
})

也有其他的钩子在实例生命周期的不同阶段被调用,如： mounted、updated 和 destroyed等。

生命周期的this上下文指向调用它的vue实例

不要在选择属性的回调上使用箭头函数，例如：

==created: () => console.log(this.a)==

或 ==vm.$watch('a', newValue => this.myMethod())==。

因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到位置，经常导致 ==Uncaught TypeError: Cannot read property of undefined== 或 ==Uncaught TypeError: this.myMethod is not a function== 之类的错误。

生命周期图示