尚硅谷 Vue3+TypeScript 学习笔记(上)

目录

一、创建Vue3工程

1.1. 【基于 vue-cli 创建】

1.2. 【基于 vite 创建】(推荐)

1.3. 【一个简单的效果】

二、Vue3核心语法

2.1. 【OptionsAPI 与 CompositionAPI】

Options API 的弊端

Composition API 的优势

2.2. 【拉开序幕的 setup】

setup 概述

setup 的返回值

setup 与 Options API 的关系

setup 语法糖

2.3. 【ref 创建:基本类型的响应式数据】

2.4. 【reactive 创建:对象类型的响应式数据】

2.5. 【ref 创建:对象类型的响应式数据】

2.6. 【ref 对比 reactive】

2.7. 【toRefs 与 toRef】

2.8. 【computed】

2.9.【watch】

* 情况一

* 情况二

* 情况三

* 情况四

* 情况五

2.10. 【watchEffect】

2.11. 【标签的 ref 属性】

2.12. 【props】

2.13. 【生命周期】

2.14. 【自定义hook】


一、创建Vue3工程

1.1. 【基于 vue-cli 创建】

备注:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

1.2. 【基于 vite 创建】(推荐)

vite 是新一代前端构建工具,官网地址:https://vitejs.cn,vite的优势如下:

  • 轻量快速的热重载(HMR),能实现极速的服务启动。

  • TypeScriptJSXCSS 等支持开箱即用。

  • 真正的按需编译,不再等待整个应用编译完成。(这里的意思是,你启动vite的项目会很快,因为他直接启动,并不先编译,等你访问某个页面时,按需编译,类似于懒加载)

  • webpack构建 与 vite构建对比图如下:

尚硅谷 Vue3+TypeScript 学习笔记(上)_第1张图片

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

使用npm i安装依赖:

npm i

然后npm run dev启动项目

尚硅谷 Vue3+TypeScript 学习笔记(上)_第2张图片

