You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.5 KiB
56 lines
1.5 KiB
2 years ago
|
# Fix.set和Fix.del是为了解决什么问题
|
||
|
|
|
||
|
|
为了知道Fix.set和Fix.del是做什么的,首先要清楚Fix有哪些场景watch不到.
|
||
|
|
|
||
|
|
熟悉Vue的同学肯定知道,Vue2.0版本中的`$set`和`$delete`,其实原理是类似的
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
state: function () {
|
||
|
|
return {
|
||
|
|
obj: {
|
||
|
|
a: 1,
|
||
|
|
},
|
||
|
|
arr: [0, 1],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
"obj.b": function () {
|
||
|
|
console.log(this.model.obj);
|
||
|
|
},
|
||
|
|
"arr.2": function () {
|
||
|
|
console.log(this.model.obj);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
actions: {
|
||
|
|
changeArr: function () {
|
||
|
|
// 这两种形式都不能触发watch
|
||
|
|
this.model.obj.b = 2;
|
||
|
|
this.model.arr[2] = 2;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
```
|
||
|
|
`Fix.set`在修改对象属性后会手动触发一次通知,因此原本无法watch到变更的场景又可以了.
|
||
|
|
```javascript
|
||
|
|
Fix.set(this.model.obj, "b", 2);
|
||
|
|
Fix.set(this.model.arr, 2, 2);
|
||
|
|
```
|
||
|
|
同样的,`Fix.del`可以正常触发对删除属性的watch
|
||
|
|
```javascript
|
||
|
|
watch: {
|
||
|
|
"obj.a": function () {
|
||
|
|
console.log(this.model.obj);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
actions: {
|
||
|
|
changeArr: function () {
|
||
|
|
// delete this.model.obj.a;
|
||
|
|
Fix.del(this.model.obj, "a");
|
||
|
|
},
|
||
|
|
},
|
||
|
|
```
|
||
|
|
|
||
|
|
很多数情况下我们不借助`Fix.set`和`Fix.delete`也能实现功能,例如后续讲到的[11、Fix中对数组、对象的操作技巧](./11.Fix中对数组、对象的操作技巧.md)也可以解决我们的一些问题
|