-
-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
修复监听失效问题+添加SetupComponent组件支持 #9
base: main
Are you sure you want to change the base?
Conversation
const Temp = defineSetupComponent({
setup(p: { prop1: string }) {
const a = ref(1);
const data = reactive({
count: 1,
add() {
this.count++;
},
});
return {
a,
data,
p: p.prop1,
};
},
render(ctx) {
return (
<div>
<h1>{ctx.p}</h1>
<h1>{ctx.data.count}</h1>
<h2>{ctx.a.value}</h2>
<Button onClick={() => ctx.a.value++}>测试Ref</Button>
<Button type="primary" onClick={() => ctx.data.add()}>
测试按钮
</Button>
</div>
);
},
}); 允许编写setup组件 |
|
import React from 'react'
import { useRef, onMounted, useWatch } from 'veact'
export const Component: React.FC = () => {
const refData = useRef(true)
const incrementData = () => {
refData.value++
}
onMounted(() => {
console.log('component mounted')
})
useWatch(
refData,
() => console.log('refData changed'),
{ immediate: true },
)
return (
<div>
<pre>ref.value = {JSON.stringify(refData.value, null, 2)}</pre>
<button onClick={incrementData}>increment ref.value</button>
</div>
)
} 在以上组件的示例中,如果采用 按照 veact 当前的设计实现, |
这个实现已经在strict模式下测试成功,可以正常更新,打印顺序正常,初始在useOnce执行,挂载之前就立刻监听,后使用mount周期处理资源释放 如果要取消挂载时监听 就得取消卸载时取消监听 或者onbeforeunmount的实现错误,观察到这个hook会在组件第一次执行完成后立刻执行一次导致监听失效 |
实际上vue的组件也会多次挂载卸载 直接声明的watch也会在挂载卸载时停止和激活 |
No description provided.