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 = 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
- })
除了数据属性, 还暴露了实例的属性和方法, 他们都有前缀 $, 如 $set,$delete,$watch, 以便于用户自定义的属性区分开来.
这些属性方法在下节述说. 可以查看官方 API https://cn.vuejs.org/v2/api/#vm-data
生命周期
跟其他语言实例对象一样, Vue 实例也有自己的生命周期.
而这些生命周期中的过程, 运行的一些函数叫生命周期钩子
这些函数分别为:
beforeCreate // 实例刚创建, 为监视或配置属性, 事件, 只进行了 new 操作
created // 创建实例已经完成, 并完成了属性的监视和事件配置
beforeMount // 模板编译之前, 未挂载, 数据还未显示到视图已依旧为模板 {{}}
mounted // 模板编译之后, 已经挂载, 渲染页面, 显示数据
- beforeUpdate // 组件更新之前执行
- updated // 组件更新之后执行
- beforeDestroy // 组件销毁之前执行
destroyed // 组件销毁, 清理它与其它实例的连接, 解绑它的全部指令及事件监听器
举个案例:
- id="app">
- message:{{msg}}
@click="changeMsg"> 修改 message 属性
onclick="destory()"> 销毁实例
- 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 之类的错误.
如果此文章未能让您更明白, 请参考 Vue 实例与生命周期 https://www.cnblogs.com/xiaofenguo/p/6605091.html?_blank
来源: http://www.bubuko.com/infodetail-2567145.html