domItem.
innerHTML
=
' <div>现在是innerHTML</div>'
;
}
else
{
domItem.
innerText
=
'<div>现在是innerText</div>'
;
console
.
log
(domItem);
return
h
(
'span'
, {}, [
h
(
'div'
, {
innerText
:
'Vue的h函数切换渲染innerHTML和innerText异常:'
}),
h
(
'span'
, domItem),
h
(
'button'
, {
onClick
:
this
.
change
,
innerText
:
'切换'
,
</script>
<
style
scoped
>
div
{
margin
:
10px
;
span
{
margin-right
:
20px
;
</
style
>
测试结果发现：
进入页面后正常渲染innerHTML如下
const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
if (oldProps !== newProps) {
for (const key in newProps) {
if (isReservedProp(key))
continue;
const next = newProps[key];
const prev = oldProps[key];
if (next !== prev && key !== 'value') {
hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
if (oldProps !== EMPTY_OBJ) {
for (const key in oldProps) {
if (!isReservedProp(key) && !(key in newProps)) {
hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
总结： Vue在最终渲染时，会先遍历新的newProps对象，将新的newProps中属性值都渲染出来；再遍历旧的oldProps对象，将旧的oldProps[key] = newProps[key]，上例中，遍历newProps时，将innerText渲染为<div>现在是innerText</div>,遍历oldProps时，将innerHTML渲染为空。 所以最终变成了渲染成了空。
目前我的解决方式是，都用innerHTML渲染好了。不知道读者朋友们有什么更好的方案吗？
给官方提了一个BUG：Vue's H function switches rendering innerHTML and innerText exceptions. · Issue #6571 · vuejs/core (github.com)
- 65.2w
-
11149
dingFY
Vue.js
- 15.6w
-
yanessa_yu
