Vue3 + vite + Ts + pinia + 实战 + 源码 +electron（1）

知识点

        type关键字可以定义类型 type Shop = {name:string,num:number}

        双问号运算符null ?? []         返回空数组

const a = null
const b =undefined
console.log(a ?? []); //当a为undefined和null时返回右边的
console.log(b ?? []);

一、setup的选项式api和组合式api

选项式api

<script lang='ts'>
export default{
  setup(){
    const name:string = "123"
    return{
      name
    }
  }
}
</script>

组合式api就是将选项式api给封装了常用

<script setup lang='ts'>
const name: string = "123"
</script>

二、ref全家桶

ref绑定响应式数据所有响应式数据

<script setup lang='ts'>
import { ref } from 'vue';
const name= ref("1312323") 
</script>

Ref接口绑定数据加上类型限定

<script setup lang='ts'>
import { ref,Ref } from 'vue';
const name:Ref<String> = ref("123") 
</script>

isRef判断一个类型是否是ref类型用的不多

<script setup lang='ts'>
import { ref,Ref,isRef } from 'vue';
const name:Ref<String> = ref("123") 
console.log(isRef(name)); //true
</script>

shallowRef 浅的refref = triggerRef + shallowRef

<script setup lang='ts'>
import { shallowRef } from 'vue';
const son = shallowRef({name:"zs"}) 
son.value.name="12321"
</script>

5.customRef自定义Ref用的不多

三、Reactive全家桶

reactive 引用类型 Array Object Map Set

数组赋值可以使用解构和push赋值或者使用对象存数组

readonly标识只能读取不能修改

shallowReactive浅层的

四、toRef、toRefs toRaw

toRef如果原始对象是非响应式的就不会更新视图 数据是会变的如果原始对象是响应式的是会更新视图并且改变数据的

const obj = reactive({bat:"123"})
const state = toRef(obj, 'bar')

toRefs可以帮我们批量创建ref对象主要是方便我们解构使用

const obj = reactive({
   foo: 1,
   bar: 1
})
 
let { foo, bar } = toRefs(obj)

toRaw将响应式对象转化为普通对象

const obj = reactive({
   foo: 1,
   bar: 1
})

const state = toRaw(obj)

五、computed计算属性

computed返回来的就是ref响应式类型的数据。

函数形式注意这个监听的是ref对象

import { ref,computed } from 'vue';
let price = ref(0)
let m = computed<string>(()=>{
  return "$"+price.value
})
price.value = 500

对象形式注意这个是监听computed之后的对象

<script setup lang='ts'>
import { ref, computed } from 'vue';
let price = ref<number | string>(0)
let m = computed({
  get: () => {
    return price.value
  },
  set: (value) => {
    price.value = value+"$"
  }
})
m.value = 100
</script>

购物车案例

<template>

  <div>
    <table width="800px" border="1px">
      <tr>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in data" :key="index">
        <td align="center">{{ item.name }}</td>
        <td align="center"><button @click="addOrSub(item, false)">-</button>{{ item.num }}<button
            @click="addOrSub(item, true)">+</button></td>
        <td align="center">{{ item.price }}</td>
        <td align="center"><button @click="deleteItem(index)">删除</button></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td align="center">总价{{ $total }}</td>
      </tr>
    </table>
  </div>

</template>

<script setup lang='ts'>
import { reactive, computed } from 'vue';

type Shop = {
  name: string,
  num: number,
  price: number
}

const data = reactive<Shop[]>([
  {
    name: "裤子",
    num: 1,
    price: 100
  },
  {
    name: "衣服",
    num: 1,
    price: 200
  },
  {
    name: "鞋子",
    num: 1,
    price: 300
  },
])

const addOrSub = (item: Shop, type: boolean) => {
  if (item.num > 1 && !type) {
    item.num--
  }
  if (item.num < 99 && type) {
    item.num++
  }
}

const deleteItem = (index: number) => {
  data.splice(index, 1) //删除一个元素
}

const $total = computed<number>(()=>{
  return data.reduce((pre,cur)=>{
    return pre + cur.num * cur.price
  },0)
})

</script>

六、watch侦听器

watch 需要侦听特定的数据源并在单独的回调函数中执行副作用

watch第一个参数监听源

watch第二个参数回调函数cbnewVal,oldVal

