当前位置: 首页 > 科技观察

几个小技巧,让Vue项目更流畅

时间:2023-03-15 18:28:26 科技观察

阵阵键盘声,淡淡的试字。产品不稳定,今晚还没有人退货。在开发Vue的过程中,我们经常会遇到这样那样的一些问题,然后不得不卡在很长一段时间。问题解决后,发现知识点的一些细节还是没有掌握。今天,小编整理了一些在项目中会用到的实用技巧,希望能对正在努力赚钱的你有所帮助。按照江湖的规矩,先赞后读,风流韵事说不完。数据没反应,可能是使用有问题。前几天有个朋友给我发了一段代码,然后说Vue有bug。他明明写的没有问题。为什么数据没有反应?一定是Vue的bug吧?我觉得他比尤雨熙强,我也惹不起,所以就不理他了。但是确实有时候我们在开发中会遇到数据无响应的情况,那么我们应该怎么办呢?例如下面的代码:exportdefault{data(){return{list:['张三','李四']}},methods:{//修改用户名handleChangeName(){this.list[0]='王舞'}}}以上代码希望把张三的名字改成王五。其实这个修改是不生效的,因为Vue无法检测到以下改变的数组:当你使用索引直接设置一个item时,例如:this.list[index]=newValue修改数组的length属性,例如:this.list.length=0,所以在上面的例子中,this.list[0]='WangWu'无法触发数据响应,那怎么办呢?上面提到的Vue.set和$forceUpdate都可以解决这个问题。比如Vue.set可以写Vue.set(this.list,0,'WangWu')复制代码。除了那些方法,Vue还针对Arrays提供了mutation方法在操作数组的时候,我们一般会使用很多data提供的方法,比如push,pop,splice等,在Vue中调用上面数组提供的这些方法来修改值数组的可以触发数据响应是的,比如上面的代码可以改成下面的代码来触发数据响应this.list.splice(0,1,'WangWu')其实如果vue只依赖在getters和setters上,是不可能调用数组上的push,pop等方法触发数据响应的,所以Vue实际上是通过劫持这些方法并对这些方法进行封装变异来实现的。Vue对数组的以下方法进行了封装变体:pushpopshiftunshiftsplicesortreverse所以在操作数组的时候,调用以上方法可以保证数据能够正常响应。下面是Vue源码中封装数组方法的代码:varoriginal=arrayProto[method];def(arrayMethods,method,functionmutator(){//将参数转换为数组;while(len--)args[len]=arguments[len];varresult=original.apply(this,args);//这里的用法和dependArray(value)一样,只是获取depvarob=this.__ob__;variinserted;switch(method){case'push':case'unshift':inserted=args;breakcase'splice':inserted=args.slice(2);break}//如果有新数据插入,插入的数据也需要有响应if(inserted){ob.observeArray(inserted);}//通知依赖更新ob.dep.notify();returnresult});文本格式,filter比较好用filter来简化逻辑,想把时间戳显示成yyyy-MM-DDHH:mm:ss格式怎么办?在将日期呈现到模板之前是否需要在代码中格式化日期?喜欢下面的像上面的写法,需要对每个日期字段调用format,然后通过calculated属性进行转换?这时候可以考虑使用Vue提供的过滤器来简化通过上面的修改注册全局过滤器是不是简单多了?有些过滤器的使用频率很高,比如上面提到的日期过滤器在很多地方都用到了。这时候如果在每个要用到的组件中定义,就显得有点多余了。这时候可以考虑用Vue.filter注册一个全局过滤器,进行全局过滤。一般建议在项目中添加filters目录,然后在filters目录下添加//filters\index.jsimportVuefrom'vue'import{format}from'@/utils/date'Vue.filter('formatDate',value=>{returnformat(value,'yyyy-MM-DDHH:mm:ss')})然后将filters中的文件导入到main.js中,此时可以直接在组件中使用,比如前面的代码可以修改为开发一个插件是不是更简单库,安装它。在使用一些UI框架的时候,经常需要使用Vue.use来安装。比如在使用element-ui的时候,经常会这样写:importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI,{size:'small'});使用Vue.use后,可以在组件中直接使用element-ui,厉害了(呸,娘娘腔)接下来我们来实现一个简化版的element,看看如何安装。了解Vue.use的用法Vue.use是一个全局方法。它需要在调用newVue()启动应用程序之前完成。Vue.use的参数如下/***plugin:需要安装的插件如ElementUI*options:插件配置信息如{size:'small'}*/Vue.use(plugin,options)模拟element-ui的安装逻辑。想想看。使用Vue.use(ElementUI,{size:'small'})后,我们可以在组件中直接使用element-ui提供的哪些元素。element-ui组件不需要导入。可以直接使用v-loading命令在组件中通过this.$loadingOther...//ThisisAbuttoncomponentimportButtonfrom'@/components/button'//加载指令importloadingDirectivefrom'@/components/loading/directive'//加载方法importloadingMethodfrom'@/components/loading'exportdefault{/***Vue.use需要插件提供安装方法*@param{*}VueVue*@param{*}options插件配置信息*/install(Vue,options){console.log(options)//通过Vue.components注册组件Vue.components(Button.name,Button)//注册全局命令Vue.directive('loading',loadingDirective)//将loadingMethod挂载到Vue原型链上,方便调用Vue.prototype.$loading=loadingMethod}}通过以上代码,实现了我安装了一个丐帮版的element-ui插件。这时候我就可以在main.js中通过Vue.use来安装插件了。大家可能会有疑问,我为什么要用这种写法,我不用这种写法也能实现功能。小编认为这种写法有两个好处:标准??化,通过提供统一的开发模型,无论对于插件开发者还是用户,都有一个规范可循。插件缓存,Vue.use在安装插件时,会缓存该插件,即如果多次安装一个插件,实际上只有在第一次安装时才会生效.插件的应用场景添加一个全局方法或属性。添加全局资源:指令/过滤器/转换等。通过全局混合添加一些组件选项。通过将它们添加到Vue.prototype来添加Vue实例方法。在提供上述一种或多种特性的同时提供自己的API的库。例如,element-ui提升了Vue渲染性能。了解Object.freeze。当一个Vue实例被创建时,它会将数据对象中的所有属性添加到Vue的响应式系统中。当这些属性的值发生变化时,视图会“响应”,即用新值更新匹配。但是这个过程其实是比较消耗性能的,所以对于一些数据量很多但只是展示的界面,没必要在响应式系统中添加属性,这样可以提高渲染性能。具体怎么做,需要了解ClickonObject。冻结。在Vue官网中,有这么一段话:这里唯一的例外是使用Object.freeze(),它防止修改已有的属性,也意味着响应系统不能再_track_changes。这段话的意思是,如果我们的数据使用了Object.freeze,数据就可以和响应式系统分离了,那我们应该怎么做呢?比如下表,因为只是渲染数据,这时候我们可以使用Object。冻结以优化性能可能有同学会有疑惑,如果我的form里面的数据是滚动的,你这样写不行吗向tableData添加数据了吗?是的,确实没有办法添加数据,但是还是有解决办法的,比如exportdefault{data(){return{tableData:[]}},created(){setInterval(()=>{constdata=Array)如下(1000).fill(1).map((item,index)=>{//虽然不能冻结整个数组,但是可以冻结每一项数据returnObject.freeze({date:'2020-07-11',name:`子君${index}`,address:'大溪安'})})thisthis.tableData=this.tableData.concat(data)},2000)}}Object.freeze的合理使用可以节省很多渲染性能,尤其是IE浏览器,效果还是很明显的,抓紧去试试最后,如果你现在需要开发移动端项目,可以了解一下小编编译的一个开箱即用的框架vue-vant-base,或许对你有帮助。结论不要吹灭你的灵感和想象力;不要成为模型的奴隶。-文森特-梵高