在前篇文章中，提到过在使用联合类型时可能需要进行类型缩小，比如： function concatStr(prefix: string | number, context: string) {    if (typeof prefix === "number") {        // 如果前缀是数字，返回若干个空格和字符串拼接的结果        return " ".repeat(prefix) + context;   }    // 如果前缀是字符串，直接拼接后返回    return prefix + co…

在系统学习 TypeScript 前，需要先部署开发环境，具体可以查看TypeScript 简易指南。 基本类型 TypeScript 与 JavaScript 一样，常见的基本类型有： let name: string = "张三"; console.log(name.toUpperCase()); ​ let age: number = 42; console.log(age.toFixed(2)); ​ let isOk: boolean = true; console.log(isOk.valueOf())…

TypeScript 是 JavaScript 的超集，在 JavaScript 之上添加了类型检查等功功能，在运行时依然需要编译成 JavaScript 代码后运行。 环境准备 使用 TypeScript 需要先安装 Node.js 环境。 全局安装 ts： ❯ npm install -g typescript 需要管理员权限，否则会安装失败。 项目初始化 打开项目根目录，执行 tsc --init，在项目根目录下会生成一个tsconfig.json文件。其中比较重要的配置项： {  "target": "ES…

ShallowRef 一个简单示例： <template>    <div>        <h2>count:{{ count }}</h2>        <h2>person:{{ person }}</h2>        <button @click="count++">count++</button>        <button @click="person.name='李四'">修改名字<…

props 父组件要通过 props 传递信息给子组件，只要在子组件上添加相应的属性： <template> <div class="father"> <h3>父组件</h3> <Child :car="car"/> </div> </template> ​ <script setup lang="ts" name="Father"> import Child from './Child.vue' import { re…

Pinia 是一个 Vue3 的集中式状态（数据）管理库。 搭建测试项目 先创建一个 Vue3 项目，添加两个组件。 src\components\Count.vue： <template>  <div class="count">    <h2>当前求和为：{{ sum }}</h2>    <select v-model.number="n">      <option value="1">1</option>      <…

路由器和路由 新建一个 Vue3 项目，创建一个简单的 App.vue： ​ <template>  <div class="app">    <h2 class="title">Vue路由测试</h2>    <!-- 导航区 -->    <div class="navigate">      <a href="#" class="active">首页</a>      <a href="#">新闻<…

ref 属性 如果需要获取一个 DOM 元素，传统的 JS 方式是： <template>    <div class="person">        <h1>中国</h1>        <h2 id="city">北京</h2>        <h3>大兴区</h3>        <button @click="showDom">显示dom元素</button>    </div&g…

单向绑定和双向绑定 看一个示例： <template>    <div class="person">       姓：<input type="text" v-bind:value="firstName" />        <br />       名：<input type="text" v-bind:value="lastName" />        <br />       全名：????    </div> </…

组合式和选项式 Vue2 使用的是选项式（Options）API，Vue3 推荐使用组合式（Composition）API。 关于组合式和选项式 API 的区别以及优缺点可以观看视频。 可以在 Vue3 中使用组合式 API 编写代码，但不推荐。 setup Vue3 提供一个setup方法，可以在其中以组合式的风格定义变量和方法。 比如一个选项式的 vue 组件： <template>    <div class="person">        <h2>姓名：{{ name …