Vue 实例（选项及生命周期）

每个 Vue.js 应用，都是通过 Vue 构造函数，创建一个 Vue 实例开始的。

实例化时，需要传入一个选项对象，它可以包含：挂载元素、数据、方法、生命周期钩子等选项

var vm = new Vue({
  // 选项对象：el、data、methods、computed、watch ...
})

// 虽然没有完全遵循 MVVM 模型，但 Vue 的设计也受到了它的启发，
// 因此，在文档中经常会使用 vm ( ViewModel ) 这个变量名表示 Vue 实例。

一个 Vue 应用，由一个通过 new Vue 创建的根 Vue 实例，以及可选的、嵌套的、可复用的组件树组成

// 一个 todo 应用的组件树，可以是这样的：
   根实例
   └─ TodoList
      ├─ TodoItem
      │  ├─ DeleteTodoButton
      │  └─ EditTodoButton
      └─ TodoListFooter
         ├─ ClearTodosButton
         └─ TodoListStatistics

# 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

Vue 实例的属性和方法

[ ~~数据属性~~ ] 每个 Vue 实例，都会代理其 data 对象里所有的属性，因此，访问 vm.a等价于访问 vm.$data.a。

   var vm = new Vue({
     data: { a:1 }
   })
   vm.a === data.a // -> true
// 设置属性也会影响到原始数据
   vm.a = 2
   data.a // -> 2

# 问题是，只有这些被代理的属性是响应的。
# 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
  vm.b = 3;  // data中的数据会变化，但视图上的数据不会响应式变化

[ 动态处理响应式数据 ] 此外，Vue 还提供了一些有用的实例属性和方法：它们都有前缀 $，以便与用户定义的属性区分开来

[1] 属性

vm.$el 获取实例挂载的元素
vm.$data 获取属性（数据）
vm.$options 获取自定义选项、属性、函数；
vm.$refs 获取通过 ref 属性注册的DOM对象

// HTML
<div id="app">
	<p>{{msg}}</p>
	<p ref="numRef">{{num}}</p>
</div>

// JS
const vm = new Vue({
	// 挂载的DOM元素
	el:'#app',
	data(){
		return{
			msg:'HelloWorld',
			num:100
		}
	},
	// 自定义属性
	username:'webpiece',
	login(){
		console.log('login');
	},
	methods:{
		print(){
			// （1）获取数据
			console.log(vm.$data.msg);  // HelloWorld
			// this 指向了 vm 实例
			// （2）获取实例挂载的元素
			console.log(this.$el); 
			// <div id="app">
			// 	<p>HelloWorld</p>
			// 	<p>100</p>
			// </div>
			// (3) 获取自定义属性、方法
			console.log(this.$options.username);  // webpiece
			this.$options.login();    // login
			// (4) 获取通过ref属性注册的DOM元素
			console.log(this.$refs.numRef);  // <p>100</p>
		}
	}
});

// 调用方法
vm.print();

[2] 方法

vm.$set() 增加属性值（响应式）
vm.$delete() 删除属性值

const vm = new Vue({
	// 挂载的DOM元素
	el:'#app',
	data(){
		return{
			user:{
				username:'webpiece'
			}
		}
	},
	methods:{
		addId(){
			// this.$set(this.user,'id', 1);  局部的
			// Vue.set(this.user,'id', 1);   全局的
			this.$set(this.user,'id','1');
			console.log(this.user.id);  // 1
		},
		deleteId(){
			Vue.delete(this.user,'id');
			console.log(this.user.id);  // undefined
		}
	}
});

// 调用方法
vm.addId();
vm.deleteId();

vm.$watch() 检测属性值变化

// HTML
<p @click="changeNum()">数据：{{num}}</p>

// JS
const vm = new Vue({
	el:'#app',
	data(){
		return{
			num:100
		}
	},
	methods:{
		changeNum(){
			this.num = 5;
		}
	}
})

vm.$watch('num', function (val, oldVal) {
    console.log('新数据为' + val + ',旧数据为' + oldVal);  // 新数据为5,旧数据为100
})

生命周期相关的实例方法

vm.$mount('#app');    // 挂载DOM元素
vm.$destroy();    // 销毁实例

// 将回调延迟到下次 DOM 更新循环之后执行
vm.$nextTick(function(){})  // 局部
Vue.$nextTick(function(){   // 全局（推荐）
    // 放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码
})

Vue 实例（ 选项及生命周期 ）

Vue 实例的属性和方法

Vue 实例（选项及生命周期）