Vue——API vue实例选项一(2.x)

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没有出