Vue3知识点

使用vite创建vue3

npm create vite

或者 yarn create vite

composition API

• ref
• reactive
• torefs
• watch
• watch Effact
• computed

setup

它是组件内使用composition API的入口，执行时机是在beforecreate之前执行的

• setup的参数
  • props:值为对象，包含：组件外部传递过来，且组件内部声明接受了的属性
  • context：上下文对象
    • attrs:值为对象，包含：组件外部传递过来，但没有在props声明接收了的函数
    • slots：收到的插槽内容，相当于this.$slots
    • emit:分发自定义事件的函数，相当于this.$emit

ref函数：定义普通类型数据

vue3中定义响应式数据：const name : ref(‘小明’)；在js中操作：name.value=‘张三’

reactive函数：定义对象类型响应式数据

let obj = reactive({
   type:'前端工程师'，
   salary:'30k'
)
function change(){
    obj.type='后端工程师' //vue3可以直接增删改查数据
    this.$set(obj,'type','后端工程师')//vue2中想要修改数据并渲染必须要用$set,而vue3中可以直接改
}

reactive对比ref

• 从定义数据角度对比

  1）.ref用来定义：基本类型数据

  2）.reactive用来定义：对象（或数组）类型数据

  3）.ref也可以用来定义对象（或数组）类型数据，它内壁会自动通过reactive转为代理对象

• 从原理角度对比

  1）.ref通过object.defineProperty()的get与set来实现响应式（数据劫持）

  2）reactive通过使用proxy来实现数据劫持，并通过Reflect操作源对象内部的数据

• 从使用角度对比

  • ref定义数据：操作数据需要.value， 读取数据时模板中直接读取不需要.value
  • reactive定义数据：操作数据与读取数据都不需要.value

computed计算属性

setup(){
    let person = reactive({
        firstName:'张',
        lastName:'三',
    })
    //计算属性简写形式（没有考虑计算属性被修改的情况）
    person.name = computed(()=>{
        return person.firstName+'-'+'person.lastName'
    })
    //计算属性完整写法（考虑读和写）
    person.name = computed(()=>{
        get(){
            return person.firstName+'-'+'person.lastName'
        },
        set(value){  //value是新的值
            const nameArr = value.split('-')
            person.firstName = name[0]
            person.lastName = name[1]
        }
    })
    return{
        firstName,
        lastName,
        name
    }
}

父子传参

父传子：
在父组件中
子组件中用 defineProps({data:string})接受
子传父：

//在子组件中通过defineEmits派发一个事件
const emit = defineEmits(['test']) 
const clickTap = ()=>{
    emit('test',数据) //派发名为test
}
//在父组件中
<Son @test="回调函数"></Son>
在回调函数中第一个参数就是传过来的数据

兄弟间传值

//1. 安装mitt npm install mitt
//2.在main.js中注册挂载到全局
import mitt from 'mitt'
app.config.globalProperties.$mitt = new mitt()
// 发送数据组件
<button @click="sendMitt">$mitt发送数据</button>
function sendMitt() {
				proxy.$mitt.emit('mittFn', 数据)
			}
//接受数据
proxy.$mitt.on('mittFn', (res) => {
				console.log(res) //res就是传过来的数据
			})

配置全局组件

//在main.ts中配置
import Card from './components/Card/index.vue'
createApp(App).component('Card',Card).mount('#app')
//component中第一参数是组件名称，第二个参数是组件实例

动态组件

//让多个组件使用同一个挂载点，并动态切换，这就是动态组件
import A from './A.vue'
import B from './B.vue'
 <component :is="A"></component> // 通过js切换组件
 //如果你把组件实例放到Reactive Vue会给你一个警告runtime-core.esm-bundler.js
 //修改如下：
const tab = reactive<Com[]>([{
    name: "A组件",
    comName: markRaw(A)
}, {
    name: "B组件",
    comName: markRaw(B)
}])

异步组件 Suspense

// 在父组件中引入异步组件
import {  defineAsyncComponent } from 'vue'
const Dialog = defineAsyncComponent(() => import('../../components/Dialog/index.vue'))
// <suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。
     <Suspense>
            <template #default>
                <Dialog></Dialog>
            </template>
            <template #fallback>
                <div>loading...</div>
            </template>
</Suspense>

Teleport传送组件

Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；例如

<teleport to="body">
      <div class="teleport">我是teleport</div>
    </teleport>
    //可以通过to将div放到body里面，也可以使用class或者id放到指定的dom节点里面

keep-alive缓存组件

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。
keep-alive对应两个独有的生命周期 onActivated 和 deactivated

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

keep-alive生命周期的变化：
初次进入时：OnMounted 和 onActivated
退出时：deactivated
再次进入时只会触发：onActivated
只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

<keep-alive :include="[]" :exclude="" :max=""></keep-alive>
// include数组中可以填入组件名称name，:include里面包含的组件才会被缓存，没有包含的不会被缓存
:exclude则相反; :max 则最大缓存的组件个数

transition 动画组件

自定义 transition 过度效果，你需要对transition组件的name属性自定义。并在css中写入对应的样式
transition标签中n的ame对应的css标签的设置
name-enter-from：定义进入过渡的开始状态。
name-enter-active：定义进入过渡生效时的状态
name-enter-to：定义进入过渡的结束状态
name-leave-from：定义离开过渡的开始状态。
name-leave-active：定义离开过渡生效时的状态
name-leave-to：离开过渡的结束状态。

 <transition name='fade'>
         <div v-if='flag' class="box"></div>
       </transition>
    //对应css   
.fade-enter-from{
   background:red;
   width:0px;
   height:0px;
   transform:rotate(360deg)
}
//开始过度了
.fade-enter-active{
  transition: all 2.5s linear;
}
//过度完成
.fade-enter-to{
   background:yellow;
   width:200px;
   height:200px;
}
//离开的过度
.fade-leave-from{
  width:200px;
  height:200px;
  transform:rotate(360deg)
}
//离开中过度
.fade-leave-active{
  transition: all 1s linear;
}
//离开完成
.fade-leave-to{
  width:0px;
   height:0px;
}

也可以通过自定义过渡class类名；通过自定义class结合animate css动画库

 <transition
            leave-active-class="animate__animated animate__bounceInLeft"
            enter-active-class="animate__animated animate__bounceInRight"
        >
            <div v-if="flag" class="box"></div>
        </transition>

结合gsap动画库使用GreenSock

vue3全局定义函数和变量

由于Vue3没有prototype属性，是使用app.config.globalProperties代替，然后去定义变量和函数
vue2中： vue.prototype.$http = ()=>{}

vue3中： const app = createApp(APP)
app.config.globalProperties.$http = () => {}

CSS样式穿透

vue中使用了scoped后，会在dom结构上会以date-v-hash的方式加在标签上，以保证唯一，不会样式冲突，从而达到样式私有模块化。
在使用UI组件库的时候，很多时候需要改它默认的样式，就需要用到样式穿透：
在样式中使用 :deep(input) 这样就可以了

Pinia 全局状态管理工具 代替Vuex

Pinia.js 有如下特点：

完整的 ts 的支持；
足够轻量，压缩后的体积只有1kb左右;
去除 mutations，只有 state，getters，actions；
actions 支持同步和异步；
代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的
无需手动添加 store，store 一旦创建便会自动添加；
支持Vue3 和 Vue2

使用：
1.安装 npm install pinia
2.main.js 引入注册
import {createPinia} from ‘pinia’
const store = createPinia()
app.use(store)
3.初始化仓库

import { defineStore } from 'pinia'
export const useTestStore = defineStore(Names, {
     state:()=>{
         return {
             current:1
         }
     },
     //类似于computed 可以帮我们去修饰我们的值
     getters:{
     },
     //可以操作异步 和 同步提交state
     actions:{
     }
})

4.组件中使用 State是允许直接修改值的

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.current}}
          </div>
     </div>
