Vue 入门级学习笔记 实例

创建一个Vue实例

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

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

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

 

数据与方法

		var origin = {
			a: 1
		}
		var vm = new Vue({
			//选项对象
			data: origin
		});
		vm.a; //1
		vm.$data == origin; //true

可以直接在data中定义新对象,本例中引用对象只是为了方便说明

可以直接通过vm.a的方式来访问vm中data中的a属性

这是因为vue重写了对应属性的访问描述符getter和setter等

只有当实例被创建时data中存在的属性才是响应式的(响应式的属性值发生改变时,视图将会产生响应,即匹配更新为最新的值)

也就是说添加了新的属性并不是响应式

解决方式:占位属性,使用value为空值('',0,false,[],null等)

		var vm = new Vue({
			//选项对象
			data: {
				a:null,
				b:"",
				c:[]
			}
		});

这里唯一例外的是使用Object.freeze()

(Object.freeze()会调用Object.preventExtensions(..)来禁止添加新属性并把所有属性标记为configurable:false和writable:false)

这也意味着响应系统无法再最追踪变化

扫描二维码关注公众号，回复： 3696587 查看本文章

除了数据属性,Vue实例还暴露了一些有用的实例属性和方法(比如data)

这些实例方法使用$前缀以区分用户定义的属性(data中的属性)

		var origin = {
			a: 1
		}
		var vm = new Vue({
			//选项对象
			el: "#vm",
			data: origin
		});
		vm.$data == origin; //true
		vm.$el; //<div id="vm"></div> 
		vm.$watch("a", function(newValue, oldValue) {
			//在vm.a改变后调用
			console.log("vm.$watch调用结果:"+newValue, oldValue);
		});

实例生命周期钩子

每个Vue实例在创建时都要经历一系列的初始化过程(设置数据监听,编译模板,将实例挂载到DOM并在数据更新的时候更新DOM等)

这个过程中也会运行一些叫声明周期钩子的函数(如 created , mounted , updated , 和 destroyed 等)

生命周期钩子的this上下文指向调用他的Vue实例

		var vm = new Vue({
			created: function() {
				console.log("created已被调用");
			}
		})

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例