Vue中的OptionsDataDOM生命周期钩子资源组合其他1datadatapropspropsDatamethodswatch1.1dataVue实例的data对象初始化时，Vue会递归的将data的属性转换成getter/setter，能够响应数据变化，以_和$开头的属性将不会被处理。组件中的数据必须返回一个初始数据对象的函数。如果是对象，组件创建的多个实例将共享对这个数据对象的引用。1.2computedcomputedattribute对象函数形式属性：只读取对象形式属性：读取并设置data(){return{a:1,};},computed:{fnA(){通过set/get函数返回.a*2;},oA:{get(){返回this.a+1;},set(newVal){this.a=newVal*2;},},},mounted(){console.log(this.fnA);//2console.log(this.oA);//2console.log(this.a);//1这个.oA=2;控制台日志（this.oA）；//5console.log(this.a);//4console.log(this.fnA);//8},1.3methods方法对象混合到Vue实例中，这些方法可以直接通过vm实例访问，也可以在.h中使用的指令表达式中访问。方法中的this自动绑定Vue实例1.4watch设置对象函数和字符串形式的数据检测data(){return{a:1,b:{c:"bar"},};},watch:{a:"show",b:"show",},方法：{show(val,oldVal){console.log(val,oldVal);},},mounted(){this.a=2;//21this.b.c=2;}，函数形式是用函数代替字符串，不能深度检测对象形式data(){return{a:1,b:{c:"bar"},};},watch:{a:{handler:"show",immediate:true,},b:{handler:"show",deep:true,},},方法：{show(val,oldVal){console.log(val,oldVal);},},mounted(){this.b.c=2;},//1undefined//observerobserverhandler后跟一个回调函数，如果immediate为true，则立即执行，如果deep为true，数组即可深度检测组合使用字符串、函数、对象，它们会依次被调用，可以设置多个handler1.5props从父组件接收数据，数组或对象数组为简单形式//父组件//子组件父组件传递数据后，子组件可以使用数组接收接收到的数据，并使用对象形式配置接收到的数据//父组件//子组件可以对对象形式的props中的每个属性进行检查，可以对单个值或数组类型添加类型检查和验证：类型检查String、Number、Boolean,Array,Object,Date,Function,Symbol,也支持自定义构造函数,通过instanceofdefault检查:未接收数据的默认值required:布尔值,prop是否必须接收validator:判断函数,将prop作为参数传递,检查不满足条件，会报警告1.6propsDataisonlyusedininstancesbynew2DOMeltemplaterenderrenderError2.1el只在new创建实例时有效提供一个页面上已经存在的DOM元素作为Vue实例挂载目标可以是CSS选择器，也可以是HTMLElement实例2.2template使用字符串作为Vue实例的标识。模板将替换安装的元素。挂载元素的内容将被忽略，除非模板的内容有分发槽。如果它以#开头，它将被用作选择器并使用匹配的innerHTML作为模板。当模板选项中包含渲染函数时，模板将被忽略2.3渲染函数，字符串模板的替换方案接收一个createElement方法作为第一个参数来创建一个VNode。如果组件是函数组件，render函数还会接收一个额外的上下文参数，为没有实例的函数组件提供上下文信息。Whenthereisarenderfunctionintheoption,theVueconstructorwillnotextracttheHTMLtemplatefromthetemplateoptionorthemountedelementspecifiedbytheeloptionCompileandrenderfunctionrender(createElement){returncreateElement('App',{style:{color:"red",},},['text',createElement('h1','Headline')])}createElemnt可以接收三个参数，第一个是必须的，后两个或两个可选参数1：{字符串|对象|Function}可以是一个HTML标签名，一个组件选项对象，或者是一个asyncfunction，可以解析以上任意一个参数2：{Objcet}模板中属性对应的数据对象参数3：{Stirng|Array}children虚拟节点，通过createElement()构建，也可以使用字符串生成文本虚拟节点2.4renderErrorrenderError(h,err)只在开发者环境下有效，当render函数遇到错误时，提供另一种渲染输出。错误将作为第二个参数传递给renderError3资源指令filterscomponents3.1指令包含可用于Vue实例的指令哈希表Vue.directive//本地注册指令：{focus:{inserted(el,binding){el.focus();el.value=binding.value}}}3.2filters包含Vue实例可用过滤器的哈希表Vue.filter//本地注册过滤器：{upperCase(value){returnvalue.toUpperCase()}}3.3components包含Vue实例可用组件哈希表vue.component//本地注册importChild1from'./components/Child1.vue'components:{Child1,Child2:{template:"

衬衫价格为{{price}}

",data(){return{price:"九十五便士",}}}}4组合parentmixinsextendsprovide/inject4.1parent指定创建实例的父实例，子实例可以使用这个。$建立父子关系parent访问父实例，子实例被压入父实例的$children数组中letvm1=newVue({el:"#root1",data(){return{num:1,}},asyncmounted(){awaitthis.$nextTick()console.log('vm1',this.$children[0].num)},})letvm2=newVue({el:"#root2",data(){return{num:2}},parent:vm1,mounted(){console.log('vm2',this.$parent.num)},})//vm21//当vm12使用CLI时，本地注册的组件可以直接使用this.$parent和$children4.2mixins接收混合对象数组Vue.mixin//mixins.jsexportconstmixin1={created(){console.log(this._uid,"created")},}exportconstmixin2={mounted(){console.log(this._uid,"mounted")},}//main.js全局注册import{mixin1}from'./mixins'Vue.mixin(mixin1)//子组件本地注册import{mixin2}from"../mixins";exportdefault{mixins:[mixin2],};//0'created'//1'created'//2'created'//2'mounted'mixin的hook按照传入的先后顺序被调用，可以在调用组件自身的hook之前调用，合并options，可复用的指令、组件、方法等可以合并intocomponents4.3extends选项中的扩展组件，可以是选项对象，也可以是类似mixin的构造函数，mixin相当于多重继承，extends是单继承//extends.jsexportconstextend={data(){return{a:"extend"}},}//componentimport{extend}from"../extends";exportdefault{extends:extend,data(){return{b:“我的”，};},mounted(){console.log(this.$data);},};//{a:'extentd',b:'my'}4.4provide/injectancestorcomponentstodescendants注入依赖provide:object/functionreturnobjectinject:stringarray/object注入的数据无响应,你可以传入一个可监听的对象并注入一个对象作为响应object//Grandfathercomponentprovide(){return{bar:'foo'}}//Childrencomponentinject:{grand:{default:"receptionfailed",from:"bar",},},当接收到密钥时不同的名字，需要设置from，default可以是一个function来访问与key同名的这个组件的数据，default的值与key相同可用的数据和props可以使用注入的值作为数据输入注入：["bar","baz"],data(){return{a:this.bar,};},props:{b:{default(){returnthis.baz;},},},5othernamedelimitersfunctionalmodelinheritAttrscomments5.1name组件名称语义，方便调试5.2delimiters自定义文本插入delimiterdefault:["{{","}}"]同Vue.compile，仅完整版有效5.3functional是否是一个函数式组件，不管理任何状态，不传递任何状态给它，没有生命周期方法，只接收一些prop函数，也就是说它没有状态，没有响应数据，没有实例（没有this上下文)功能组件可以添加render函数选项，render的第二个参数context可以为组件提供contextcontext中包含的字段参考官网功能组件5.4model自定义组件在使用v-modelprop和event时自定义{prop:string,event:string}默认v-model:{prop:"value",event:"input"}//自定义组件Vue.component('my-input',{model:{prop:'uname',event:'change'},props:{uname:{type:String,default:'Tom'},value:String},template:'',方法：{updateVal(val){this.$emit('change',val)}},})//实例newVue({data(){return{uname:"张三"}},}).$mount("#root1")//html