前言
本人写了2年多的React hooks,最近新单位用的框架是Vue3所以转为Vue3技术栈,仅此记录本人从React开发转为Vue3开发的短期内自学的核心要点。鉴于本人水平有限,难以避免错误或者遗漏,请大佬们多多指教。
React业务代码日常使用jsx去写,Vue3则是template,当然也可以使用jsx,本文所有示例代码都是Vue+jsx的。
1. 状态变量
1.1 变量声明
React通过const [count, onChange] = useState()
来创建一个状态变量,vue则通过const count = ref()
或者const countContainer = reactive{count: null}
来创建变量,考虑到一开始接触vue3,ref和reactive的处理方式不同,会显著增加大脑负担,建议新手直接全部用ref声明变量,并用类似count.value
来调用。
1.2 变量改变
react可通过调用变更函数onChange(newCount)
来改变原value的值,在vue中可以直接通过赋值进行改变,count.value = newCount
2. 父子组件传值
React的父子组件传值,直接通过给子组件加属性就可以完成。
考虑如下React组件:
const [count, onChange] = useState();
<Child count={count} onChange={onChange} />
比如父组件声明需要传递给子组件的变量,子组件通过props.count
和props.onChange
取值即可,但是vue相对来说复杂得多。
对比如下Vue父组件场景:
const count = ref();
const onChange = (v) => {count.value = v};
return () => <Child count={count.value} onChange={onChange} />
子组件要通过声明props和emits来取值:
export default defineComponent({
props: ["count"],
emits: ["change"],
setup: (props, {emit, attrs}) => {
const changeCount = () => {
emit('change', props.count + 1)
}
return () => <button onClick={changeCount}>加1</button>
}
})
这里Vvue会自动截取带on的函数名,从onChange -> change。
还有一种是Vue双向绑定的写法,父组件用v-model绑定属性,子组件用update去改变状态。
例如,父组件给子组件绑定方法:
<Child v-model:count={count.value} />
子组件的处理方式:
export default defineComponent({
props: ["count"],
emits: ["update:count"],
setup: (props, {emit, attrs}) => {
const changeCount = () => {
emit("update:count", props.count + 1)
}
return () => <button onClick={changeCount}>加1</button>
}
})
3. 组件刷新
React默认在props改变时,会自动刷新组件,调用组件函数来刷新所有状态,vue没有这个机制,需要通过对props相对应的变量的监听来改变其他的状态。
考虑如下React场景:
const countRelated = props.count + 1;
return <div>{countrelated}</div>
vue需要这样来使用:
const countRelated = ref(0);
watch(() => props.count, (val) => {
countReacted.value = val;
});
return () => <div>{countRelated.value}</div>
包括当使用React的useEffect用于监听变量改变,也应该用Vue的watch去写
总结
React hooks和Vue3 组合API在写法上非常相似,只要注意到少许的不同点,切换技术栈的速度可以相当快
原文链接:https://juejin.cn/post/7235091963313717309 作者:chenliangngng