Vue项目中的一些坑

注意:
你将看到是前方一片高能,对你的在练习vue项目中,或者搭建vue项目避免踩到的一些坑有一定的帮助,没帮助也不能怪我;谢谢

视图刷新：
Vue视图刷新的异步;不管你改变的是基本数据类型,还是引用类型

data(){
return(){
data:”hello”
}
}
show(){
console.log(this.data)
this.data = “word”
console.log(this.data)
}

因为视图刷新的异步操作原因,上面的consloe都只会打印hello

如何解决:

1，通过this.$nextTick(function(){

        需要改变的数据
    })

1. 什么是nextTick呢?
   官方是这么阐述的。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

其实真正的理解是这样的:

当某条执行代码是异步的时候,而你在编写代码过程中,想在执行异步操作之后做某一些操作,在js执行队列中,顺序是从上到下的,其中如果有异步操作也会直接越过执行下一个操作,但是我们有时候并不想这样的事发生,所以就有了几种想法啊;第一种是倒计时函数setTimeout(fn, 0),但是往往会影响代码的性能;第二种是microtask;但是microtask有一个优先级的问题,所以总不能使用microtask,第三中方法就是nextTick(),这个方法往往是配合着dom更新而执行的;当数据被修改后使用这个方法会回调获取更新后的dom再render出来

它实现了把某个操作放在异步操作的队列后面。

2，数组和对象数据的修改的注意方法

1. 导致视图不会刷新的操作

data(){
return{
arr:[1,2,3,4]
}
}
show(){
this.arr[1]=2
}

这样的操作能够改变的数组结构但不会导致视图刷新;因为无法触发vue的监听方法;
vue的对数组和对象的视图刷新很苛刻,因为Vue 不能检测到对象属性的添加或删除。

#对象增删查改的视图刷新解决

1. 数组修改数据使用push(),pop(),unshift(),shift(),splice(),sort(),reverse()使用这种直接改变原数组的方法,从而触发视图监听事件
2. 对象则使用Object.JSON.parse(JSON.stringify(Object)）去触发视图监听事件
3. 对象还可以使用this.$set(object,key,val)

this.$set(object,key,val)使用