VUE3-应用规模化

SFC–单文件组件（*.vue）

<script>
  export default {
    data() {
      return {
        count: 0
      }
    }
  }
</script>
<template>
  <button @click="count++">Count is {{ count }}</button>
</template>
<style>
</style>

优点：

• 预编译模板
• 组件作用域的css
• 组合式的API语法
• 模块热更新
• 自动补全，对表达式的类型检查

SFC如何工作？

1. Vue SFC 是一个框架指定的文件格式，
2. 由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS
3. 编译后的 SFC 可以像导入其他 ES 模块一样导入
4. SFC 中的 <style>标签一般会在开发时注入成原生的 <style> 标签以支持热更新，而生产环境下它们会被抽取、合并成单独的 CSS 文件。

项目脚手架

• vite创建vue：npm init vue@latest
• Vue Cli 建议用vite
• <script lang="ts"></script> 块提供类型检查
• ts 搭配 vue 的一些事

路由

• 客户端路由

  • 在单页面应用中，客户端的js可以拦截页面的跳转请求

• 服务端路由

  • 服务器根据用户访问的 URL 路径返回不同的响应结果

状态管理vuex 不推荐

适用于多个组件共享一个共同的状态

用响应式 API 做简单状态管理

• data() 的返回值对象会通过 reactive() 函数转为响应式。
• 使用reactive() 来实现在多个组件实例间共享状态
  1. 新建一个store文件夹，在下面新建一个index文件
  2. 从 vue 中引入 reactive，
  3. 暴露一个通过reactive()返回的数据和修改的方法
  4. 其他页面直接引入store/index，在data中返回这个数据

     import { reactive } from 'vue'
     export const store = reactive({
       count: 0,
       modifies(){}
     })

• 使用其他响应式 API 如 ref() 或是 computed()，或是通过一个组合式函数来返回一个全局状态

  import { ref } from 'vue'
  
  // 全局状态，创建在模块作用域下
  const globalCount = ref(1)
  
  export function useCount() {
    // 局部状态，每个组件都会创建
    const localCount = ref(1)
  
    return {
      globalCount,
      localCount
    }
  }

Pinia 推荐

• Pinia官方文档
• VUE3-Pinia

服务端渲染（SSR）

• 概念

  • 将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用

• 优势：

  • 更快的首屏加载：
    • 服务端渲染的 HTML 无需等到所有的 JavaScript 都下载并执行完成之后才显示
    • 数据获取过程在首次访问时在服务端完成
  • 统一的心智模型：
    • 使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用，而不需要在后端模板系统和前端框架之间来回切换。
  • 更好的 SEO：
    • 搜索引擎爬虫可以直接看到完全渲染的页面。

• 静态站点生成(SSG/预渲染):

  • 首屏加载性能
  • 花销更小，部署更容易
  • 仅用于消费静态数据的页面
  • 优化为数不多的营销页面的 SEO

SSR创建及注意事项

性能的优化

• 页面加载优化

  • 选用正确的架构
    • 避免将其部署为纯客户端的 SPA，而是让服务器直接发送包含用户想要查看的内容的 HTML 代码
    • 必须是 SPA，但还有其他的营销相关页面，请单独部署这些页面
  • 包体积与 Tree-shaking 优化
    • 尽可能地采用构建步骤
    • 在引入新的依赖项时要小心包体积膨胀 – 选择提供 ES 模块格式的依赖
  • 代码分割

• 更新优化

  • Props 稳定性

    <ListItem
      v-for="item in list"
      :id="item.id"
      :active-id="activeId" />
    改
    <ListItem
      v-for="item in list"
      :id="item.id"
      :active="item.id === activeId" />

  • v-once : 渲染依赖运行时数据但无需再更新的内容
  • v-memo : 有条件地跳过某些大型子树或者 v-for 列表的更新