1.require.context()快速注册constpath=require('path')constfiles=require.context('@/components/home',false,/.vue$/)constmodules={}files.keys().forEach(key=>{constname=path.basename(key,'.vue')modules[name]=files(key).default||files(key)})components:modules2.watchusageimmediate立即执行监视：{inpVal:{handler:'getList',immediate:true}}deep深度监控watch:{inpValObj:{handler(newVal,oldVal){console.log(newVal)console.log(oldVal)},deep:true}}14种组件通信1.props//array:不推荐使用props:[]//objectprops:{inpVal:{type:Number,//有限类型的传入值//typeValuescanbeString,Number,Boolean,Array,Object,Date,Function,Symbol//type也可以是自定义构造函数，通过instanceof检查确认required:true,//是否通过default:200,//默认值，对象或数组默认值必须从工厂函数s中获取例如default:()=>[]validator:(value){//这个值必须匹配以下字符串之一return['success','warning','danger'].indexOf(value)!==-1}}}$emit子组件调用父组件//父组件//子组件this.$emit('title',[{title:'Thisisthetitle'}])vuexstate：定义存储数据的仓库，可以通过this.$store.state或者mapState访问getter：获取store值，可以考虑asstorecalculation属性，可以通过this.$store.getter或者mapGetters访问mutation：同步改变store值，为什么设计成同步的，因为mutation直接改变store值，vue记录操作，如果是异步，它无法跟踪更改。可以通过mapMutationscallaction:callfunction异步执行mutation，然后改变storevalue，可以通过this.$dispatch或者mapActions:modules访问modules，如果状态太多，可以拆分成modules，最后引入attars和listenersattars获取子组件中没有定义的值propsprops:{width:{type:String,default:''}},mounted(){console.log(this.$attrs)//{title:"Thisisthetitle",height:"80",imgUrl:"imgUrl"}},监听器获取父组件的绑定事件//父组件/子组件mounted(){console.log(this.$listeners)//可以获取到change事件}inheritAttrs为false，子组件无法获取attrsprovide和injectThisisfoo'},mounted(){this.foo='Thisisthenewfoo'}//子组件或孙组件inject:['foo'],mounted(){console.log(this.foo)//子组件打印的还是'thisisfoo'}parentandchildrenthis.$childrengetchildcomponentsthis.parentget获取父组件refsthis.$refs.home$rootthis.$root获取根instance.sync同步函数`//父组件//将扩展为title=val"/>//子组件//所以子组件可以通过$emit触发update方法改变mounted(){this.$emit("update:title",'Thisisthenewtitle')}`v-slot槽//父组件任意内容我是匿名槽
//子组件我是默认值//v-slot:default写法比较统一和命名，容易理解，你不需要写命名槽我是默认值scopeslot子组件的数据在父组件中使用//父组件{{slotProps.user.firstName}}//slotProps可以命名为arbitraly//slotProps访问子组件标签上的属性数据集合slotAllv-bind:user="user"//子组件{{user.lastName}}data(){return{user:{lastName:"Zhang",firstName:"yue"},test:[1,2,3,4]}},//{{user.lastName}}为默认数据v-slot:todo父页面没有时(="slotProps")11.EventBus使用vue作为数据通信的总线//在主要。jsVue.prototype.$eventBus=newVue()//传值组件this.$eventBus.$emit('eventTarget','ThisisthevaluepassedfromeventTarget')//接收组件this.$eventBus.$on("eventTarget",v=>{console.log('eventTarget',v);//这是eventTarget传过来的值})broadcastanddispatcheventbroadcastanddispatchfunctionbroadcast(componentName,eventName,params){this.$children.forEach(child=>{varname=child.$options.componentName;if(name===componentName){child.$emit.apply(child,[eventName].concat(params));}else{广播.apply(child,[componentName,eventName].concat(params));}});}exportdefault{方法:{dispatch(componentName,eventName,params){varparent=this.$父母；变种名称=父母。$options.componentName;while(parent&&(!name||name!==componentName)){parent=parent.$父母；如果（父母）{名字=父母。$options.componentName;}}if(parent){parent.$emit.apply(parent,[eventName].concat(params));}},broadcast(componentName,eventName,params){broadcast.call(this,componentName,eventName,params);}}}路由参数//路由定义{path:'/describe/:id',name:'Describe',component:Describe}//页面参数this.$router.push({path:`/describe/${id}`,})//页面获取this.$route.params.id//路由定义{path:'/describe',name:'Describe',component:Describe}//页面传参this.$router.push({name:'Describe',params:{id:id}})//pagegetthis.$route.params.id//路由定义{path:'/describe',name:'Describe',component:describe}//页面参数this.$router.push({path:'/describe',query:{id:id`})//页面获取this.$route.query.id14Vue.observable使一个对象可以响应模仿vuex//文件路径-/store/store.jsimportVuefrom'vue'exportconststore=Vue.observable({count:0})exportconstmutations={setCount(count){store.count=count}}//使用＆lt;template>数量+{{count}}-
renderfunction部分代码重复过多templateMultiple//根据props生成标签//初级
<slot> 异步组件工程太大加载慢1.异步注册组件//工厂函数执行resolve回调Vue.component('async-webpack-example',function(resolve){//这种特殊的`require`语法会告诉webpack//自动将您的构建代码分成多个包，这些包//将通过Ajax请求加载require(['./my-async-component'],resolve)})//工厂函数返回PromiseVue.component('async-webpack-example',//这个`import`函数返回一个`Promise`对象()=>import('./my-async-component'))//工厂函数返回一个可配置的组件对象constAsyncComponent=()=>({//需要加载的组件（应该是一个`Promise`对象）component:import('./MyComponent.vue'),//用于异步组件加载的组件loading:LoadingComponent,//LoadingfailedThecomponentusedwhenerror:ErrorComponent,//显示加载时组件的延迟时间，默认值为200（毫秒）delay:200,//如果提供了超时，组件加载也超时，//thentheloadingfails使用时使用的组件。默认值为：`Infinity`timeout:3000})异步组件的本质是渲染两次。第一个渲染加载占位符。2.webpack<2.4时路由的按需加载{path:'/',name:'home',components:resolve=>require(['@/components/home'],resolve)}whenwebpack>2.4{path:'/',name:'home',components:()=>import('@/components/home')}import()方法由es6提出。import()方法是动态加载的，返回一个Promise对象。then方法的参数是加载的模块。与Node.js的require方法类似，主要的import()方法是异步加载的。动态组件使用is`
