Vue2.0学习--基础--1--Vue实例

最新推荐文章于 2023-11-08 11:18:24 发布

naildingding

最新推荐文章于 2023-11-08 11:18:24 发布

阅读量295

点赞数

分类专栏：框架—Vue

本文链接：https://blog.csdn.net/small_sesame/article/details/118332031

版权

vue.js 前端

框架—Vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

（day2）

Vue实例

这一章节讲的主要就是Vue实例，以及一些实例的数据、方法，以及实例的生命周期。

创建一个Vue实例、数据与方法、实例生命周期钩子、生命周期图示。

1、创建一个Vue实例

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

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

虽然Vue没有完全遵守MVVM模型（我们稍后再来了解这个MVVM模型），但是Vue 的设计是受到了MVVM的启发，因此在文档中经常使用vm（ViewModel的缩写）来表示一个Vue实例。

每个Vue实例都会有一个选项对象作为参数。这一章节主要就是围绕着如何使用选项对象的选项来创建你想要的行为，。在API文档中有完整的选项列表。
（选项/数据、选项/DOM、选项/生命周期钩子、选项/资源、选项/组合、选项/其他）

（这个几个分类里面都对应这不同的选项，具体的以后再了解，现在先知道有这么一个东西）

（选项/数据：data、props、propsData、computed、methods、watch）

（选项/DOM：el、template、render、renderError）

（选项/生命周期钩子：

beforeCreate、created、
beforeMount、mounted、
beforeUpdate、updated、
activated、deactivated、
beforeDestory、destroyed、
errorCaptured）

（选项/资源：directives、filters、components）

（选项/组合：parent、mixins、extends、provide/inject）

（选项/其他：name、delimiters、functional、model、inheritAttrs、comments）

其实可以这么理解：Vue应用都是由最初创建的Vue根实例 以及 嵌套的、可复用的组件构成的（这些组件也是Vue实例）。

2、数据与方法

①、数据

Vue实例的选项对象中的data选项，Vue的data选项也是一个对象，当一个Vue实例被创建的时候，data对象中的所有属性都会被加入到Vue的响应式系统中。

//数据对象
var data = {a:5};

//将该数据对象插入到一个Vue实例中
var vm = new Vue({
    data:data
});


vm.a == data.a;    //true

vm.a =2;
data.a;        //2

data.a = 3;
vm.a;         //3

（vm.a和data.a 的关系你品，你细品。。原始值的改变会改变插入vm中的值，vm中的值发生改变也会影响到原始值）

只有在Vue实例创建时就已经存在于data中的属性才可以响应式的使视图发生变化。

上面那样创建了vue实例过后，我们在向vm中加入一个新的property，如：vm.b = "hi"；。视图是不会发生任何变化的。

所以一定要在创建Vue实例的时候，将将来可能用到的属性都定义上，如果一开始还没有值，就设置为null或者空，或者一些的初始值。

data:{
    newTodoText:'',
    visitCount:0,
    hideCompletedTodos:false,
    todos:[],
    error:null
}

对于object.freeze()的对象，Vue 的响应式系统是无法再追踪变化的。
（我在想这不是必然的吗？如果传入到Vue实例的data属性的对象是冻结对象（object.freeze(data)），那么这个对象肯定是不可扩展属性、不可删除属性、不可修改属性，Vue响应式系统怎么又有可能追踪对象property变化呢？）

②、方法

Vue实例的属性和方法。

通过$符号，将Vue实例自身的方法和用户定义的属性与方法相区分。

（Vue实例属性和方法都有$符号）

var data = {a:1};
var vm = new Vue({
    el:"#example",
    data:data
});

vm.$data === data;    //true
vm.$el === document.getElementById("example");    //true


//Vue的一个实例方法——$watch
//这个watch观察变量的变化，记录变化时的最新值和原来值
vm.$watch("a",function(newValue,oldValue){
    //这个回调将在'vm.a'改变后调用

});

可以在API参考中查阅到完整的Vue实例属性和方法。

（实例property：vm.$data、vm.$props、vm.$el、vm.$options、vm.$parent、vm.$root、vm.$children、vm.$slots、vm.$scopedSlots、vm.$refs、vm.$isServer、vm.$attrs、vm.$listeners）

（实例方法/数据：vm.$watch、vm.$set、vm.$delete）

（实例方法/事件：vm.$on、vm.$once、vm.$off、vm.$emit）

（实例方法/生命周期：vm.$mount、vm.$forceUpdate、vm.$nextTick、vm.$destroy）

3、实例生命周期钩子

就是在实例创建过程中，各个时期调用的函数。

用户就可以在这个各个时期添加自己的代码。

（选项/生命周期钩子：

beforeCreate、created、
beforeMount、mounted、
beforeUpdate、updated、
activated、deactivated、
beforeDestory、destroyed、
errorCaptured）

在不同的时期调用的不同的函数，声明周期钩子的 this 上下文指向调用它的Vue实例。

注意：实例生命周期钩子函数不能使用箭头函数。

（官网原话）

不要在选项 property 或回调上使用箭头函数，比如 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 之类的错误。

<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>