Vue2.0笔记——Vue实例

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

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

当创建一个 Vue 实例时，你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

根实例Root└─ TodoList   ├─ TodoItem   │  ├─ DeleteTodoButton   │  └─ EditTodoButton   └─ TodoListFooter      ├─ ClearTodosButton      └─ TodoListStatistics

我们会在稍后的组件系统章节具体展开。

数据和方法

只要是包含在Vue实例中的属性都是响应式的。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象var data = { a: 1 }// 该对象被加入到一个 Vue 实例中var vm = new Vue({  data: data})// 获得这个实例上的属性// 返回源数据中对应的字段vm.a == data.a // => true// 设置属性也会影响到原始数据vm.a = 2data.a // => 2// ……反之亦然data.a = 3vm.a // => 3

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
如果你晚些需要使用到某个属性，你可以为它定义初始值，以防止后面无法直接使用到属性。

当然，可以不对属性进行响应式追踪，Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再_追踪_变化。

var obj = {    foo: 'bar'}Object.freeze(obj)new Vue({    el: '#app',    data: obj})

除了数据属性，还暴露了实例的属性和方法，他们都有前缀$,如$set,$delete,$watch,以便于用户自定义的属性区分开来。
这些属性方法在下节述说。可以查看官方API

生命周期

跟其他语言实例对象一样，Vue实例也有自己的生命周期。
而这些生命周期中的过程，运行的一些函数叫生命周期钩子
这些函数分别为:

• beforeCreate    //实例刚创建，为监视或配置属性，事件，只进行了new操作

• created    //创建实例已经完成，并完成了属性的监视和事件配置

• beforeMount    //模板编译之前，未挂载，数据还未显示到视图已依旧为模板{{}}

• mounted    //模板编译之后，已经挂载，渲染页面，显示数据

• beforeUpdate    //组件更新之前执行

• updated    //组件更新之后执行

• beforeDestroy    //组件销毁之前执行

• destroyed    //组件销毁，清理它与其它实例的连接，解绑它的全部指令及事件监听器
  举个案例：

  <div id="app">message:{{msg}}<br/><button @click="changeMsg">修改message属性</button><br/><button onclick="destory()">销毁实例</button></div>

var vm = new Vue({        el:'#app',        data:{            msg:'this is Vue Test'        },        methods:{            changeMsg(){                this.msg = '此章节为Vue2.0笔记——Vue实例';            }        },        beforeCreate(){            alert('组件实例刚刚创建，还未进行数据观测和事件配置');        },        created(){  //常用！！！            alert('实例已经创建完成，并且已经进行数据观测和事件配置');        },        beforeMount(){            alert('模板编译之前，还没挂载');        },        mounted(){ //常用！！！            alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');        },        beforeUpdate(){            alert('组件更新之前');        },        updated(){            alert('组件更新之后');        },        beforeDestroy(){            alert('组件销毁之前');        },        destroyed(){            alert('组件销毁之后');        }    })    function destory(){        vm.$destroy();    }

当执行完毕后，更新会自动触发，销毁后，无法更改值。

在其中created函数和mounted函数是较为常用的钩子函数
另外:不要在选项属性或回调上使用箭头函数
比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。