1.修改完数据点击提交,数据变了,但是页面数据没有更新
原因:因为vue的检车机制在进行视图更新时无法监测数组中的某个对象的属性值的变化。(数据是引用数据类型,数据上没有get和set方法)
解决方法:
1.利用this.$set(this.obj,key,val)
解析:第一个参数是目标对象,第二个参数是要修改的数据下标,第三个参数是修改后的新值
2.也可以使用this.$nextTick()这个方法
解析:在下一次DOM更新循环结束之后,执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM,Vue在更新DOM时是异步执行的,
当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。
3.强制刷新 this.$forceUpdate()
2. vue引入本地图片的特殊情况
除了img标签的src和css的background:url(),其他情况想要引用本地项目的静态资源图片需要用require(‘…/…/assets/img/aaa.png’)的格式,而不能直接用’…/…/assets/img/aaa.png’格式引入。
如在某个组件内引用,如echart或G6引擎中的图标img或icon
————————————————
版权声明:本文为CSDN博主「接着奏乐接着舞。」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wanghaoyingand/article/details/118078360
icon: {
show: true,
cursor: 'pointer',
img: require('../../assets/img/aa.png'),
width: 75,
height: 91
},
3.props单向绑定
vue中的props是单向绑定的,父组件的属性变化时会传递给子组件,子组件内部不应改变props的值,否则控制台会给出警告。
但如果props的类型为数组或者对象时,在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用,vue不会检测到props发生改变。所以有的情况需要在子组件内部改变父组件的值,可以将属性定义为数组或者对象类型传入。
但官方不建议在子组件内改变父组件的值,因为这违反了vue中props单向绑定的思想。
4. 深拷贝数组或对象
对象或数组的简单赋值,修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。
对于对象,可以通过newObj = JSON.parse(JSON.stringfy(obj))实现。
对于数组,可以通过 newArr = […arr]或者newArr = arr.slice(0)来实现。