Vue核心概念

今天收到了阿里的人工智能模型“通义千问”的内测资格，试了一下，我也非专业人士，就不瞎评测了。只是对比百度文心一言，个人感觉不相上下，离chatgpt还是有一点差距的。但是对于一些简单问题或者代码编写还是完全够用的，心底里还是很欣慰的，毕竟有更多的选择对我们普通人是更友好的。官网： https://qianwen.aliyun.com/

$\n$

上次分享了使用vue+ts+vite+antd+pnpm编写了一个简单的应用，在这里面我们其实就是一个熟悉前端工程化的过程，antd是ui组件、pnpm是包管理器，ts是js的超集，可以在编译时进行检查，而vite又是一个快速开发构建的工具，可以快速启动开发服务器并进行代码的编译和打包，支持热更新。总之利用这些工具和方法，能够大大的提升开发的效率。

今天就开始一点点根据自己收获进行分享：

1、ts（TypeScript）是js的超集，可以编译成普通的js，支持任意浏览器，任意系统，并且开源。怎么理解超集，简单理解应该是ts兼容js，但ts有更强大的功能。就是说ts是基于js基础上多了一个类型系统，可以在编译前帮你检查出错误，可以避免因为js没有类型约束导致的一些BUG，而往往这些BUG只有在运行的时候才能发现，会导致生产的故障。ts在编译的时候先将代码编译成js，才能在浏览器或者nodejs中执行。

如果对于ts还不太熟悉的话，就直接先上官网研究一下，如果会js的话，上手ts还是很容易，总之最好就是一边写一边学，效果会豪横多。

官网：https://www.typescriptlang.org/ 中文文档：https://typescript.bootcss.com/index.html

2、vue3对ts提供了更好的支持，vue2相对较弱，需要额外配置和插件来实现。vue2.7是当前也是最后一个vue2.x次级版本更新，Vue 2 的终止支持时间是 2023 年 12 月 31 日。在此之后，Vue 2 在已有的分发渠道 (各类 CDN 和包管理器) 中仍然可用，但不再进行更新，包括对安全问题和浏览器兼容性问题的修复等。技术更新迭代很快，所以当下学习vue3是主流。官网如是说： Vue 本身就是用 TypeScript 编写的，并对 TypeScript 提供了一等公民的支持。所有的 Vue 官方库都自带了类型声明文件，开箱即用。

3、vue2的选项式（Options API）的vue3的组合式（Composition API）这个官网其实也做了很多对比，我这里就是简单的描述一下，选项式是vue2主要采用的编程风格，一个组件被定义为一个选项对象，随着组件功能的增加，选项对象变庞大，可读性和维护性会降低。而组合式是vue3引入的一种新的编程风格。一个组件逻辑被组成成多个函数，这些函数可以被重用、组合。组合式通过setup函数定义组件逻辑。

4、setup函数是组合式API的核心部分，是在组件实例被创建之前执行的，接受两个参数props和context。

// 基于 TypeScript 的 Vue 组件 import { defineComponent } from ‘vue’

export default defineComponent({ setup(props, context) { // 在这里声明数据，或者编写函数并在这里执行它

return {
  // 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
}

}, })

在使用 setup 的情况下，不能再像vue2一样用 this 来获取 Vue 实例

props：是一个响应式的对象，包含了组件接收的属性值。在setup函数内部，你可以直接访问和操作props对象中的属性。、由父组件传递来的数据。 context：是一个上下文对象，它提供了一些有用的属性和方法，用于组件的开发。其中包括attrs、slots、emit等

5、defineComponent 可以看到import { defineComponent } from ‘vue’ 这是vue3的一个全新API，用与ts代码的类型推导，有了它就不用每个参数都个声明类型。代码量减少，效率提高，只要是vue自身的API，都可以自动推导类型。所以为了让 TypeScript 正确地推导出组件选项内的类型，我们需要通过 defineComponent() 这个全局 API 来定义组件：

import { defineComponent } from ‘vue’

export default defineComponent({ // 启用了类型推导 props: { message: String }, setup(props) { props.message // 类型：string | undefined } })

6、生命周期详细变化可以看官网，这里就说vue2生命周期里的beforeCreate和created ，在Vue3里已被setup替代。

7、一些名词 SPA 单页面应用，Vue 不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application，缩写为 SPA)。

SSR Vue 提供了一系列 API，支持将一个 Vue 应用在服务端渲染成 HTML 字符串。这能让服务器直接返回渲染好的 HTML，让用户在 JavaScript 下载完毕前就看到页面内容。Vue 之后会在客户端对应用进行“激活 (hydrate)”使其重获可交互性。这被称为服务端渲染 (SSR)

SSG 如果所需的数据是静态的，那么服务端渲染可以提前完成。这意味着我们可以将整个应用预渲染为 HTML，并将其作为静态文件部署。这增强了站点的性能表现，也使部署变得更容易，因为我们无需根据请求动态地渲染页面。Vue 仍可通过激活在客户端提供交互。这一技术通常被称为静态站点生成 (SSG)，也被称为 JAMStack。

前端