vuedose.tips（系列翻译二）
2019-10-05 本文已影响0人
知识文青
在上一小节中，虽然我们对大型数组做了性能的提升操作，但是我们仍然不知道到底提升了多少性能。
我们可以使用Chrome DevTools中的“性能”标签来做到这一点。但是为了获得准确的数据，我们必须在Vue应用程序上激活性能模式。
我们可以通过在main.js文件或插件中设置全局变量来实现（对于Nuxt）
Vue.config.performance = true;
或者，如果您正确设置了NODE_ENV env变量，则可以在非生产环境中使用它来设置它：
const isDev = process.env.NODE_ENV !== "production"; Vue.config.performance = isDev;
这将激活Vue内部用来标记组件性能的User Timing API。
在上一个技巧中，我创建了此代码框架。打开它，然后点击Chrome DevTools上性能标签上的重新加载按钮：
image
这将记录页面加载性能。并且由于您可以在main.js上看到Vue.config.performance设置，因此可以在配置文件中看到“用户计时”部分：
image
在其中，您可以找到3个指标：
Init: time it takes to create the component instance
Render: time to create the VDom structure
Patch: time to apply the VDom structure to the real DOM
所以上一个技巧所花费的时间是 417ms 来初始化
image
而使用Object.freeze的非反应式需要3.9ms的时间：
image
当然，每次运行之间的差异可能会有些许变化，但是仍然必须有很大的差异。由于创建组件时会发生反应性问题，因此您会在Reactive和NoReactive组件的init部分中看到这种差异