watch第三个参数一个options配置项是一个对象{

immediate:true //是否立即调用一次

deep:true //是否开启深度监听

监听一个ref

let age = ref(0)
watch(age,(newVal,oldVal)=>{console.log(newVal,oldVal)},{immediate:true})

监听多个ref

import { reactive, watch,ref } from 'vue';
let age1 = ref(0)
let age2 = ref(0)
watch([age1,age2],(newVal,oldVal)=>{console.log(newVal,oldVal)},{immediate:true})

监听对象是没有用的返回结果都是一样的

监听对象的一个属性返回即可

import { reactive, watch, ref } from 'vue';
let son = reactive({
  name: {
    age: 18
  }
})
watch(()=>son.name.age, (newVal, oldVal) => { console.log(newVal, oldVal) }, { immediate: true })

七、watchEffect

立即执行传入的一个函数同时响应式追踪其依赖并在其依赖变更时重新运行该函数。

import { ref, watchEffect } from 'vue'
let message1 = ref<string>('')
let message2 = ref<string>('')
let stop = watchEffect((oninvalidate) => {
  // oninvalidate 就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖
  oninvalidate(() => {

  })
  console.log('message1', message1.value);
  console.log('message2', message2.value);
},{
    flush:"post", //post组件渲染之后,pre组件渲染之前sync同步
    onTrigger () {
        //调试
    }
})

//停止监听
stop()

八、组件与生命周期

组件导入import A from "路径"        这样导入之后就可以直接用了因为vue3装箱了

onBeforeMount()

在组件DOM实际渲染安装之前调用。在这一步中根元素还不存在。

onMounted()

在组件的第一次渲染后调用该元素现在可用允许直接DOM访问

onBeforeUpdate()

数据更新时调用发生在虚拟 DOM 打补丁之前。

onUpdated()

DOM更新后updated的方法即会调用。

onBeforeUnmount()

在卸载组件实例之前调用。在这个阶段实例仍然是完全正常的。

onUnmounted()

卸载组件实例后调用。调用此钩子时组件实例的所有指令都被解除绑定所有事件侦听器都被移除所有子组件实例被卸载。

<script setup lang='ts'>
import {onMounted } from 'vue'
onMounted(()=>{
  console.log(13);
})
</script>

 九、父子之间传参

父组件给子祖传传值

        父亲组件代码向子组件传递一个数据title="活着"。传递了一个title 字符串类型是不需要v-bind

<template>
  <div>
    <Child title="活着"></Child>
  </div>
</template>

        子组件接收值

        方式一TS特有方式

<template>{{ title }}</template>
<script setup lang='ts'>
defineProps<{
    title:string
}>()
</script>

        方式二JS方式

<template>{{ title }}</template>
<script setup>
defineProps({
    title:{
        type:String,
        default:"默认值"
    }
})
</script>

        方式一TS设置默认值方法withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值

type Props = {
    title?: string,
    data?: number[]
}
withDefaults(defineProps<Props>(), {
    title: "张三",
    data: () => [1, 2, 3]
})

子组件给父组件传值

<script setup lang="ts"> 
const emit = defineEmits(['on-click'])
 
//如果用了ts可以这样两种方式
// const emit = defineEmits<{
//     (e: "on-click", name: string): void
// }>()
const clickTap = () => {
    emit('on-click', "数据")
}
</script>

父组件接收

<template>
    <Child @on-click="getName"></Child>
</template>
<script setup lang='ts'>
import Child from './components/Child.vue';
const getName = (name:string)=>{
  console.log("儿子穿过来的值"+name);
}
<script/>

 子组件传递数据给父组件  defineExpose

        我们从父组件获取子组件实例通过ref

 <Menu ref="menus"></Menu>
//这样获取是有代码提示的
 const menus = ref<InstanceType<typeof menus>>()

        这时候父组件想要读到子组件的属性可以通过 defineExpose暴露

const list = reactive<number[]>([4, 5, 6])
 
defineExpose({
    list
})

十、全局组件、局部组件动态组件

全局注册完之后其他页面直接使用。无需注册

import Card from './components/Card/index.vue'
 
createApp(App).component('Card',Card).mount('#app')

局部组件import layoutMain from "./Content.vue"

动态渲染组件使用component标签通过is属性来决定渲染那个数据

<component is="Card"></component>

 动态渲染调优定义组件的数据字符串使用ShallowRef包裹

十一、插槽全家桶

匿名插槽

父组件
<Child>
  <template v-slot>
    <div>我是默认插槽</div>
  </template>
</Child>

子组件
<div>
   <slot>没有数据默认显示</slot>
</div>

具名插槽

父组件
<Dialog>
   <template v-slot:header>
       <div>1</div>
   </template>
   <template v-slot>
       <div>2</div>
   </template>
</Dialog>

子组件
<slot name="header"></slot>
<slot></slot>

父组件插槽简写

<Dialog>
  <template #header>
     <div>1</div>
  </template>
  <template #default>
     <div>2</div>
  </template>
</Dialog>

作用域插槽

子组件
  <slot :data="item"></slot>

父组件
<template #default="{ data }">
    <div>{{ data }}</div>
</template>

动态插槽

父组件
 <Dialog>
   <template #[name]>
      <div>23</div>
   </template>
 </Dialog>

const name = ref('header')