Vue手写渲染函数，为何不能使用已经观测的数据作为data?

Question

new Vue({
    data: {
        lists: {}
    },
    render(h) {
        return h('div', this.lists)
    }
}).$mount()

如题所述，上述代码报错如下。

vue-2.0.0.js:2586 [Vue warn]: Avoid using observed data object as vnode data: {}
Always create fresh vnode data objects in each render! (found in root instance)

Answer 1

new Vue({
    data: {
        lists: {}
    },
    render(h) {
        return h('div', { props: this.lists })
    }
}).$mount()

Answer 2

new Vue({
  data: {
    lists: {}
  },
  render(h) {
    //创建一个新的 vnode 数据对象,并复制 this.lists 的属性到新对象中    
    //不要重复使用相同的数据对象
    const vnodeData = Object.assign({}, this.lists);
    return h('div', vnodeData);
  }
}).$mount();

官网上的渲染函数章节指出: 组件树中的所有 VNode 必须是唯一的，
你在data里的声明的lists作为一个VNode数据,又在渲染函数里再次使用它作为VNode数据了。
在 Vue中，每个组件的渲染过程都会生成一个虚拟 DOM (vnode) 树，用于描述组件的结构和状态。在渲染过程中，Vue会比较前后两个 vnode 树的差异，并只更新需要更新的部分，以提高性能。
在多次渲染中重复使用相同的数据对象作为 vnode 数据时，Vue.js 会难以确定数据对象是否发生了变化。因为 Vue会跟踪被观察的数据对象的变化，如果相同的数据对象在不同的渲染中被重复使用，Vue可能会错误地认为数据没有变化，从而导致无法正确更新组件。
为了解决这个问题，Vue强制要求在每次渲染时都创建新的 vnode 数据对象。这样，Vue可以准确地追踪数据对象的变化，并根据变化情况来更新组件。