Vue 跨平台性能优化十法

Vue.js 开发能够同时运行在不同平台（如 Web、移动平台和桌面平台）的应用程序。以下是一些常见的跨平台解决方案：

使用 Vue.js 官方发布的框架：
- Vue.js：主要用于 Web 开发。
- Vue Native：使用 Vue 语法开发原生应用（需要结合React Native）。
- Quasar Framework：一个构建跨平台桌面和移动应用的开源框架。

1-2

Vue Native 是一个框架，它允许开发者使用 JavaScript 来构建跨平台的原生移动应用。它是基于 React Native 的封装，所以利用 Vue Native，你可以实现React Native的所有功能。这个框架特别之处在于它结合了 Vue.js 的简洁性和 React Native 的广泛适用性，让你能以 Vue.js 的语法构建iOS和Android的移动应用

1-3-1 什么是Quasar？

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：

响应式网站
PWA（Progressive Web App）
通过Apache Cordova构建移动APP（Android，iOS，...）
多平台桌面应用程序（使用Electron）

Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！

1-3-2

开箱即用。

1-3-3

两个主题（将有更多）

该框架支持两种最常用的主题 - Material主题和iOS主题。

1-3-4

通过Quasar CLI提供无与伦比的开发人员体验

当使用Quasar的CLI时，开发人员将受益于：

无论是网站，PWA，移动APP（直接在手机上还是在仿真器上）或Electron应用程序，更改应用程序源代码时，都会进行状态保持热重载。开发人员只需更改他们的代码，就可以看到应用即时更新，而不需要任何页面刷新。
状态保持编译错误覆盖。
使用ESLint进行Lint-on-save - 如果开发人员只喜欢使用他们的代码
ES6代码转译
Sourcemaps
更改构建选项不需要手动重新加载开发服务器
更多领先的开发工具和技术

1-3-5

底层技术

Vue Babel Webpack Cordova Electron

除了Vue(需要半天的时间就能学会并永远改变你)，你并不需要知道其他技术。他们中的大多数都已集成并已为您配置。

Cordova 提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码

Electron的正确读法应该是[iˈlektrɒn] 使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序

2 .使用服务端渲染（SSR）或静态站点生成（SSG）：
- Nuxt.js（Vue.js 的 SSR 框架）
- Gridsome（基于 Vue.js 的 SSG 框架）

2-1.服务端渲染又称SSR（Server Side Render）实在服务端完成页面的内容，而不是在客户端通过AJAX获取数据

优势：更好的SEO（搜索引擎），由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面

Nuxt.js是一个基于Vue.js的轻量级应用框架，可用来创建服务端渲染（SSR）应用，也可以充当静态站点引擎生成静态站点应用。

https://zh.nuxtjs.org

2-2Gridsome 让开发人员可以轻松地构建静态生成的网站和应用程序，这些网站和应用程序天生速度快

2-2-1

便捷的本地开发

使用

Vue.js、 GraphQL 等现代工具以及 Node.js 和 JavaScript 生态系统内所有强大的功能来构建网站。在本地开发时，可以立即对任何代码的更改进行 热加载（hot-reloading）

2-2-2

天生快速

Gridsome 利用 PRPL 模式将超高性能融入到每个页面中。代码拆分、资源优化、图像渐进加载和链接预取功能开箱即用。用 Gridsome 构建的站点在默认配置下就能获得几乎完美的页面速度得分。

2-2-3

基于 Jamstack 技术构建

web 的未来将是 JavaScript、API 和 Markup（标记语言） - 即 Jamstack。Gridsome 利用强大的静态站点生成技术、JavaScript 和 API 来创建令人惊叹的现代 web 体验。

2-2-4

部署简单、安全

**无须服务器、无须数据库、只有文件。**将你的整个站点直接部署到 CDN 上，然后无须费心打理。用 Gridsome 构建的网站可以处理少至几千多至百万次的点击而不会出现故障，并且无须高昂的服务器费用。

Vue 跨平台性能优化十法

1. v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

2. 长列表性能优化

纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，减少组件初始化的时间，可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

复制代码

export default {
  data: () => ({
    users: {}
  }),

  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

3. vue 组件中的 data 是函数而不是对象

4. 组件懒加载 对于页面上不是首次加载就需要的组件，可以采用异步组件或路由懒加载的方式，延迟加载它们，提高首屏加载速度

5.合理使用 keep-alive： 对于经常切换的组件，可以使用 keep-alive 缓存组件实例，避免重复创建和销毁，提高渲染性能。

6.避免频繁的 Watcher 或深度监听：

7.使用异步组件和路由懒加载：

8.利用事件修饰符： Vue.js 提供了一些方便的事件修饰符，如 .stop、.prevent、.once 等，合理使用它们可以减少不必要的事件监听和处理。

9缓存重复获取的数据：通过合理使用 Vuex 状态管理库或本地缓存等方式，避免重复请求和计算相同的数据，提高性能和响应速度。

10.优化计算属性和监听器：尽量避免在计算属性或监听器中进行复杂的计算或操作，因为它们会在每次数据变化时都被调用。确保这些函数保持简单且高效。