Vue 跨平台性能优化十法
Vue.js 开发能够同时运行在不同平台（如 Web、移动平台和桌面平台）的应用程序。以下是一些常见的跨平台解决方案：
1.
-
使用 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
底层技术
VueBabelWebpackCordovaElectron
除了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.优化计算属性和监听器： 尽量避免在计算属性或监听器中进行复杂的计算或操作，因为它们会在每次数据变化时都被调用。确保这些函数保持简单且高效。