vue使用技巧及vue项目中遇到的问题

2020-06-14 06:29:19易采站长站整理

方法一:直接使用最简单也是最有效的方法,深拷贝对象或者数组,视图会进行更新,不过会有一个缺点,深拷贝后的数组或者对象不是原来的那个数组或者对象,是你现在改变了之后的值。

上代码:

你的对象或者数组=JSON.parse(JSON.stringify(你的对象或者数组))
先进行转字符串,再转回对象,这个就进行了一个拷贝的过程,会触发视图的改变,同时也进行了一个数组的替换,有利有弊。

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


this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

这个是vue专门为改变不了数组设定的一个方法,使用也很简单(如果还是不懂请参考vue文档)

7,深度watch与watch立即触发回调

watch很多人都在用,但是这watch中的这两个选项deep、immediate,或许不是很多人都知道,我猜。

选项: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 // 默认触发一次
},
},

总结

以上所述是小编给大家介绍的vue使用技巧及vue项目中遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!