Vue开发必须知道的九大秘密

require.context()在实际开发中，大部分人都是采用组件化的方式进行开发。然后还有很多组件需要引入。例如以下场景：importoutExperInfofrom"@/components/userInfo/outExperInfo";importbaseUserInfofrom"@/components/userInfo/baseUserInfo";importtechnicalExperInfofrom"@/components/userInfo/technicalExperInfo";importskillExperInfofrom"@/components/userInfo/skillcomponents:》写成{outExperInfo,baseUserInfo,technicalExperInfo,skillExperInfo}没有错，但是仔细观察发现写了很多重复的代码。这时候使用require.context()可以写成：constpath=require('path')constfiles=require.context('@/components/userInfo',false,/\.vue$/)constuserComponents={}files.keys().forEach(key=>{constname=path.basename(key,'.vue')userComponents[name]=files(key).default||files(key)})components:userComponents这个方法可以无论需要引入多少组件，都可以使用。路由的按需加载随着项目功能模块的增加，导入的文件数量急剧增加。如果不做任何处理，首屏加载会很慢。这时候路由的按需路由就登场了。当webpack<2.4{path:'/',name:'home',components:resolve=>require(['@/components/home'],resolve)}当webpack>2.4{path:'/',name:'home',components:()=>import('@/components/home')}import()方法是es6提出的，动态加载返回一个Promise对象，then方法的参数是加载的模块。与Node.js的require方法类似，主要的import()方法是异步加载的。动态组件场景：如果项目中有tab切换的需求，那么就会涉及到组件的动态加载。一般的写法是这样的：下一个组件将被重新加载。会消耗很多性能，所以它起作用了。有小伙伴会说，这个切换虽然不消耗性能，但是切换效果没有动画效果，不要着急的话可以用自带的。组件和vue.component前者是部分注册组件，用法如下如下：exportdefault{components:{home}}后者是全局注册组件，主要针对一些全局使用的组件，用法如下：Vue.component('home',home)Vue.nextTickVue.nextTick()方法执行下一个DOM更新周期结束后的延迟回调，所以回调函数可以在页面更新加载完成后执行。下面是几个常见的场景：场景1因为此时创建阶段的dom还没有完全渲染，所以得到的值是undefined，我们修改一下：这样就可以获取到dom了。场景2因为此时，虽然visible的值为true，但是页面dom还没有已更新。所以获取的值是未定义的，我们修改一下：{visible:false};},showRef(){this.visible=true;Vue.nextTick(()=>{console.log(this.$refs.ref)})//

},}}这样就可以获取到dom了。Vue.directive场景：官方给我们提供了很多指令，但是如果我们想把文字变成指定的颜色，定义为指令，这时候就需要用到Vue.directive。示例如下：//全局定义Vue.directive("change-color",function(el,binding,vnode){el.style["color"]=binding.value;})//使用Vue.set()时直接设置项目中数组某一项的值，或者直接设置对象的一个??属性值。这时候你会发现页面没有更新。这是因为Object.defineprototype()的限制，无法监听变化。具体可以查看我的另一篇文章：Vue对象数组数据变化，页面不渲染事件修饰符。停止：防止冒泡。prevent：防止默认行为。self：仅由绑定元素本身触发。once:2.1.4new,onlytriggeroncepassive:2.3.0new,滚动事件的默认行为（即滚动行为）会立即触发，不能和.prevent一起使用.sync修饰符有从2.3.0重新引入了.sync修饰符，但这次它仅作为编译时语法糖存在。它将扩展为自动更新父组件属性的v-on侦听器。示例代码如下：将扩展为：bar=val">当子组件需要更新foo的值时，需要显式触发更新事件：this.$emit('update:foo',newValue)长列表性能优化（数据冻结）众所周知，vue会通过object.defineProperty进行数据劫持，然后在页面上实时对应数据变化。但是，有时候我们只需要纯粹的展示数据，因为数据是不会有任何变化的，我们不需要vue来劫持我们的数据。在数据量很大的情况下，这可以显着减少加载时间。那么如何防止vue劫持我们的数据呢？通过object.freeze方法可以冻结数据，冻结后数据不能再修改。例子如下：letlongList=[{name:'monkeysoft'},...]this.longList=Object.freeze(longList)