</template>
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
    Test.current++
}
</script>
//批量修改
const Add = () => {
    Test.$patch({
       current:200,
       age:300
    })
//批量修改函数形式
const Add = () => {
    Test.$patch((state)=>{
       state.current++;
       state.age = 40
    })
}
//通过原始对象修改整个实例：$state您可以通过将store的属性设置为新对象来替换store的整个状态，缺点就是必须修改整个对象的所有属性
const Add = () => {
    Test.$state = {
       current:10,
       age:30
    }    
}
// 通过actions修改，在cations中定义方法，然后直接调用actions中的方法
const Add = () => {
     Test.setCurrent()
}

依赖注入（provide/inject）

在父组件中provide注入数据，在所有子孙组件中都能接收到

// 例如在APP.vue组件中
import {provide} from 'vue'
provide('flag',shuju)   // 这样数据就注入完成了，在所有子孙组件中都能接受到
//在子组件中接受数据
import {inject} from 'vue'
let data = inject('flag')  // 这样就拿到了父组件的数据
//当在子组件中修改数据的话，会影响所有子组件中的这个数据

TSX 类似于react写法

1.安装 npm install @vitejs/plugin-vue-jsx -D
2。配置vite.config.ts 、 tsconfig.json

自定义Hooks

优秀的开源库：hooks开源库

useAttrs、useSlots