vue进阶
# 前言
vue 进阶更多的知识点是在日常开发之上扩展的知识点,可以对vuejs更深一步的了解,避免在vue项目开发的过程中踩坑。
# 1.$set 重新 挟持 - 解决数组 对象赋值
1问:通过索引赋值 更改了数组的值,但是页面不更新的原因?如何解决?
this.list[0] = 'xxxx'; //页面不渲染
答:
因为vue 使用了 Object.defineProperty挟持对象数据的改变,重写observe方法,对于数组的部分操作监听不到数据的变化。
变更方法操作的数组都可以监听到数据改变: push pop shift unshift splice sort reverse 【可以简单理解为操作原数组的方法】
非变更方法的操作都监听不到数据改变: filter concat silce ;索引赋值 ;更改数组长度等等。
//解决方案: $set 重新挟持
this.$set(this.list,0,'xxxxx') //页面更新
2
2问:给已经存在data中的对象 新增属性并赋值,页面不会更新的原因?如何解决?
data(){
return { user:{name:"comelong"}}
}
methods:{
changeData(){
this.user.age = 20; //页面不更新
}
}
2
3
4
5
6
7
8
答:
因为vue 使用了 Object.defineProperty 挟持对象数据的改变,挟持的是定义时已经存在的对象属性,新增的属性 vue的defineProperty方法并没有挟持上去。
//解决方案: $set 重新挟持
changeData(){
this.$set(this.user,'age',20); //页面更新 注意:属性名必须是字符串
}
2
3
4
# 2.data定义数据
问:data 为什么是一个函数返回一个对象,而不直接写一个对象?
data(){
return {
name:"comelong"
}
}
2
3
4
5
答:
每个组件都需要有自己独立的数据,所有组件的数据都是当前组件被创建时挂载到 VueComponent 实例上 。
如果直接写一个对象的弊端: 对象是引用数据类型,直接创建一个对象会导致 所有的组件 共享同一个地址空间的数据。
如果写一个函数 返回一个数据:确保每次返回的对象引用地址都是独立的,不会影响其他组件。
# 3.$nextTick 异步更新
问:$nextTick 是什么?什么时候会用到?
答:
$nextTick 本质上就是一个异步函数Promise 状态机, 等待vue的实体dom加载完成之后触发$nextTick 的回调函数
$nextTick 可以实现的效果 setTimeout实例
使用场景:
- 在create生命周期中获取dom
- dom更新之后获取dom 都需要用异步更新获取dom的新数据
- 在create生命周期中获取dom
<div class="box"></box>
data() {
return {
msg: "我是老的提示信息",
};
},
created() {
console.log(document.querySelector(".box")); //null
this.$nextTick(() => {
console.log(document.querySelector(".box")); //获取到dom
});
}
2
3
4
5
6
7
8
9
10
11
12
- dom更新之后获取dom 都需要用异步更新获取dom的新数据
changeData() {
this.msg = "我是新的提示信息";
console.log(document.querySelector(".box").innerHTML); // 我是老的提示信息
this.$nextTick(() => {
console.log(document.querySelector(".box").innerHTML); //我是新的提示信息
});
},
2
3
4
5
6
7
4.$ref $el