Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解

2020-06-16 05:43:32易采站长站整理

k、vm.$refs:类型(Object),一个对象,其中包含了所有拥有 ref 注册的子组件;

l、vm.$isServer:类型(boolean),当前Vue实例是否运行于服务器;

官网对应

1.5.5、箭头函数

箭头函数是ES6引入的一种语法糖,使得写函数更加简便,类似Lambda表达式,基本格式如下:

()=>{}

示例:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue2实例</title>
</head>
<body>
<div id="app1">
</div>
<script type="text/javascript">
var m1=a=>a+1;
console.log(m1(100));
//类似
var m2=function(a){
return a+1;
}
console.log(m2(100));

var m3=(a,b)=>a+b;
console.log(m3(100,200));

var m4=(a,b)=>{a++; b++; return a+b;}; //如果方法体中有多个表达式,则需要大括号与return
console.log(m4(100,200));
</script>
</body>
</html>

结果:

二、生命周期 2.1、实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。

比如 created 钩子可以用来在一个实例被创建之后执行代码:


new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"

也有一些其它的钩子,在实例生命周期的不同场景下调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。

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

2.2、生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

中文版: