mini-vue的实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src='../渲染/renderer.js'></script>
<script src='../响应式系统/reactive.js'></script>
<script src='./index.js'></script>
<script>
const App = {
data: reactive({
counter: 0
}),
render(){
return h('div', null, [
h('h2', {class: 'why', onClick: function(){console.log("hjkkkk")}}, `当前计数:${this.data.counter}`),
h('button', {
onClick: () => {
this.data.counter++
console.log('=====')
}
}, '+1')
])
}
}
createApp(App).mount("#app")
setTimeout(() => {
App.data.counter++
}, 3000);
</script>
</body>
</html>index.js
function createApp(rootComponent) {
return {
mount(selector) {
const container = document.querySelector(selector);
let isMounted = false;
let oldVnode = null;
watchEffect(() => {
if(!isMounted) {
oldVnode = rootComponent.render()
mount(oldVnode, container);
isMounted = true;
console.log('+++++++')
} else {
console.log('-------')
const newVnode = rootComponent.render();
patch(oldVnode, newVnode);
oldVnode = newVnode
}
})
}
}
}
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
