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
-
都能监听响应式数据的变化,不同的是监听数据变化的方式不同
-
watch
:要明确指出监视的数据 -
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>
路由篇 important!!!
(待写中…
Chapter 2 Vue3实战篇
(待写中…