vue的VNode約束問題

1.所有的組件樹中，如果 VNode 是組件或含有組件的 slot，那么 VNode 必須唯一。所以下面的兩個示例都是錯誤的。這該怎么理解

第一個錯誤栗子：

<div id='app'>
    <ele></ele>
<div>

var Child = {
    render: function (createElement) {
        return createElement("p", "text");
    }
};
Vue.component("ele", {
    render: function (createElement) {
        var ChildNode = createElement(Child);
        return createElement("div", [
            ChildNode ,
            ChildNode 
        ]);
    }
})

第二個錯誤栗子：

<div id='app'>
    <ele>
        <div>
            <Child></Child>
        </div>
    </ele>
<div>

Vue.component("Child", {
    render: function (createElement) {
        return createElement("p", "text");
    }
});
Vue.component("ele", {
    render: function (createElement) {
        var ChildNode = createElement(Child);
        return createElement("div", [
            this.$slots.default,
            this.$slots.default
        ])
    }
})

這兩個栗子說期待渲染兩個Child組件，也就是兩個<p>text</p>節(jié)點，實際上只渲染出一個，因為VNode受到約束。

可是我試過可以渲染出兩個節(jié)點也就是<p>text</p>，不知道它渲染出的一個是怎么說的

回答

編輯回答

朕略萌

同問，樓主找到答案了么？我也是直接渲染出兩個

2017年10月12日 06:27

編輯回答

爛人

渲染是沒問題的, 但這會破壞后續(xù)的更新.

如下這個例子: 在第一次點擊時, 兩個 p 都可以更新, 但第二次以后就只有第二個 p 的內(nèi)容會被更新.

var Child = {
  props: {
    text: {},
  },
  render: function(createElement) {
    return createElement('p', this.text);
  },
};

Vue.component('Child', Child);
Vue.component('ele', {
  data() {
    return {
      text: 'test',
    };
  },
  render: function(createElement) {
    var ChildNode = createElement(Child, {
      props: { text: this.text },
      nativeOn: {
        click: () => {
          this.text = 'clicked ' + new Date();
        },
      },
    });
    return createElement('div', [ChildNode, ChildNode]);
  },
});

new Vue({
  el: '#app',

  template: `
    <div id='app'>
      <ele />
    </div>
  `,
});

這是由于 vue 當(dāng)前實現(xiàn)會將 vnode 會與其渲染出來的 dom 元素進(jìn)行一對一關(guān)聯(lián), 當(dāng)你同一個 vnode 渲染兩次后, vnode 最終只會與最后一個渲染出來的 dom 元素關(guān)聯(lián), 所以在 patch 階段只有最后一個 dom 可以被更新.

這實質(zhì)上是 vue 的缺陷, github 已經(jīng)有相關(guān) issue 請求 vue 支持 vnode 復(fù)用, 因為這種使用方式一來很符合直覺, 二來存在實際的使用場景.

2017年3月4日 22:18