forked from ariesate/engine
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvnodeComputed.js
More file actions
80 lines (71 loc) · 1.34 KB
/
vnodeComputed.js
File metadata and controls
80 lines (71 loc) · 1.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/** @jsx createElement */
import {
render,
reactive,
ref,
refComputed,
vnodeComputed,
createElement,
derive,
propTypes,
useImperativeHandle,
createRef,
watch,
} from 'axii'
function ReadChildren({ children }, ref) {
return <div>
<div>children:</div>
<div>
{
vnodeComputed(() => {
return children.map(child => {
return <div>
<div>after read</div>
{child}
</div>
})
})
}
</div>
</div>
}
export default function App() {
const data = reactive([
{
name: 1,
child: ['child11', 'child12']
}, {
name: 2,
child: ['child21', 'child22']
}
])
// const ref1 = refComputed(() => {
// return data.map((d) => d.name)
// })
//
// const ref2 = refComputed(() => {
// console.log('ref2')
// return ref1.value.map(n => `ref2:${n}`)
// })
//
//
// watch(() => ref2.value, () => {
// console.log('changed>>>>')
// })
setTimeout(() => {
data.push({ name:3, child: ['child3']})
})
return (
<div>
<div>aaa</div>
<ReadChildren>
{vnodeComputed(() => data.map(d =>
<div key={d.name}>
<span>{d.name}</span>
</div>
))}
</ReadChildren>
</div>
)
}
render(<App />, document.getElementById('root'))