vue3全记录

1.生命周期

  onBeforeMount (() => {
	console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {
	    console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {
	    console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => {
    	console.log("App ===> 相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
	console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
	    console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

2.Vue3 项目中 vite.config代替vue.config

3.vite.config分包策略

build: {
      cssTarget: 'chrome79',
      brotliSize: true,
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        // experimentalTopLevelAwait: true,
        output:{
          manualChunks(id) {    //分包策略
            if (id.includes('node_modules')) {
              if(id.includes('xlsx')){
                return 'xlsx'
              }
              if(id.includes('mapbox')){
                return 'mapbox'
              }
              return 'vendor';
            }
          }
        }
      },
    }

总结：
代码不复杂，vendor包生成的逻辑封装vite插件的形式
如果用户没有配置 build.rollupOptions.output，使用插件之后就可以分出 vendor 包
如果用户有配置 build.rollupOptions.output，但没有配置 manualChunks，使用插件之后就可以分出 vendor 包
如果用户有配置 build.rollupOptions.output，且有配置 manualChunks，就会以手动分包配置为准，不会生成 vendor 包
vendor 包分包的策略是：模块id名是包含 ‘node_modules’ 的，表示该模块是在node_modules下的，且这个模块不是 css 模块，且这个模块是被静态入口点模块（单页应用的index.html，多页应用下可以有多个）导入的
小结：用户配置了手动分包，就会忽略 vite 提供的 vendor 分包逻辑。

那如果希望在手动分包的基础上还需要 vendor 分包，那么就需要把 vendor 分包的逻辑抄过去就可以了。

4.父组件触发子组件方法：
a.子组件：

//方法暴露
defineExpose({
  FetchDatarule
})

b.父组件：

nextTick(()=> {
  childRef.value.FetchDatarule()
 })

使⽤setup函数应该注意：

1. setup函数中没有this, 因为setup函数在beforeCreated之前就执⾏了
2. setup其本⾝不可以为异步函数
3. setup内可以执⾏await⽅法处理异步问题
4. setup函数接收两个参数，props和context（context包含3个参数attrs,slots,emit）,⽽context是可以被解构的

<script setup="props, context" lang="ts">
    console.log(context.attrs)
    console.log(context.slots)
    console.log(context.emit)
</script>
<script setup="props, { attrs, slots, emit }" lang="ts">
    console.log(attrs)
    console.log(slots)
    console.log(emit)
</script>

6.reactive对比ref——关于.value

使用角度来说：

ref定义的数据：
操作数据 需要.value，在js中；读取数据时，模板中不需要.value

reactive定义的数据：
操作数据与读取数据：均不需要 .value

ref定义的数据用.value的原因：

在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式 来使用；

但是在 setup 函数内部，它依然是一个 ref引用， 所以对其进行操作时，我们依然需要使用 ref.value的方式

7.setup语法糖（很重要）

<template>
    <Foo />
    <div v-click-outside />
</template>
<script setup>
import { defineProps, defineEmit, useContext } from 'vue'; //导入组件直接使用
import Foo from './Foo.vue';
import vClickOutside from 'v-click-outside'; //导入指令直接使用    *导入指令前面必须加v
// 书写组合式 api 就像在正常的 setup 中一般，但是不需要进行手动地进行 return
//const count = ref(0) 也可以这样
ref: count = 1;
const inc = () => {
    // 直接操作变量 不用.value
    count++;
};
// 使用 props
const props = defineProps({
    foo: String
});
//使用 emit
const emit = defineEmits(['update', 'delete']);
// 获取 slots 和 attrs
const { slots, attrs } = useContext();
</script>