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

原创已于 2023-02-05 10:52:09 修改

· 915 阅读

2 ·

版权

文章标签：

#前端

于 2023-02-05 10:51:59 首次发布

vue3 专栏收录该内容

3 篇文章

订阅专栏

知识点：

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 ：浅的ref，ref = 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第二个参数回调函数cb（newVal,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')