性能测试

响应式数据并不能提高页面的性能，它只是在一定程度上提高了开发效率。

下面是个例子，渲染同样 80 万个节点（MAC M1 Pro Chorme 实测）

使用响应式数据渲染，js 执行时间大约在 2 秒，渲染时间大约在 5 秒，共 7 秒。

import { h, reactive } from 'pl-vue';

function App() {
  const list = reactive(new Array(800000).fill(1));
  return <div>{
    () => list.map(val => <p>{val}</p>)
  }</div>
}

使用了响应式数据但未使用响应式渲染，js 执行时间大约在 1 秒，渲染页面大约在 4.5 秒，共 5.5 秒。

import { h, reactive } from 'pl-vue';

function App() {
  const list = reactive(new Array(800000).fill(1));
  return <div>{
    list.map(val => <p>{val}</p>)
  }</div>
}

未使用响应式数据渲染，js 执行时间大约在 1.3 秒，渲染页面大约在 4.5 秒，共 5.8 秒。

import { h, reactive } from 'pl-vue';

function App() {
  const list = new Array(800000).fill(1);
  return <div>{
    list.map(val => <p>{val}</p>)
  }</div>
}

同样的例子，在 Vue 中测试结果

使用数据响应式渲染，js 执行时间大约在 3.5 秒，渲染时间大约在 5 秒，共 8.5 秒。

<template>
  <div>
    <p v-for="item, i in list" :key="i">{{ item }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const list = reactive(new Array(800000).fill(1));
    return {
      list,
    }
  }
}
</script>

未使用数据响应式，js 执行时间大约在 3 秒，渲染时间大约在 5 秒，共 8 秒。

<template>
  <div>
    <p v-for="item, i in list" :key="i">{{ item }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const list = new Array(800000).fill(1);
    return {
      list,
    }
  }
}
</script>