总结:

  • Vite 项目中,index.html 是项目的入口文件,在项目最外层。

  • 加载index.html后,Vite 解析

    二、Vue3核心语法

    2.1. 【OptionsAPI 与 CompositionAPI】

    • Vue2API设计是Options(配置)风格的。

    • Vue3API设计是Composition(组合)风格的。

    Options API 的弊端

    Options类型的 API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。

    Composition API 的优势

    可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

    尚硅谷 Vue3+TypeScript 学习笔记(上)_第3张图片

    2.2. 【拉开序幕的 setup】

    setup 概述

    setupVue3中一个新的配置项,值是一个函数,它是 Composition API “表演的舞台,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup中。

    特点如下:

    • setup函数返回的对象中的内容,可直接在模板中使用。

    • setup中访问thisundefined

    • setup函数会在beforeCreate之前调用,它是“领先”所有钩子执行的。

    
    
    

    setup 的返回值

    • 若返回一个对象:则对象中的:属性、方法等,在模板中均可以直接使用(重点关注)。

    • 若返回一个函数:则可以自定义渲染内容,代码如下:

    setup(){
      return ()=> '你好啊!'
    }

    setup 与 Options API 的关系

    • Vue2 的配置(datamethos......)中可以访问到 setup中的属性、方法。

    • 但在setup不能访问到Vue2的配置(datamethos......)。

    • 如果与Vue2冲突,则setup优先。

    setup 语法糖

    setup函数有一个语法糖,这个语法糖,可以让我们把setup独立出去,代码如下:

    
    
    
    
    
    

    扩展:上述代码,还需要编写一个不写setupscript标签,去指定组件名字,比较麻烦,我们可以借助vite中的插件简化

    1. 第一步:npm i vite-plugin-vue-setup-extend -D

    2. 第二步:vite.config.ts

    import { defineConfig } from 'vite'
    import VueSetupExtend from 'vite-plugin-vue-setup-extend'
    
    export default defineConfig({
      plugins: [ VueSetupExtend() ]
    })

          3. 第三步:

    2.4. 【reactive 创建:对象类型的响应式数据】

    • 作用:定义一个响应式对象(基本类型不要用它,要用ref,否则报错)

    • 语法:let 响应式对象= reactive(源对象)

    • 返回值:一个Proxy的实例对象,简称:响应式对象。

    • 注意点:reactive定义的响应式数据是“深层次”的。

    
    
    
    

    2.5. 【ref 创建:对象类型的响应式数据】

    • 其实ref接收的数据可以是:基本类型对象类型

    • ref接收的是对象类型,内部其实也是调用了reactive函数。

    
    
    

    2.6. 【ref 对比 reactive】

    宏观角度看:

    1. ref用来定义:基本类型数据对象类型数据

    2. reactive用来定义:对象类型数据

    • 区别:

    1. ref创建的变量必须使用.value(可以使用volar插件自动添加.value)。

    2. reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。

    比如 let car = ref({ brand: '奔驰', price: 100 })

    可以使用 Object.assign(car, {brand: '奥拓', price:1})

    • 使用原则:

    1. 若需要一个基本类型的响应式数据,必须使用ref

    2. 若需要一个响应式对象,层级不深,refreactive都可以。

    3. 若需要一个响应式对象,且层级较深,推荐使用reactive

    注意:表明上你用ref去把对象变成了响应式对象,但实际上底层value还是reactive。

    2.7. 【toRefs 与 toRef】

    • 作用:将一个响应式对象中的每一个属性,转换为ref对象。

    • 备注:toRefstoRef功能一致,但toRefs可以批量转换。

    • 语法如下:

    
    
    
    

    2.8. 【computed】

    作用:根据已有数据计算出新数据(和Vue2中的computed作用一致)。

    尚硅谷 Vue3+TypeScript 学习笔记(上)_第4张图片

    
    
    

    2.9.【watch】

    • 作用:监视数据的变化(和Vue2中的watch作用一致)

    • 特点:Vue3中的watch只能监视以下四种数据

    1. ref定义的数据。

    2. reactive定义的数据。

    3. 函数返回一个值(getter函数)。

    4. 一个包含上述内容的数组。

    我们在Vue3中使用watch的时候,通常会遇到以下几种情况:

    * 情况一

    监视ref定义的【基本类型】数据:直接写数据名即可,监视的是其value值的改变。

    
    
    

    * 情况二

    监视ref定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。

    注意:

    • 若修改的是ref定义的对象中的属性,newValueoldValue 都是新值,因为它们是同一个对象。

    • 若修改整个ref定义的对象,newValue 是新值, oldValue 是旧值,因为不是同一个对象了。

    
    
    

    * 情况三

    监视reactive定义的【对象类型】数据,且默认开启了深度监视。

    
    
    

    * 情况四

    监视refreactive定义的【对象类型】数据中的某个属性,注意点如下:

    1. 若该属性值不是【对象类型】,需要写成函数形式。

    2. 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。

    结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。

    
    
    

    * 情况五

    监视上述的多个数据

    
    
    

    2.10. 【watchEffect】

    • 官网:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行该函数。

    • watch对比watchEffect

    1. 都能监听响应式数据的变化,不同的是监听数据变化的方式不同

    2. watch:要明确指出监视的数据

    3. watchEffect:不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)。

    示例代码:

    
    
    

    2.11. 【标签的 ref 属性】

    作用:用于注册模板引用。

    • 用在普通DOM标签上,获取的是DOM节点。

    • 用在组件标签上,获取的是组件实例对象。 

    用在普通DOM标签上:

    
    
    

    用在组件标签上:

    
    
    
    
    
    
    
    

    2.12. 【props】

    // 定义一个接口,限制每个Person对象的格式
    export interface PersonInter {
        id:string,
        name:string,
        age:number
    }
    
    // 定义一个自定义类型Persons
    export type Persons = Array

    App.vue中代码:

    
    
    
    

    Person.vue中代码:

    
    
    

    2.13. 【生命周期】

    • 概念:Vue组件实例在创建时要经历一系列的初始化步骤,在此过程中Vue会在合适的时机,调用特定的函数,从而让开发者有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子

    • 规律:

    生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。

    • Vue2的生命周期

    创建阶段:beforeCreatecreated

    挂载阶段:beforeMountmounted

    更新阶段:beforeUpdateupdated

    销毁阶段:beforeDestroydestroyed

    • Vue3的生命周期

    创建阶段:setup

    挂载阶段:onBeforeMountonMounted

    更新阶段:onBeforeUpdateonUpdated

    卸载阶段:onBeforeUnmountonUnmounted

    • 常用的钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

    • 示例代码:

    
    
    
    

    2.14. 【自定义hook】

    • 什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装,类似于vue2.x中的mixin

    • 自定义hook的优势:复用代码, 让setup中的逻辑更清楚易懂。

    示例代码:

    • useSum.ts中内容如下:

    import {ref,onMounted} from 'vue'
    
    export default function(){
      let sum = ref(0)
    
      const increment = ()=>{
        sum.value += 1
      }
      const decrement = ()=>{
        sum.value -= 1
      }
      onMounted(()=>{
        increment()
      })
    
      //向外部暴露数据
      return {sum,increment,decrement}
    }		
    • useDog.ts中内容如下:
    import {reactive,onMounted} from 'vue'
    import axios,{AxiosError} from 'axios'
    
    export default function(){
      let dogList = reactive([])
    
      // 方法
      async function getDog(){
        try {
          // 发请求
          let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
          // 维护数据
          dogList.push(data.message)
        } catch (error) {
          // 处理错误
          const err = error
          console.log(err.message)
        }
      }
    
      // 挂载钩子
      onMounted(()=>{
        getDog()
      })
    	
      //向外部暴露数据
      return {dogList,getDog}
    }
    • 组件中具体使用:
    
    
    
    
    

你可能感兴趣的:(#,Vue,typescript,学习,笔记,vue,vue3,vue.js,setup)