位置: IT常识 - 正文

Vue3+TS教程(vue3+ts写法)

编辑：rootadmin

Vue3+TS教程 Vue3组合式API1.钩子函数steup函数的普通用法<script>export default { setup() { return {} }}</script><template></template>简写使用setup<script setup></script><template></template>2.响应式APIref函数<script setup>import { ref } from 'vue'const state = ref(0)function increment() { state.value++}</script><template> <button @click="increment"> {{ state }} </button></template>reactive函数<script setup>import { reactive } from 'vue'const state = reactive({ count: 0 })function increment() { state.count++}</script><template> <button @click="increment"> {{ state.count }} </button></template>3.计算属性API单向响应<script setup>import { computed,reactive } from 'vue'const Person=reactive({X:'张',M:'三'}) Person.XM=computed(()=>{ return Person.X+'-'+Person.M })</script><template> 姓:<input v-model="Person.X"><br> 名:<input v-model="Person.M"><br> 单向响应:<input v-model="Person.XM"></template>双向响应<script setup>import { computed,reactive } from 'vue'const Person=reactive({X:'张',M:'三'})Person.AXM=computed({ get(){ return Person.X+'-'+Person.M }, set(value){ const arr=value.split('-') Person.X=arr[0] Person.M=arr[1] }})</script><template> 姓:<input v-model="Person.X"><br> 名:<input v-model="Person.M"><br> 双向响应:<input v-model="Person.AXM"></template>4.监听属性API监听整个对象<script setup>import {reactive,watch} from 'vue'const Person=reactive({name:'张三',age:18, job:{salary:20}}) watch(Person,(newVal,oldVal)=>{ console.log('用户信息发生了变化',newVal,oldVal); })</script><template> <h2>年龄：{{Person.age}}</h2> <button @click="Person.age++">+1</button></template>监听对象中单个属性<script setup>import {reactive,watch} from 'vue'const Person=reactive({name:'张三',age:18, job:{salary:20}}) watch(()=>Person.age,(newVal,oldVal)=>{ console.log('用户年龄发生了变化',newVal,oldVal); })</script><template> <h2>年龄：{{Person.age}}</h2> <button @click="Person.age++">+1</button></template>监听多个对象<script setup>import {reactive,watch} from 'vue'const Person=reactive({name:'张三',age:18, job:{salary:20}}) watch([()=>Person.name,()=>Person.age],(newValue,oldValue)=>{ console.log('person.name或者person.age的值变化了',newValue,oldValue); })</script><template> <h2>姓名：{{Person.name}}</h2> <button @click="Person.name+='~'">修改</button> <h2>年龄：{{Person.age}}</h2> <button @click="Person.age++">+1</button></template>监听对象中对象(深度监听)<script setup>import {reactive,watch} from 'vue'const Person=reactive({name:'张三',age:18, job:{salary:20}}) watch(()=>Person.job,(newValue,oldValue)=>{ console.log('person.job的值变化了',newValue,oldValue); },{ deep:true })</script><template> <h2>薪资：{{Person.job.salary}}K</h2> <button @click="Person.job.salary++">+1</button></template>5.高级监听API基本使用(默认执行一次)<script setup>import {reactive,watchEffect} from 'vue'const Person=reactive({ name:'张三' }) watchEffect(()=>{ Person.name console.log('姓名发送了变化'); })</script><template> <h2>姓名：{{Person.name}}</h2> <button @click="Person.name+='~'">修改</button></template>监听御前处理oninvalidate参数<script setup lang="ts">import { reactive, watchEffect } from "vue";const Person = reactive({ name: "张三",});watchEffect((oninvalidate) => { oninvalidate(() => { console.log("before"); }); Person.name; console.log("姓名发送了变化");});</script><template> <h2>姓名：{{ Person.name }}</h2> <button @click="Person.name += '~'">修改</button></template>停止监听<script setup lang="ts">import { reactive, watchEffect } from "vue";const Person = reactive({ name: "张三",});const stop = watchEffect((oninvalidate) => { oninvalidate(() => { console.log("before"); }); Person.name; console.log("姓名发送了变化");</script><template> <h2>姓名：{{ Person.name }}</h2> <button @click="Person.name += '~'">修改</button> <button @click="stop">停止</button></template>6.响应式对象解构APItoRef函数<script setup>import {reactive,toRef} from 'vue'const person=reactive({A:1,B:2})const A=toRef(person,'A')</script><template> <h2>姓名：{{A}}</h2> <button @click="person.A+='~'">修改</button></template>toRefs<script setup lang="ts"> import {reactive,toRefs} from 'vue' const person=reactive({A:1,B:2}) const {A,B}=toRefs(person) </script> <template> <h2>姓名：{{A}}</h2> <button @click="A+=1">修改</button> </template>7.生命周期API<script setup> import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,ref} from "vue"; onBeforeMount(()=>{ console.log('---挂载之前---'); }) onMounted(()=>{ console.log('---挂载---'); }) onBeforeUpdate(()=>{ console.log('---更新之前---'); }) onUpdated(()=>{ console.log('---更新---'); }) onBeforeUnmount(()=>{ console.log('---卸载之前---'); }) onUnmounted(()=>{ console.log('---卸载---'); })</script>8.ref获取dom<template> <div> <div ref="box">我是div</div> </div></template><script>import { ref,onMounted } from "vue";export default { setup() { let box = ref(null); //本质是reactive({value:null}) // 需要在生命周期获取 onMounted(()=>{ // 当界面挂载出来后就会自动执行 console.log(box.value); }) //接受的是null,原因是setup执行时机比mounted早,dom还没形成 console.log(box.value); return { box }; },};</script>9.Hooks(1)官方hooksuseAttrs()<template> <Acom a="456" title="789" /></template><script setup lang="ts">import { useAttrs } from 'vue'let attr = useAttrs()console.log(attr)</script>(2)自定hooks自定义hooks转换图片import { onMounted } from 'vue'type Options = { el: string}export default function (options: Options): Promise<{ baseUrl: string }> { return new Promise(resolve => { onMounted(() => { const img: HTMLImageElement = document.querySelector( options.el ) as HTMLImageElement img.onload = () => { resolve({ baseUrl: base64(img) }) } }) const base64 = (el: HTMLImageElement) => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') canvas.width = el.width canvas.height = el.height ctx?.drawImage(el, 0, 0, canvas.width, canvas.height) return canvas.toDataURL('image/jpg') } })}使用hooks<script setup lang="ts">import BASE64 from './hooks'BASE64({ el: '#img' }).then(resolve => { console.log(resolve.baseUrl)})</script>(3)第三方hooks安装依赖yarn add @vueuse/core简单使用<script setup lang="ts">import { ref } from 'vue'import { useDraggable } from '@vueuse/core'const el = ref<HTMLElement | null>(null)// `style` will be a helper computed for `left: ?px; top: ?px;`const { x, y, style } = useDraggable(el, { initialValue: { x: 40, y: 40 }})</script><template> <div ref="el" :style="style" style="position: fixed"> Drag me! I am at {{ x }}, {{ y }} </div></template>组件间通讯1.props父传子父组件<script setup >import HelloWorld from './components/HelloWorld.vue'</script><template> <HelloWorld msg="1"/></template>子组件<script setup>// const props=defineProps(['msg'])const props=defineProps({msg:String})console.log(props.msg)</script>2.emit子传父父组件<script setup >import HelloWorld from './components/HelloWorld.vue'const getuser=(a)=>{ console.log(a)}</script><template> <HelloWorld @getuser="getuser"/></template>子组件<script setup lang="ts">const emit = defineEmits(['getuser'])function buttonClick() { emit('getuser',1)} </script><template> <button @click="buttonClick">传输</button></template>自定义事件事件校检<script setup>const emit = defineEmits({ // 没有校验 click: null, // 校验 submit 事件 submit: ({ email, password }) => { if (email && password) { return true } else { console.warn('Invalid submit event payload!') return false } }})function submitForm(email, password) { emit('submit', { email, password })}</script>3.插槽通讯(1)匿名插槽子组件<template>  <slot></slot></template>父组件<script setup lang="ts">import HelloWorld from "./components/HelloWorld.vue";</script><template> <HelloWorld> 插槽传递 </HelloWorld></template>(2)具名插槽父组件<script setup lang="ts">import HelloWorld from "./components/HelloWorld.vue";</script><template> <HelloWorld>  <template v-slot:btn> <button>具名插槽</button> </template> </HelloWorld></template>子组件<template>  <slot name="btn"></slot></template>(3)作用域插槽理解：数据在子组件的自身，但根据数据生成的结构需要父组件决定。父组件<script setup lang="ts">import HelloWorld from "./components/HelloWorld.vue";const person=[{name:'小明',age:18},{name:'小红',age:20}]</script><template>// 父组件将信息传递给子组件<HelloWorld :person="person">// 子组件接收父组件的插槽中传的值 <template #tab="scope"><tr v-for="(item,index) in scope.person" :key="index"> <th>{{item.name}}</th> <th>{{item.age}}</th> <th><button >编辑</button></th></tr></template></HelloWorld></template>子组件<script setup lang="ts">const props=defineProps<{person:{name:string,age:number}[]}>()</script><template> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr>  // 向作用插槽中传值 <slot name="tab" :person="props.person"></slot> </table></template>4.依赖注入父组件(祖先组件)<template> <div class="App"> <button>我是App</button> <A></A> </div></template><script setup lang="ts">import { provide, ref } from 'vue'import A from './components/Acom.vue'let flag = ref<number>(1)provide('flag', flag)</script>子组件(后代组件)<template> <div> 我是B <div>{{ flag }}</div> <button @click="flag++">+1</button> </div></template><script setup lang="ts">import { inject, ref } from 'vue'// 注入值，默认值(让其可以进行类型推断)const flag = inject('flag', ref(1))</script>5.兄弟传参(1)父组件当成一个桥梁(2)发布订阅模式Bus传递type BusClass = { emit: (name: string) => void on: (name: string, callback: Function) => void}type PramsKey = string | number | symboltype List = { [key: PramsKey]: Array<Function>}class Bus implements BusClass { list: List constructor() { this.list = {} } emit(name: string, ...args: Array<any>) { const evnentName: Array<Function> = this.list[name] evnentName.forEach(fn => { fn.apply(this, args) }) } on(name: string, callback: Function) { const fn: Array<Function> = this.list[name] || [] fn.push(callback) this.list[name] = fn }}export default new Bus()A组件传递数值<script setup lang="ts">import { ref } from 'vue'import Bus from '../utils/Bus'const flag = ref(1)const Pass = () => { Bus.emit('pass', flag)}</script><template> <div> 我是A <div>{{ flag }}</div> <button @click="Pass">Pass</button> </div></template><style scoped lang="less"></style>B组件接收数值<script setup lang="ts">import Bus from '../utils/Bus'import { ref, type Ref } from 'vue'const flag = ref(0)Bus.on('pass', (Flag: Ref<number>) => { console.log(Flag) flag.value = Flag.value})</script><template> <div> 我是B <div>{{ flag }}</div> <button @click="flag++">+</button> </div></template><style scoped lang="less"></style>(3)第三方库mitt安装yarn add mitt全局挂载mitimport { createApp } from 'vue'import { createPinia } from 'pinia'import App from './App.vue'import './assets/main.css'import mitt from 'mitt'const Mit = mitt()const app = createApp(App)// 类型