边框去重、ref、`this.$set();`、深浅拷贝、let var、重置表单校验结果、this.$nextTick

50 阅读1分钟

一、边框去重

1、margin负值

二、ref

在div中,ref="tableBox",将tableBox在vue实例中注册为一个引用,可以在生命周期钩子函数(created、mounted等)使用this.$ref.tableBox操作

三、日期选择器回显后无法改变值

this.$set();

this.$set(this.formData, 'timeRange', []);

四、深浅拷贝

  • 开发中遇到过一个问题(出现过两次),总结为:一个值的修改会影响另一个值或者无法修改值。
  1. 情形一:新增数据填写表单时,一个值的修改影响另一个值
  2. 情形二:在最开始时将请求到的数据赋给了tableData和tableDataCopy,tableData中某一属性修改,tableDataCopy也被影响。
this.tableData = res.data;
this.tableDataCopy = res.data;

找出是深浅拷贝的问题。 浅拷贝后的数据如果修改,会影响原始数据。(浅拷贝只复制指向某个对象的指针,而不复制对象本身)

  • 解决办法:使用深拷贝,将数据转换成字符串形式,再转回对象。
JSON.parse(JSON.stringify(object)); // 先将数据转换成字符串形式,再转回对象

五、let var

  • var能重复声明,let不能
  • va在函数内声明变量只能作用于函数内,不在函数内使用则是全局作用,后声明的会覆盖前一个声明。而let在块级作用域内有效。

六、resetFields和clearValidate

image.png

  • 使用方法:
this.$refs.form.resetFields();

七、this.$nextTick

  • 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM.  也就是说,当dom元素发生改变,重新渲染dom树后,再执行vue.$nextTick()里面的内容。
this.$nextTick(() => {
    
})