一、vue
1、vue路由中keep-alive不缓存在实际上，他并没有删除DOM，只是 隐藏了DOM，所以在有些操作的时候，会影响页面的实现逻辑；
2、watch无法监听props传值的问题；
3、数据绑定中内层数据改变页面视图不产生变化；
4、vue不适合混合开发，他对混合开发十分不友好，优点 简单；
5、在vue中ios回传给一个true的时候，他会undefind；
**注：
二、vantUI
1、使用vantUI的Tab 标签页 在切换页面的时候，保持高度的问题； 同时他的样式风格，下横杠在ios上有位置不准确的问题；
2、list下拉上拉在初次加载的时候，具有两次请求的问题，你需要else一下，代码如下：
javascript
<!--
* @Author:
* @Date: 2020-12-21 13:55:21
* @LastEditors:
* @LastEditTime: 2021-01-12 16:36:51
* @FilePath:
* @Description:
参考的博客：https://www.cnblogs.com/hubufen/p/11677146.html
在外面 要修改这个 里面的属性，或者方法
-->
<template>
<div>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="disabled">
<!-- 刷新 里面 只有一个div，给它 这个 是为了 让其实现 点击没有内容的 时候 也可以下拉更新 -->
<van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad" style="min-height: 100vh;" :immediate-check="false">
<!-- 这个 里面放置 你的列表 -->
<slot></slot>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
export default {
props:{
disabled:{
type:Boolean,
default() {
return false
}
},
finishedText:{
type:String,
default() {
return "没有更多了"
}
}
},
data() {
return {
refreshing: false, //下拉刷新： v-model 是否处于加载中状态（加载完成后 把它重置为false，也就是 下拉的时候 它为true）
loading: false, //v-model 是否处于加载状态，加载过程中不触发load事件
finished: false, // finished 是否已加载完成，加载完成后不再触发load事件（也就是 所有数据已经加载的时候，把他重置为true）
};
},
methods: {
/**
* 下拉刷新
*/
onRefresh() {
// console.log('我是下拉刷新');
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.onLoad();
},
/**
* @description: 上拉加载更多
*/
onLoad() {
if (this.refreshing) {//下拉的时候 他是true
// this.list = [];
//1、向外 抛出一个函数，清空List(也就是 下拉刷新)；
this.$emit("emptyList");
//1-1、 这个 要在外面 进行refreshing 重置为false
// this.refreshing = false;
}else {
this.$emit("requestList");
}
//2、请求数据(当:immediate-check="true的时候，在组件 初始化的时候，就会去 取的数据")
//this.$emit("requestList");
//3、请求完数据 把loading重置为false
// this.loading = false;
// 4、当下拉到最后一页的时候
// this.finished = true;
}
},
}
</script>
<style scoped>
</style>3、并且vantUI布局的样式复杂难以修改；
4、vantUI日期组件的骚操作(已解决)
javascript
<template>
<div class="time_box">
<div class="start" @click="stateShow = true">
<span>{{ stateDate ? stateDate : "请选择起始日期" }} </span> <img src="@/assets/images/bottom.png" alt="">
</div>
<van-calendar v-model="stateShow" @confirm="stateConfirm" :min-date="stateMinDate" :max-date="stateMaxDate" :default-date="defaultDate" ref="startComponent" @open="startOpen" />
<div class="end" @click="endShow = true">
<span>{{ endDate ? endDate : "请选择截止日期"}}</span> <img src="@/assets/images/bottom.png" alt="">
</div>
<van-calendar v-model="endShow" @confirm="endConfirm" :min-date="endMinDate" :max-date="endMaxDate" ref="endComponent" @open="endOpen" :default-date="defaultEndDate" />
</div>
</template>
<script>
export default {
data() {
return {
stateDate: "",
stateShow: false,
stateMinDate: new Date(2010, 0, 1),
stateMaxDate: new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1),
defaultDate: new Date(),//默认时间(取得当前时间的前七天)
defaultEndDate: new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1), //给当前日期的默认时间（也就是结束的默认时间）
endDate: "",
endShow: false,
endMinDate: new Date(2010, 0, 1),
endMaxDate: new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
}
},
created() {
this.initial();
},
methods: {
initial() {
this.defaultDate = new Date(new Date(new Date(new Date().toLocaleDateString()).getTime()) - 86400 * 7 * 1000);
this.endMinDate = this.defaultDate;//这个是 规定了结束时间的最大值
this.stateDate = this.formatDate(this.defaultDate);
this.endDate = this.formatDate(new Date());
this.$emit("state", this.defaultDate);
this.$emit("end", this.defaultEndDate);
},
/**
* @description: 时间格式转化
* @param {type} 中国标准时间
* @return {type} 年 - 月 - 日
*/
formatDate(date) {
return `${date.getFullYear()} - ${date.getMonth() + 1} - ${date.getDate()}`;
},
/**
* =在这块 对外暴露，暴露出去的是中国标准时间
*/
stateConfirm(date) {
this.stateShow = false;
this.stateDate = this.formatDate(date);
this.endMinDate = date;
this.defaultDate = date;
this.$emit("state", date);
},
endConfirm(date) {
this.endShow = false;
this.endDate = this.formatDate(date);
this.stateMaxDate = date;
this.defaultEndDate = date;
this.$emit("end", date);
},
startOpen() {
this.$refs.startComponent.reset();
},
endOpen() {
this.$refs.endComponent.reset();
},
/**
* @description: 重置的 方法
*/
reset() {
this.initial();
this.$refs.startComponent.reset();
this.$refs.endComponent.reset();
}
}
}
</script>
<style scoped>
.time_box {
display: flex;
justify-content: space-between;
}
.start,
.end {
font-size: 28px;
font-weight: 400;
color: #999999;
background: #f6f6f6;
border: 1px solid #f5f5f5;
border-radius: 8px;
padding: 25px 20px;
display: flex;
justify-content: space-between;
align-items: center;
width: 42%;
}
img {
width: 21px;
height: 12px;
}
/* dui UI组件 样式的修改 */
.time_box >>> .van-calendar__selected-day {
width: 60px;
height: 60px;
color: #fff;
background-color: #fa5000;
border-radius: 50%;
}
.time_box >>> .van-button--danger {
background: linear-gradient(135deg, #ff6a23, #f84128);
box-shadow: 0px 4px 9px 1px rgba(248, 65, 40, 0.3);
border-radius: 36px;
border: 0;
}
.time_box >>> .van-calendar__header-title {
color: black;
}
</style>四、vue中keep-alive的使用
1、给当前页面设置了keep-alive，他再次进入的时候，created、moutend等不执行；
2、但是再次进入的时候，会执行activated,但是执行created的时候，不会执行它；
3、离开页面的时候，会执行deactivated;