Vue实例的选项很丰富,包含多种不同的功能特性:组件选项皆为可选
1,选项/数据:props, data, computed, methods, watch, propsData
a, data(数据选项):用来定义组件自身的状态;可用于自身模板中,各种方法中,计算属性,以及一些可以访问实例的生命周期钩子函数中,监视器中;可用于通过attributes传递给子组件;会将数据选项对象属性递归转为响应式属性;这样数据的改变会触发通知以更新视图(Vue的数据变更队列是异步的,响应式负责通知,而更新视图的行为是另一个任务);
data的用法:data: Function | Object; 可以是个函数(当实例是数组时,要求data必须是个函数,当它是个函数时,把返回的值作为实例$data属性,并将返回的对象属性转为响应式属性);可以是个对象; data的属性也将混入到实例中成为实例的属性(不包括嵌套);
//数据选项的使用
var component = {
tamplate: '<div><button @click="reverse">click</button><input :value="value" :type="type"/></div>',
data: function(){ //必须是函数
return {test: 'test', terminal: 'terminal', initVal: this.value};
//this.value from props
},
props: ['value', 'type'], //value from parent component;
computed: {
mer: function(vm){
vm.test + ' ' + this.terminal; //参数vm是组件实例;在属性方法中可以使用this指向实例
}
},
mathods: {
reverse: function(){//方法没有若要使用实例,必须不能是个箭头函数
this.test = this.test.split('').reverse().join('');
}
},
watch:{
mer: function(newVal, oldVal){
}
}
};
b, props(props选项): 用来接收父组件向下传递的数据(这是通过组件的attributes向组件内部传递数据;在组件实例化,会在初始渲染时,从attrs找到props的键值并组成propsData选项对象,propsData会用于props的初始);Vue的设计思想是父组件向子组件单向传递数据,但不允许子组件直接更改父组件的状态,所以强烈建议不要修改来自父组件的状态;这样可以防止以外修改父组建的状态,父组件因状态的更改重新渲染虚拟dom树以及更新DOM元素,也会更新子组件;若修改父组件传递过来的数据,可以props的属性值作为data的属性的初始值,然后转为对组件自身data的修改;
props的用法:props:Array<String> | Object; 可以是个props property名字的列表['value', 'type', 'class',...];可以是个对象{value: Number, type: String, class: String}或者这样的对象{value: {type:Number, default: 0, required: true, validator: function(val){return val > 0;}}, type: {type: String, default: 'text'}, class: String};父组件给出的Attributes没有出