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。