Vue3+TypeScript+Vite 工作流--大概（学习ing 附上各种报错

最新推荐文章于 2024-07-06 07:00:00 发布

Sofiya_

最新推荐文章于 2024-07-06 07:00:00 发布

阅读量913

点赞数 18

分类专栏：自我学习文章标签： typescript 学习 javascript

本文链接：https://blog.csdn.net/weixin_61414436/article/details/136612140

版权

自我学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Chapter 1 Vue3 简介

开始篇说在开头

Vite是Vue3所推荐的打包工具 因在会将使用esbuild预建构依赖轻量快速的热重载，对javasprScript jsx css 支持开箱即用

TypeScript是被Vue3进行开发支持的 有更优秀的类型声明等等的优势
Vue开发最好使用vscode开发，里面使用的所以的包或组件可以快速的下载
Vue3 有着Composition API 的优势是向下兼容 Vue2
可以用函数的方式更加好的组织代码让相关代码更加有序的组织在一起
因VSCode不知道抽什么神经当下载到对应插件和包时候有时候无法识别到,所以需要重启一下VSCode既可
回调函数：在传递函数作为参数的情况下，箭头函数可以提供更简洁的语法。例如：

() => {} 是 JavaScript 中的箭头函数，它的使用场景有很多，通常用于简洁地定义匿名函数。
与高阶函数一起使用：箭头函数与高阶函数（接受函数作为参数或返回函数的函数）一起使用时，可以提供更简洁的代码

生命周期篇

Vue3的生命周期钩子

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

setup篇

setup函数是一切方法程序的开始
Vue3让setup方法加入到语法糖中 <script setup>
后面还有几个函数也都被打包成标签让程序员吃糖。使得代码更加简洁。 <script setup>每次组件被实例化的时候都会被创建的时候执行
setup()的返回值

若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
若返回一个函数：则可以自定义渲染内容，代码如下：
setup函数被独立后依旧是要写对应的组件名来让别人识别

为什么要使用name组件呢?
https://blog.csdn.net/weixin_45811256/article/details/109498407
如何解决呢还要写多一个不含setup的script?
如在VSCode写Vue3项目,可以使用vitez中的插件

第一步：npm i vite-plugin-vue-setup-extend -D
第二步：vite.config.ts

ref()和reactive()篇

ref和reactive老生常谈的因为其中两个都是可以定义响应式对象 返回值都可以是一个对象类型

区别

ref是既可以定义基础类型的又可以定义对象类型
reactive是只能定义对象类型,并且响应式数据是深层次的
其实ref定义的对象类型时,其实也会调用了reactive函数来包装对应的对象类型

其他要点

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

reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

使用原则：

若需要一个基本类型的响应式数据，必须使用ref。
若需要一个响应式对象，层级不深，ref、reactive都可以。
若需要一个响应式对象，且层级较深，推荐使用reactive

toRefs和toRef篇

作用：将一个响应式的对象的每一个属性转换成ref对象
备注：toRefs与toRef功能一致，但toRefs可以批量转换。

// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
let person = reactive({name:‘xx’, age:18, gender:‘男’})
let {name,gender} = toRefs(person)

Watch篇 important!!!

使用的四大场景

监视ref定义的基本类型数据,监视的是value值

const stopWatch = watch(sum,(newValue,oldValue)=>{})

监视ref定义的对象类型数据,直接写数据名,监视的是对象的地址值若是要监视深层次的,需要手动启用.

watch(person,(newValue,oldValue)=>{
console.log(‘person变化了’,newValue,oldValue)
},{deep:true})

监视reactive 定义的对象类型数据默认启动深层次监视

watch(person,(newValue,oldValue)=>{
console.log(‘person变化了’,newValue,oldValue)
})
watch(obj,(newValue,oldValue)=>{
console.log(‘Obj变化了’,newValue,oldValue)
})

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

若该属性值不是【对象类型】，需要写成函数形式。
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

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

watch(()=>person.car,(newValue,oldValue)=>{
console.log(‘person.car变化了’,newValue,oldValue)
},{deep:true})
或者
watch(()=> person.name,(newValue,oldValue)=>{
console.log(‘person.name变化了’,newValue,oldValue)
})

监视，情况五：监视上述的多个数据

watch([()=>person.name,person.car],(newValue,oldValue)=>{
console.log(‘person.car变化了’,newValue,oldValue)
},{deep:true})

watchEffect篇

官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
watch对比watchEffect
1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
2. watch：要明确指出监视的数据
3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）

标签的 ref 属性

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

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

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

用在普通DOM标签上：

<template>
  <div class="person">
    <h3 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <input type="text" ref="inpt"> <br><br>
    <button @click="showLog">点我打印内容</button>
  </div>
</template>

用在组件标签上

<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>

后续会大量使用这种方式来传参

props篇

props接受参数一般有三种方式

第一种写法：仅接收

const props = defineProps([‘list’])

第二种写法：接收+限制类型

const props =defineProps<{list:Persons}>()

第三种写法：接收+限制类型+指定默认值+限制必要性

let props = withDefaults(defineProps<{list?:Persons}>(),{
list:()=>[{id:‘asdasg01’,name:‘小猪佩奇’,age:18}]
})

自定义hook篇

什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

  <h2>当前求和为：{{sum}}</h2>
  <button @click="increment">点我+1</button>
  <button @click="decrement">点我-1</button>
  <hr>
  //循环遍历 取出useDog()中dogList属性里的值
  <img v-for="(u,index) in dogList" :key="index" :src="(u as string)"> 
  <span v-show="dogList">加载中......</span><br>
  <button @click="getDog">再来一只狗</button>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'

  export default defineComponent({
    name:'App',
  })
</script>

<script setup lang="ts">
//hook包装对应的方法
  import useSum from './hooks/useSum'
  import useDog from './hooks/useDog'
	//获取对应方法的值
  let {sum,increment,decrement} = useSum()
  let {dogList,getDog} = useDog()
</script>