8000 fix: assign "wrapper" to a normal property cause a "reactivity" glitch · Kingwl/vue-function-api@c4d6256 · GitHub
[go: up one dir, main page]
Skip to content

Commit c4d6256

Browse files
liximomoliximomo
committed
fix: assign "wrapper" to a normal property cause a "reactivity" glitch
1 parent 9fdfe2d commit c4d6256

File tree

2 files changed

+121
-28
lines changed

2 files changed

+121
-28
lines changed

‎src/reactivity/observable.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ function defineAccessControl(target: AnyObject, key: any) {
6060
if (isWrapper(newVal)) {
6161
isValueWrapper = true;
6262
rawVal = newVal;
63+
// trigger observer
64+
setter.call(target, newVal);
6365
return;
6466
}
6567

‎test/functions/sta 8000 te.spec.js

Lines changed: 119 additions & 28 deletions
A3E2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const Vue = require('vue/dist/vue.common.js');
2-
const { plugin, state, value } = require('../../src');
2+
const { plugin, state, value, watch } = require('../../src');
33

44
Vue.use(plugin);
55

@@ -43,45 +43,136 @@ describe('Hooks state', () => {
4343
expect(app.$el.querySelector('span').textContent).toBe('1');
4444
}).then(done);
4545
});
46+
});
47+
48+
describe('reactivity/value', () => {
49+
it('should hold a value', () => {
50+
const a = value(1);
51+
expect(a.value).toBe(1);
52+
a.value = 2;
53+
expect(a.value).toBe(2);
54+
});
4655

47-
it('should be unwrapping(nested property inside a reactive object)', () => {
48-
const count = value(0);
49-
const count1 = value(0);
56+
it('should be reactive', () => {
57+
const a = value(1);
58+
let dummy;
59+
watch(a, () => {
60+
dummy = a.value;
61+
});
62+
expect(dummy).toBe(1);
63+
a.value = 2;
64+
expect(dummy).toBe(2);
65+
});
66+
67+
it('should make nested properties reactive', () => {
68+
const a = value({
69+
count: 1,
70+
});
71+
let dummy;
72+
watch(
73+
a,
74+
() => {
75+
dummy = a.value.count;
76+
},
77+
{ deep: true }
78+
);
79+
expect(dummy).toBe(1);
80+
a.value.count = 2;
81+
expect(dummy).toBe(2);
82+
});
83+
84+
it('should work like a normal property when nested in an observable(1)', () => {
85+
const a = value(1);
86+
const obj = state({
87+
a,
88+
b: {
89+
c: a,
90+
d: [a],
91+
},
92+
});
93+
let dummy1;
94+
let dummy2;
95+
let dummy3;
96+
watch(
97+
() => obj,
98+
() => {
99+
dummy1 = obj.a;
100+
dummy2 = obj.b.c;
101+
dummy3 = obj.b.d[0];
102+
},
103+
{ deep: true }
104+
);
105+
expect(dummy1).toBe(1);
106+
expect(dummy2).toBe(1);
107+
expect(dummy3).toBe(1);
108+
a.value++;
109+
expect(dummy1).toBe(2);
110+
expect(dummy2).toBe(2);
111+
expect(dummy3).toBe(2);
112+
obj.a++;
113+
expect(dummy1).toBe(3);
114+
expect(dummy2).toBe(3);
115+
expect(dummy3).toBe(3);
116+
});
117+
118+
it('should work like a normal property when nested in an observable(2)', () => {
119+
const count = value(1);
120+
const count1 = value(1);
50121
const obj = state({
51-
count,
52-
a: {
53-
b: count1,
54-
c: 0,
122+
a: count,
123+
b: {
124+
c: 1,
55125
d: [count1],
56126
},
57127
});
58128

59-
expect(obj.count).toBe(0);
60-
expect(obj.a.b).toBe(0);
61-
expect(obj.a.c).toBe(0);
62-
expect(obj.a.d[0]).toBe(0);
129+
// let dummy1;
130+
let dummy2;
131+
// let dummy3;
132+
watch(
133+
() => obj,
134+
() => {
135+
dummy1 = obj.a;
136+
dummy2 = obj.b.c;
137+
dummy3 = obj.b.d[0];
138+
},
139+
{ deep: true }
140+
);
141+
expect(dummy1).toBe(1);
142+
expect(dummy2).toBe(1);
143+
expect(dummy3).toBe(1);
144+
expect(obj.a).toBe(1);
145+
expect(obj.b.c).toBe(1);
146+
expect(obj.b.d[0]).toBe(1);
63147

64-
obj.count++;
65-
expect(obj.count).toBe(1);
66-
expect(count.value).toBe(1);
67-
expect(count1.value).toBe(0);
148+
obj.a++;
149+
expect(dummy1).toBe(2);
150+
expect(dummy2).toBe(1);
151+
expect(dummy3).toBe(1);
152+
expect(obj.a).toBe(2);
153+
expect(count.value).toBe(2);
154+
expect(count1.value).toBe(1);
68155

69156
count.value++;
70157
count1.value++;
71-
obj.a.b++;
72-
obj.a.c = 3;
73-
expect(obj.count).toBe(2);
74-
expect(count1.value).toBe(2);
75-
expect(obj.a.b).toBe(2);
76-
expect(obj.a.c).toBe(3);
77-
expect(obj.a.d[0]).toBe(2);
158+
obj.b.d[0]++;
159+
obj.b.c = 3;
160+
expect(dummy1).toBe(3);
161+
expect(dummy2).toBe(3);
162+
expect(dummy3).toBe(3);
163+
expect(obj.a).toBe(3);
164+
expect(count1.value).toBe(3);
165+
expect(obj.b.c).toBe(3);
166+
expect(obj.b.d[0]).toBe(3);
78167

79168
const wrapperC = value(1);
80-
obj.a.c = wrapperC;
81-
expect(obj.a.c).toBe(1);
169+
obj.b.c = wrapperC;
170+
expect(dummy2).toBe(1);
171+
expect(obj.b.c).toBe(1);
82172

83-
wrapperC.value++;
84-
obj.a.c++;
85-
expect(obj.a.c).toBe(3);
173+
obj.b.c++;
174+
expect(dummy2).toBe(2);
175+
expect(wrapperC.value).toBe(2);
176+
expect(obj.b.c).toBe(2);
86177
});
87178
});

0 commit comments

Comments
 (0)
0