Vue开发中遇到的问题
1、选中二级路由高亮时保持它的父路由也保持高亮
给路由添加前置守卫beforeEach(to,from,next) ，在路由前置守卫中判断要去的路径信息，如果是二级路由，则给一级路由也加上高亮样式
直接在路由跳转标签中获取路径信息，判断是否需要添加高亮样式
2、使用 keep-alive 包裹动态组件时数据发生重复渲染
直接把<keep-alive></keep-alive>干掉或者使用exclude属性让他直接重新渲染
keep-alive 的三个参数：
include：包含的组件（只有匹配的组件可以被缓存）
exclude：排除的组件（只有匹配的组件不会被缓存）
max：缓存组件的最大值
keep-alive可以包裹<route-view></route-view>使用，也可以配合<Component :is="aaa"></Component>使用 （其中aaa为动态组件的名称）
3、vue3.x中废弃了filter过滤器
vue3.x中新增了setup()，数据、方法、生命周期都定义在了setup()中，响应式数据使用 ref 和 active 包裹
生命周期的名称也发生了变化，如：beforedestory --> onUnmounted , mounted --> onMounted 并且使用前都需要先从vue中导入
在视图中需要使用的数据和方法都需要在setup（）最后return出去才可以使用
4、vant组件库 自定义轮播图大小时 添加外边距 轮播图最后一页显示不完全
在导入vant库中的轮播图 自定义轮播图大小时，如果加上外边距，会把最后面的几个选项挤出范围导致显示不全
在使用tab标签页时设置宽度，然后向内压缩形成margin的效果，内容可以显示完全
5、vant组件库底部Tabber标签栏开启路由模式后，路由跳转会报错
问题描述： 使用vant的tabber标签栏的路由跳转时，路由可以跳转，但是会抛出一个错误
问题原因：vant与新版本路由不匹配
解决方法：降低路由版本vue-router@3.0.0
6、移动端使用插件进行rem适配
插件：postcss-pxtorem、lib-flexible
// yarn add amfe-flexible
// yarn add postcss-pxtorem@5.1.1
// 在main.js中 导入import 'amfe-flexible'
// 创建postcss.config.js文件，配置
module.exports={
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}
7、数据已经拿到但是页面渲染不出来，在下一次嘀嗒也没有作用、vue不支持 ?. 的写法
因为vue不支持 ?. 的写法
所以如果想要拿到数据并成功渲染需要添加一层判断 && 表示数据得到后渲染
obj.arr[0] && obj.arr[0].name
8、props父子组件传值，当接收的数据类型是对象或者数组时 default需要设置为 ()=> {} 、()=>[]的形式
props: {
tableConfig: {
type: Array,
default: () => [
{ label: '日期', prop: 'date' },
{ label: '姓名', prop: 'name' },
{ label: '地址', prop: 'address' }
]
}
}
9、@后添加路径
// 项目根目录创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
10、单行、多行文本溢出省略号代替
/* 单行文本溢出隐藏 省略号代替 */
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 多行文本溢出隐藏 省略号代替*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/*设置对其模式*/
-webkit-line-clamp: 2;
/*设置多行的行数*/
11、通过cdn引入减小打包体积，配置vue.config.js
module.exports = {
// 发布模式
chainWebpack: config => {
config.when(process.env.NODE_ENV === 'production', config => {
// 通过CDN加载
config.set('externals', {
vue: 'Vue',
axios: 'axios',
echarts: 'echarts',
"element-ui": 'ElementUI',
"vue-quil-editor": 'VueQuillEditor'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
}
}
// 利用webpack的externals，把第三方库的js文件从打包文件里去掉
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui':'ElementUI'
}
12、element-ui中的el-scrollbar
// 外层用一个标签包裹并设置宽高,给el-scrollbar标签必须设置height:100%
// 内容区
// 设置样式时必须添加穿透
.box {
height: 300px;
width: 200px;
}
::v-deep .el-scrollbar__view {
padding-top: 60px;
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
13、vue初始化页面闪动问题
使用vue开发时，在vue初始化之前，由于div是不归vue管的
所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是还是有必要让解决这个问题的。
首先：在css里加上以下代码：
[v-cloak] { display: none;}
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
React开发中遇到的问题
1、移动端使用插件vw适配
插件： postcss-px-to-viewport
在react项目中想要配置vw，先将webpack配置暴露出来yarn eject
git提交保存版本
在config的webpack.congfig.js中配置
require('postcss-px-to-viewport')({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 667, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
2、react数据拿到但是页面渲染不出来
为了节约性能，在类组件的render函数里 return模板之前先根据数据进行一层判断，如果想要的数据还没有拿到，直接return null;
在函数组件中 return之前加上同样的判断，如果数据还没有拿到就return null;
3、react路由6.x和5.x
路由6.x不再有withRouter，于是在类组件中通过this.props无法拿到路由信息，这时我们便需要封装HOC高阶组件后在类组件中使用
路由6.x在定义路由信息的时候，挂载需要使用标签内的element={}
路由5.x则可以直接在闭合标签内部直接使用 ，或者是用标签中的component={}
4、react的钩子hooks
在类组件中没有hook，hook只能在函数组件中使用，但是我们可以通过封装HOC（高阶组件）使类组件中拥有函数组件的hook功能，其中最明显的用处是拿到路由信息
5、类组件中想要在this.props中获取路由信息，封装高阶组件
// 创建withRouter.jsx文件，配置
// 引入需要用到的模块
import { useParams, useLocation, useNavigate, useSearchParams } from "react-router-dom";
// withRouter本质上就是一个组件，它的特点：它的参数是一个组件，它的返回值是一个新组件。
// 我们称这样的组件是HOC(High Order Component高阶组件)，高阶组件本质上就是一个闭包的应用
export default function withRouter(Component) {
// 相当于给Student组件添加各种props属性，还添加三个重要的属性params,location,navigate
return (props) => (
{...props}
searchParams={useSearchParams()} // 通过里面的get方法可以获取路径里传递的参数，不需要自己切割
params={useParams()} // 获取参数
location={useLocation()} // 查看路径信息
navigate={useNavigate()} // 允许跳转其他页面
/>
);
}
6、react 函数组件修改数据方法 数据刷新数据继续请求变得更多
建议使用 ：
a、箭头函数 setState((pre)=>([...pre],...res.data)) // 用() 包裹，不是{}
b、扩展重新赋值 setState([...state, ...res.data])
7、redux
import { createStore } from 'redux'
let store = createStore((state, action) => {
switch (action.type) {
case "setNational": {
return {
...state,
national: action.national
}
break
}
default: {
return {
national: '全国'
}
}
}
})
export default store;
// 获取数据
store.getState().national
// 修改
this.$store.dispatch({
type: 'setNational',
national: name
})
小程序遇到的问题
轮播图响应式布局
轮播图下放置的图片 <image src="" / >标签上 添加mode="widthFix"高度根据宽度自适应
<image src="" mode="widthFix" />
样式中设置图片宽度100%
swiper image {
width: 100%;
}
但是由于swiper自身有高度，所以换更大屏幕时，图片仍然显示不完全，给swiper根据图片设置高度
// 设计稿iphone6,假设图片高度150px，则swiper设置高度300rpx
swiper {
height: 300rpx;
}
懒加载获取到数据总数后 判断列表长度===total时return但是没有结束
需要把请求过来的数据里的数据总数进行类型转换 Number(res.total)才能进入判断
粘性
cnpm i @miniprogram-component-plus/sticky
使用mp-slideview组件时，添加的提示文字消失不见
// 例如： 左滑可以删除功能，但是删除两个字显示不出来
标签中间的内容有图片的时候如果图片模式 mode=“widthFix” 会导致左滑显示的删除按钮上内容不显示
可以设置 mode="aspectFit" 自己定义图片大小
封装请求
// 封装文件夹util/request.js文件
// isHeader判断是否需要获取响应头中的数据
function request(obj, isHeader) {
// 显示loading
return new Promise((resolve, reject) => {
wx.showLoading({
title: '正在加载中',
})
wx.request({
...obj,
url: 'http://localhost:5000' + obj.url,
success: (res) => {
// console.log(res.header["X-Total-Count"]);
if (isHeader) {
resolve({
list: res.data,
total: res.header["X-Total-Count"]
})
} else {
resolve(res.data);
}
},
fail: (err) => {
reject(err)
},
complete: () => {
// 隐藏loading
wx.hideLoading({
success: (res) => { },
})
}
})
})
}
export default request;
封装权限管理
// 调用时传入一个回调函数
function CheckAuth(callback) {
if (wx.getStorageSync('tel')) {
// 直接执行回调函数
callback()
} else {
// 是否存在token
if (wx.getStorageSync('token')) {
// 跳转绑定手机页面
wx.navigateTo({
url: '/pages/telform/telform',
})
} else {
// 跳转绑定微信页面
wx.navigateTo({
url: '/pages/auth/auth',
})
}
}
}
export default CheckAuth;
// 在生命周期onShow中调用例子，传入一个回调函数作为参数
CheckAuth(() => {
let { nickName } = wx.getStorageSync('token')
let tel = wx.getStorageSync('tel')
request({
url: url
}).then(res => {
console.log(res)
this.setData({
list: res
})
})
})
