1.setTimeout/ setInterval
this只想改变,无法用this访问vue实例
mouted(){
setTimeout(function(){
console.log(this)
},1000)
}
为解决这个问题,使用箭头函数或者先缓存this
mouted(){
setTimeout(()=>{
console.log(this)
},1000)
}
或者:
let self=this;
mouted(){
setTimeout(()=>{
console.log(self)
},1000)
}
使用setInterval的时候需要销毁,不然有可能造成程序崩溃
mouted(){
this.timer=setInterval(()=>{
console.log(self)
},1000)
},
beforeDestroy(){
clearInterval(this.timer)
}
2.Vue路由拦截浏览器后退实现草稿保存类似需求
为了防止用户突然离开,没有保存已输入的信息。
mounted(){
beforeRouteLeave (to, from, next) {
if(用户已经输入信息){
}else{
next(true);
}
}
},
3.自定义组件添加click等事件不生效
一些自定义组件,需要额外添加一些事件来实现一些特定需求
<template>
<el-progress type="circle" :percentage=“0" @click=“stopProgress”></elprogress>
</template>
<script>
export default {
methods:{
stopProgress() {
console.log('停止')
}
}
}
</script>
解决方法:使用.native修饰符
<template>
<el-progress type="circle" :percentage=“0" @click.native=“stopProgress”></el-progress>
</template>
<script>
export default {
methods:{
stopProgress() {
console.log('停止')
}
}
}
</script>复制代码
4.手动操控自定义组件
一些自定义组件,需要去获取组件对象进行一些其他的Dom操作
解决方法 :使用ref属性暴露组件获取句柄
<template>
<el-progress type="circle" :percentage="O" ref="progress"></el-progress>
</template>
<script>
this.$refs.progress
this.$refs.progress.$el
</script>
5.深度作用选择器
scoped的样式,希望影响到子组件的默认样式
<style scoped>
.a >>> .b { }
</style>
<style scoped lang=“scss”>
.a /deep/ .b { }
</style>复制代码
6.Vue数组/对象更新视图不更新
data() {
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
this.arr[0] = 'OBKoro1';
console.log(arr);
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj);
解决方法 :
this. $set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)
数组原生方法触发视图更新( vue官网可查):
整体替换数组/对象
data() {
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
this.$set(this.arr,0,'OBKoro1')
this.$set(this.obj,a,'OBKoro1')
7.Vue Filters过滤器的使用
常见的数据文本的格式化
<!-- 在双花括号中 -->
<div>{{ message | DateFormat }}</div>
<!-- 在'v-bind'中 -->
<div v-bind:id="rawId | formatId"></div>
Demo:一个日期过滤器返回yyyy- MM-ddhh:mm:ss的样式
引入一个提前写好日期格式化的js
import dayjs from ‘dayjs';
export default {
data() {
return {
message:18324798324789
}
},
filters: {
DateFormat(value) {
return dayjs(value).format(“YYYY-MM-DD HH:mm:ss")
}
}
}
8.Vue深度watch与watch立即触发回调
在watch里面监测对象里面对应的值是监测不到的,可以用如下方法。
watch: {
obj: {
handler(val, oldVal) {
console.log('属性变化触发这个回调',val, oldVal);
},
deep: true
},
step: {
handler(val, oldVal) {
console.log("默认触发一次", val, oldVal);
},
immediate: true
}
}