React \u548c Vue \u7684\u865a\u62dfDOM\u662f\u4ec0\u4e48\u6837\u5b50\u7684\uff1f<\/h3>\n\n\n\n\/\/ React \u7684 \u865a\u62dfdom
const vNode = {
key : null,
props:{
children:[ \/\/ \u5b50\u5143\u7d20
{type:'span',...},
{type:'span',...}
],
className:\"red\", \/\/ \u6807\u7b7e\u7684class\u5c5e\u6027
onClick:()=>{}, \/\/ \u4e8b\u4ef6
},
ref: null,
type: \"div\", \/\/ \u6807\u7b7e \u6216 \u7ec4\u4ef6\u540d
...
}
\/\/ Vue \u7684 \u865a\u62dfDOM
const vNode = {
tag :'div', \/\/ \u6807\u7b7e \u6216 \u7ec4\u4ef6\u540d
data:{
class:\"red\", \/\/ \u6807\u7b7e\u7684class\u5c5e\u6027
on:{
click:()=>{} \/\/ \u4e8b\u4ef6
}
},
children:[ \/\/ \u5b50\u5143\u7d20
{tag:'span',...},
{tag:\"span\",...}
]
...
}<\/code><\/pre>\n\n\n\n\u95ee\u9898: \u865a\u62dfDOM\u662f\u5982\u4f55\u4ea7\u751f\u7684\u5462?<\/p>\n\n\n\n
\u5982\u4f55\u521b\u5efa\u865a\u62dfDOM<\/h3>\n\n\n\n
\u5728 React \u4e2d\u6846\u67b6\u63d0\u4f9b\u4e86 createElement API<\/p>\n\n\n\n
createElement('div',{className:'red',onClick:()=>{}},[
createElement(\"span\",{},\"\u5b50\u5143\u7d20\u4e00\")
createElement(\"span\",{},\"\u5b50\u5143\u7d20\u4e8c\")
])
\/\/ react\u63d0\u4f9b\u4e86JSX\u7b80\u5316\u865a\u62dfDOM\u7684\u521b\u5efa , \u901a\u8fc7 Babel \u8f6c\u5316\u4e3a \u4e0a\u9762\u7684\u5199\u6cd5 (babel\u76f4\u63a5\u5185\u7f6e\u4e86JSX\u8bed\u6cd5\u89e3\u6790)
<div className=\"red\" onClick=\"{()=>{}}\">
<span>\u5b50\u5143\u7d20\u4e00<\/span>
<span>\u5b50\u5143\u7d20\u4e8c<\/span>
<\/div><\/code><\/pre>\n\n\n\n\u5728 Vue \u4e2d\u6846\u67b6\u63d0\u4f9b\u4e86 h \u51fd\u6570 (\u53ea\u80fd\u5728 render \u51fd\u6570\u91cc\u5f97\u5230 h )<\/p>\n\n\n\n
h(\"div\",{
class:'red',
on:{
click:()=>{}
},
[
h('span',{},'\u5b50\u5143\u7d20'),
h('span',{},'\u5b50\u5143\u7d20\u4e8c')
]
})
\/\/ Vue \u63d0\u4f9b\u4e86 Tmplate \u6a21\u677f\u8bed\u6cd5; \u901a\u8fc7 vue-loader \u8f6c\u5316\u4e3a \u4e0a\u9762\u7684\u5199\u6cd5
<div calss=\"red\" @click=\"fn\">
<span>\u5b50\u5143\u7d20<\/span>
<span>\u5b50\u5143\u7d20\u4e8c<span>
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\ndiff\u7b97\u6cd5<\/h2>\n\n\n\n
\u65b0\u865a\u62dfDOM\u548c\u8001\u865a\u62dfDOM\u8fdb\u884cdiff\uff08\u7cbe\u7ec6\u5316\u6bd4\u8f83\uff09\uff0c \u7b97\u51fa\u5e94\u8be5\u5982\u4f55\u6700\u5c0f\u91cf\u66f4\u65b0\uff0c\u6700\u540e\u53cd\u6620\u5230\u771f\u6b63\u7684DOM\u4e0a<\/p>\n\n\n\n
diff\u7684\u7279\u70b9<\/h3>\n\n\n\n- \u53ea\u6709\u662f\u540c\u4e00\u4e2a\u865a\u62df\u8282\u70b9,\u624d\u4f1a\u8fdb\u884c\u7cbe\u7ec6\u5316\u6bd4\u8f83,\u5426\u5219\u5c31\u662f\u66b4\u529b\u5220\u9664,\u91cd\u5efa
- \u5982\u4f55\u5b9a\u4e49\u662f\u540c\u4e00\u4e2a\u865a\u62df\u8282\u70b9?
![\"WVFaLV.md.png\"\/](\"https:\/\/z3.ax1x.com\/2021\/07\/14\/WVFaLV.md.png\")
<\/div><\/figure>\n\n\n\n