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

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

};
// misc
parent?: Component; // 父组件实例
mixins?: Array<Object>; // mixins传入的数据
name?: string; // 当前的组件名
extends?: Class<Component> | Object; // extends传入的数据
delimiters?: [string, string]; // 模板分隔符
// 私有属性,均为内部创建自定义组件的对象时使用
_isComponent?: true; // 是否是组件
_propKeys?: Array<string>; // props传入对象的键数组
_parentVnode?: VNode; // 当前组件,在父组件中的VNode对象
_parentListeners?: ?Object; // 当前组件,在父组件上绑定的事件
_renderChildren?: ?Array<VNode>; // 父组件中定义在当前元素内的子元素的VNode数组(slot)
_componentTag: ?string; // 自定义标签名
_scopeId: ?string;
_base: Class<Component>; // Vue
_parentElm: ?Node; // 当前自定义组件的父级dom结点
_refElm: ?Node; // 当前元素的nextSlibing元素,即当前dom要插入到_parentElm结点下的_refElm前
}

1.5.1、computed计算属性

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:


<span>{{msg.split('').reverse().join('')}}</span>

使用计算属性定义成一个方法可以复用且模板会更加简洁:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue2实例</title>
</head>
<body>
<div id="app1">
<p>
<input type="text" v-model="msg" />
<span>{{msg.split('').reverse().join('')}}</span>
</p>
<p>
<input type="text" v-model="msg" />
<span>{{revMsg}}</span>
</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data: {
msg: "hello"
},
computed: {
revMsg: function() {
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>

结果:

注意:

1、computed中定义的方法只允许当着属性用,不能带参数,这限制它的复用性。

2、当方法中的属性发生变化时方法将重新调用

3、不应该使用箭头函数来定义计算属性函数

4、 computed计算属性可以对属性进行缓存的,计算属性只有当该属性发生变化的时候才会重新计算值