vue项目问题总结

最新推荐文章于 2022-02-08 18:24:45 发布

newbie (⊙o⊙)

最新推荐文章于 2022-02-08 18:24:45 发布

阅读量108

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Jonn1124/article/details/119251914

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文分享了前端开发中的几个关键优化点，包括组件切换缓存、数据筛选与计算属性的使用、跨平台样式适配以及元素操作。通过避免元素宽高硬编码，利用vuecomputed缓存数据，解决iOS和Android的flex布局兼容性问题，以及针对不同平台进行样式调整，提升用户体验。同时，还介绍了如何通过ref获取元素和在模板中使用方法处理数据。

摘要由CSDN通过智能技术生成

样式问题: 1。布局时元素的宽高不要写死，使用padding，margin 让其自适应

一，组件切换缓存问题（优化方向），下有下拉框的情况下，用户切换，选择下拉值后，切换回去，在数据没有变的情况下，不应该重新发起请求。
可以利用vue computed 计算属性处理数据，将数据缓存下来。
数据筛选也可以利用计算属性筛选好，在数据需要做判断在做v-for 渲染时，计算属性可以起到很好的筛选属性，可以利用js 的 filter的筛选方法。

二, 在ios 和 Android 下 flex 的flex-flow:column 存在兼容性问题，应使用flex-direction: column

三，设置平台信息
安卓和ios 可能需要存在一些小问题，根据机型，做不同处理
如：安卓和ios 下同一个元素，需要根据系统类型的不同写不同的样式

// 设置平台信息
<template>
	 <p :class="isAndroid ? 'triangle_android' : ''">{{item.SN}}</p>
</template>

const ua = window.navigator.userAgent.toLowerCase()
const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('linux') > -1


data(){
	return{
		isAndroid: isAndroid(),
	}
}

四，可以通过ref 的形式拿到某个元素

<p ref="test"></p>

// 拿到dom元素
this.$refs.test

五，在template 的双大括号语法中也可以用方法对数据做处理在展示

<p class="pull_time">{{currentTab.showMonth}}月 第{{toUpNumber(currentTab.showWeek)}}周</p>
 // 数字匹配，数字1,2,3 转 一 ，二，三
      toUpNumber(num){
        switch(parseInt(num)){
           case  1:
              return '一'
              break
           case  2:
             return '二'
             break
           case  3:
             return '三'
             break
          case  4:
             return '四'
             break
          case  5:
             return '五'
             break
        }
    },