vue总结

1 setup

vue3的特色就是compostion api，而setup就是一个使用compostion api的地方，setup函数只会被调用一次，可以相当于beforecreated 和created生命周期，但其实setup调用时组件实例已经生成。
setup(props, context)，setup中不能通过this绑定实例，故只能通过第一个参数porps来接受外部组件传入的值，另一个是context,它是一个对象，最常用的属性是 emit, 用来代替this.$emit，还有attrs，用来接收props没有定义但是外部却传入来的值。
setup通过return返回一个对象，让其可以在模板上使用

props emits

props定义依旧跟vue2一样，而emits是vue3推荐我们加的，如

emits: ['a'],
setup(props, context){
context.emits('a')
}

将我们要emit的函数名字放到该数组中。

响应式数据

ref 一般赋予简单变量，也可赋予对象。
reactive只能赋予对象，不能赋予简单变量
在setup中通过.value获取值，而模板直接使用即可，有帮我们做.value处理。
ref可作用于dom,可以定义一个ref的变量然后直接作用于dom上，就可以获取该dom，一般用来获取子组件。ts的话有一个InstanceType来获取组建的类型，如

  const refModal = ref<InstanceType<typeof PageModal>>();

reactive用的倒比较少。因为通过ref基本可以完成大部分开发。
reactive就是将整个对象响应式，若解构出来就不是响应式的值了，故可以使用toRefs将其包裹起来，原理就是将属性一个个变成ref对象。
toRef就是只能将一个属性变成ref对象并返回。
所以props一般也不能解构，会破坏响应性。

生命周期

setup相当于beforecreated created 而其他的生命周期可以通过onMounted,
onBeforeMount…来使用

import { onMounted, defineComponent } from 'vue'
export default defineComponent ({
setup(){
	onMounted(()=>{
	console.log('组件mounted')
})
}
})

computed watch watchEffect

computed不像vue2那样，而是传入一个函数，返回一个值，
如图

  const Data = computed(() =>
      store.getters["system/pageListData"](props.pageName)
    );

返回的是一个ref对象，但是computed会根据里面的依赖，一旦里面的值改变，就会响应更新Data。
watch也不像vue2那样，
使用

 watch(
      search,
      (newValue) => {
        //组件v-model的语法糖就是:model-value @update:modelValue
        // 如 <A  v-model='a'></A> 等同于 <A @update:modelValue="xx" :model-value="a"></A>
        emit("update:modelValue", newValue);
      },
      { deep: true }
    );

第一个参数可以是函数，也可以是对象，也可以是数组，第三个参数用来配置对象，如深度监听，第一次执行。
watchEffect会自动收集依赖，不需要第一个参数，但是回默认执行一次，因为必须第一个执行才能收集依赖。

 watchEffect(()=>{
      console.log(a.value, 'a改变');
    })

如，第一次执行就会收集a的依赖。

组件之间的传值

一共有
1 props emits
2 ref
3 vuex
4 localstorage sessionsotrage
5 events 事件总线
6 …

路由

vue3的vue-router提供了Hooks用法，以前是this.$ router
this.$ route,现在都是通过useRouter, useRoute
如

const route = useRoute()
const router = usrRouter()
console.log(route.pathname)
router.push('/test/')

通过

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

createRouter创建router实例，
通过router.addRouter创建动态路由

第一个参数可以是父路由的name属性。
路由首位
全局：
beforeEach 跳转前调用 next用法已废弃，现在使用return用法
return的值有：

//false 不进行导航
// undefined 进行默认导航
// url 跳到对应的url
//对象 类似于router.push({path: '/login', query:...})

afterEach:跳转后调用
页面守卫：
onBeforeRouteLeave 当前组件离开前触发
onBeforeRouteUpdate 当前组件更新触发

状态管理库vuex

vuex的用法跟vue2出入不大，只不过提供了一个hooks
useStore

const store = useStore()

通过store.dispatch, store.state.xx来获取值。一般我们使用action等可以封装成computed然后返回，因为setup内部没有this帮助我们绑定stroe,所以得手动绑定。
其次就是namespaced属性，加上这个属性，子模块必须通过正常路劲才能访问得到。

插槽

vue3插槽通过template配合。
内部只要

<slot name="a" :row="传出去的值"></stlo>

外部使用插槽

<template #a="row">
{{row.row}}
</template>

通过#a=“传出来的值”，就可以使用slot,而传出来的值默认被一个对象的row属性包裹着，如上图，得通过row.row才能获取传出来的字符串。

未完待续。。。。。