vue遇到的坑

<el-progress type=“circle” :percentage=“0" @click=“stopProgress”>

解决方法:使用.native修饰符

<el-progress type=“circle” :percentage=“0" @click.native=“stopProgress”>

4.手动操控自定义组件

场景一 :一些自定义组件，需要去获取组件对象进行一些其他的Dom操作

解决方法 :使用ref属性暴露组件获取句柄

5.深度作用选择器

场景一 : scoped的样式，希望影响到子组件的默认样式

在样式中设置完scoped在浏览器解析为如下图这样，a是个div，a div里面包含一个组件里面解析完了div的样式名字为b，想在父组件影响到子组件的默认样式。解决方法:

//有些像Sass之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/操作符取而代之- - - -这是一个>>>的别名，同样可以正常工作。

.a /deep/ .b { /* … */ }

6.Vue数组/对象更新视图不更新

场景一 :很多时候我们习惯于这样操作数组和对象

data() {

return {

arr: [1,2,3],

obj:{

a: 1,

b: 2

}

};

},

// 数组更新视图不更新

this.arr[0] = ‘OBKoro1’;

this.arr.length = 1;

console.log(arr);// [‘OBKoro1’];

// 数据更新，对象视图不更新

this.obj.c = ‘OBKoro1’;

delete this.obj.a;

console.log(obj); // {b:2,c:‘OBKoro1’}

解决方法 ：

this. $set(你要改变的数组/对象，你要改变的位置/key,你要改成什么value)

数组原生方法触发视图更新（ vue官网可查）:

整体替换数组/对象

7.Vue Filters过滤器的使用

场景一 :常见的数据文本的格式化

{{ message | DateFormat }}

//展示正确时间

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里面监测对象里面对应的值是监测不到的，可以用如下方法。

选项: deep

在选项参数中指定deep:true,可以监听对象中子属性的变化。

选项: immediate

在选项参数中指定immediate:true,将立即以表达式的当前值触发回调，也就是默认触发一次。

watch: {

obj: {

handler(val, oldVal) {

console.log(‘属性变化触发这个回调’,val, oldVal);

},

deep: true // 监测这个对象中每一个属性的变化

},

step: { // 属性 //watch

handler(val, oldVal) {
console.log(“默认触发一次”, val, oldVal);
},
immediate: true // 默认触发一次
}
}