# 透传的概念

## 说明

指的是父组件传递给子组件的属性，在子组件中并没有通过`props`或`emits`声明或者`v-on`绑定的事件  



## 常见的透传

- `class`
- `style`
- `@[FnName]`


## EG
- Vue中
```vue
<script setup lang="ts">
import AboutView from './views/AboutView.vue';
</script>

<template>
    <AboutView class="aboutByFather" :style="{'width':'100%'}"/>
</template>
```

- 实际DOM渲染
```html
<div id="app" data-v-app="">
	<div data-v-7a7a37b1="" class="About aboutByFather" style="width: 100%">
	    ...
	</div>
</div>
```


# 阻止透传

## 说明

通过创建单独的`script`块并默认导出`inheritAttrs:false`实现禁用透传

- 报错情况：
```ts
Internal server error: [@vue/compiler-sfc] <script> and <script setup> must have the same language type.
```

- 解决方案： 需要保持新增块的`lang`语言和最开始的一致


## EG
- Vue中
```vue
<template>
	<div class="About">
		...
	</div>
</template>



<script setup lang="ts">
	...
</script>

<script lang="ts">
export default {
  inheritAttrs: false
}
</script>
```

- 实际DOM渲染,此时并不会发生透传

```html
<div id="app" data-v-app="">
	<div data-v-7a7a37b1="" class="About">
	...
	<div>
</div>
```


## 手动指定

### 说明
在阻止透传的基础上，可以通过`$attrs`对象获取到除了`props`和`emits`外的所有属性，如： Class、style和`v-on`绑定的事件

### EG

- Vue中

```vue
<template>
	<div class="About">
		<div v-bind="$attrs">
			<input type="text" v-model="name" />
			<p>{{ name }}</p>
		</div>
	</div>
</template>


<script setup lang="ts">
...
</script>

<script lang="ts">
// 使用普通的 <script> 来声明选项
export default {
  inheritAttrs: false
}
</script>
```

- 实际DOM渲染

```html
<div id="app" data-v-app="">
	<div data-v-7a7a37b1="" class="About">
		<div class="aboutByFather" style="width: 100%;">
		...
		</div>
	</div>		
</div>
```

### 在单文件组件中获取

通过`useAttrs`获取，获取的是最新的，但是出于性能考虑这个对象并不是响应式对象。如果需要保持响应式，则需要使用`props`或在`onUpdated()`中每次重新获取

```vue
...

<script setup lang="ts">
import { useAttrs } from 'vue'

const attrs = useAttrs()
</script>

```

VUE3-透传

# 单文件组件和动态组件

## 单文件组件

### 说明

以`.vue`结尾的文件中`script`标签包含`setup`属性称之为单文件组件



### EG
```vue
<template></template>
  
<script setup></script>
  
<style></style>
```


### 单文件组件的优点

#### 属性方法无需手动返回

常规`setup`函数中需要将定义的属性或方法返回,但是单文件组件则不需要

```vue
<template>
	<h1>单文件组件</h1>
	<h4 @click="oldmen">{{name}} is {{age}}</h4>
</template>
  
<script setup>
  import { ref } from "@vue/reactivity";

  const name = ref('xm')
  const age = ref(24)
  const oldmen = ()=> {
	age.value++
  }

</script>
  
<style></style>
```

#### 自动注册子组件

在单文件组件内，只需要import引入子组件后就可以直接在`<template></template>`中使用

```vue
<template>
	<h1>单文件组件</h1>
	<h4 @click="oldmen">{{name}} is {{age}}</h4>
	<ComponentsTestsVue></ComponentsTestsVue>
</template>
  
<script setup>
  import { ref } from "@vue/reactivity";
  import ComponentsTestsVue from "./ComponentsTests.vue";

  const name = ref('xm')
  const age = ref(24)
  const oldmen = ()=> {
	age.value++
  }
</script>
  
<style></style>
```

## 动态组件

> 使用`:is`动态绑定被注册的组件名或导入的组件对象
> 一般建议使用`shallowRef`或者`markRaw`对组件的`Proxy代理`取消掉，节省性能

使用`:is`在多个组件间切换，被切换掉的组件会被卸载，可以通过`<keepalive></keepalive>`组件使得被卸载的组件任然保持活跃状态

### EG
```vue
<template>
	<h1>单文件组件</h1>
	<button v-for="item in comlist" :key="item.name" @click="changeCom(item.id)">{{item.name}}</button>
	<component :is="currentTab.name"></component>
</template>
  
<script setup>
  import { reactive, markRaw } from "vue";
  import ComponentsTestsVue from "./ComponentsTests.vue";
  import ComponentsTests2Vue from "./ComponentsTests2.vue";
  import ComponentsTests3Vue from "./ComponentsTests3.vue";


  const comlist = reactive([
	{'id':1,'name':'test1组件'},
	{'id':2,'name':'test2组件'},
	{'id':3,'name':'test3组件'},
  ])
  let currentTab = reactive({'name': markRaw(ComponentsTestsVue)})

  const changeCom = (v) =>{
	switch (v) {
	  case 1 : 
	  currentTab.name = markRaw(ComponentsTestsVue)
		break;
	  
	  case 2 : 
	  currentTab.name = markRaw(ComponentsTests2Vue)
		break;

	  case 3 : 
	  currentTab.name = markRaw(ComponentsTests3Vue)
		break;

	  default : 
	  currentTab.name = markRaw(ComponentsTestsVue)
		break;
	}
  }

</script>
  
<style></style>
```


# 父子组件传值
### 父组件传值给子组件
#### 说明
  1. 子组件中通过`defineProps`规定要接受的参数，可以搭配`withDefaults`设置默认值
  2. 父组件可以通过`v-bind`传值

#### 注意点
- 所以的`props`都应该符合**单向数据流原则**,即不允许子组件修改父组件传递过来的值
- 对于`props`传递的值为**数组或对象**类型，子组件内无法更改，但是可以更改**数组或对象**内部的值（因为数组和对象都是*引用数据类型*）所以应当避免此类情况

#### EG
```vue
<script lang='ts' setup>
const LoadPageProps = { title: '页面正在加载', subTitle: '请稍等~' }
</script>

<template>
	<LoadPage :title="LoadPageProps.title" :subTitle="LoadPageProps.subTitle"/>
    
    <LoadPage v-bind="LoadPageProps"/>
</template>

<style scope></style>
```


# props
## 说明
对于`props`有两种声明方式

*   运行时声明
    *   可以设置默认值
*   基于类的声明
    *   需要借用编辑器宏withDefaults实现默认值

### 运行时声明
#### 说明
传入`defineProps()`的参数会作为运行时的props选项使用

##### EG
```ts
<script setup lang="ts">

const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})
props.foo // string
props.bar // number | undefined

</script>
```

### 基于类的声明
#### 说明
指的是在使用`defineProps()`是使用泛型函数形式
泛型参数必须为：

*   类型字面量
*   对同一个文件中的接口或对象类型字面量的引用

> 注意点
> 接口或对象字面类型可以包含从其他文件导入的类型引用，但是泛型参数本身不能是一个导入的类型
> 对于`.vue`文件是单独编译的，并不会抓取分析源类型，所以暂时不支持

#### EG
```
<script setup lang="ts">
const props = defineProps<{foo:string,Bar?:Number}>()
props.foo // string
props.Bar // number | undefined


// 配合接口使用
interface props_interface {
  foo: string,
  Bar?: number
}
const props = defineProps<props_interface>()
props.foo // string
props.Bar // number | undefined
</script>
```

#### 设置默认值
通过编辑器宏`withDefaults`实现

```ts
<script setup lang="ts">
// 配合接口使用
interface props_interface {
  foo: string,
  Bars?: number
}
const props = withDefaults(defineProps<props_interface>(),{
  foo: 'hello world',
  Bars: 13
})
props.foo // string
props.Bars // number
</script>
```

#### 解构写法
> 需要更改`vite.config.ts`配置

```
    // 插件配置
    plugins: [
      vue({
        reactivityTransform: true      
      })
    ],
```

```ts
<script setup lang="ts">
// 对 defineProps() 的响应性解构
// 默认值会被编译为等价的运行时选项
const { name, count = 100 } = defineProps<Props>()
</script>
```



# 子组件触发自定义事件
## emits
### 说明
用于组件的`emits`标注类型
### 注意点
宏`defineEmits`必须在`setup`的顶级作用域下，不能在子函数中

### 单文件组件中使用
```ts
<script setup lang="ts">
// 对emits标注类型
// 运行时声明
const emit = defineEmits(['change', 'update'])
function changeChildren() {
  emit('change',)
}

// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

function changeChildren() {
  emit('change') // const emit: (e: "change", id: number) => void (+1 overload)
}

</script>
```

![defineEmits](https://cos.dwxzbz.com/vue3/andTsUse/20221020212155.png)


# 组件注册
## 全局注册
### 说明
即在`main.ts`中注册
### 特点
- 全局注册的组件可以在任意组件中使用
### EG
```ts
import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)
// app.component(MyComponent)
```

## 局部注册
### 说明
在单文件组件中引入的子组件会自动注册，无需手动注册
```vue
<script setup>
import NoData from './NoData.vue'
</script>

<template>
  <NoData />
</template>
```

## 全局注册和局部注册的差别
- 全局注册的组件即使没有使用到，但是在打包时并不会被自动移除,任然出现在打包后的JS文件中
- 全局注册的组件在项目庞大时可能导致依赖关系混乱，影响项目的长期可维护性

VUE3-组件基础知识

## 模板引用的用途
就是为了获取`DOM`元素操作`DOM`



## 获取实例
### 获取单个DOM元素
#### 说明
只能通过声明变量的方式获取组件ref

#### 注意点
1.  变量名称必须与ref设置的名称一致
2.  通过`[变量名].value`获取DOM元素
3.  必须在DOM渲染完成后获取DOM元素，否则就是null

#### EG
```
<template>
    <div ref="childrenCom" @click="getDom">实例dom</div>
</template>
  
<script setup>
  import { ref } from "vue";

  // 组件实例
  let childrenCom = ref(null)

  const getDom = () => {
    console.log('组件实例', childrenCom.value)
  }

</script>
  
<style>
  
</style>
```

### 获取循环的DOM元素
> 对应的`ref`包含的值为一个数组，将在元素被挂载后包含对应整个列表的所有元素
**ref 数组并不保证与源数组相同的顺序**


```
<template>
   <div ref='getDivDom' v-for="item in list" :data-id="item.id"></div> 
</template>
<script setup>
import { ref} from 'vue'
const divDomList = ref([]);
 
const getDivDom = el=>{
    if(el){
        divDomList.set(el.dataset['id'],el) 
    }
}
 
// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素 
</script>
```

### 函数模板引用
指的是`ref`值为一个函数，函数默认第一个参数为元素引用
```
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
```


### 获取组件实例的DOM元素
```
<template>
   <swiper @swiper='getSwiper'></swiper > 
</template>
<script setup>
import swiper from 'swiper'
import { ref} from 'vue'
const swiperDom= ref(null);
 
const getSwiper= el=>{
    swiperDom.value = el;
}
</script>
```

## 调用子组件方法
### 说明
使用`<script lang='ts' setup></script>`的组件其内部的属性或方法默认是**私有**的，父组件无法访问其中的任何东西，必须由子组件通过`defineExpose`宏暴露出来

### EG
1、父组件
```
<template>
  <div>
    <h1>父组件</h1>
    <com-two @click="getComTwo" ref="comtwo"></com-two>
  </div>
</template>

<script setup>
import ComTwo from '@/components/ComTwo.vue'
import { ref } from '@vue/reactivity'
const comtwo = ref(null)
const getComTwo = ()=>{
  console.log('子组件实例', comtwo.value)
  comtwo.value.getMsg()
}
</script>

<style scoped>

</style>
```

2、子组件
> 必须将需要提供的方法属性通过`defineExpose`暴露出去，父组件才可以访问

```
<template>
  <div>
    <h4>我是子组件</h4>
  </div>
</template>

<script setup>
  import {defineExpose} from 'vue'
  const getMsg = ()=>{
    console.log('我是子组件的事件，我被触发了')
  }

  defineExpose ({
    getMsg
  })
</script>

<style scoped>

</style>
```

## 为组件模板引用标注类型
### 说明
为了配合`ts`使用，常常需要标注对应的组件实例的类型

### 实现
#### 在单文件组件中标注类型  
通过`typeof`得到子组件的类型，再通过`ts`内置工具类型`InstanceType`获取其实例类型
```vue
<template>
  <div>
    <h1>父组件</h1>
    <com-two @click="getComTwo" ref="comtwo"></com-two>
  </div>
</template>

<script lang='ts' setup>
import ComTwo from '@/components/ComTwo.vue'
import { ref } from '@vue/reactivity'
const comtwo = ref<InstanceType <typeof ComTwo> | null>(null)
const getComTwo = ()=>{
  console.log('子组件实例', comtwo.value)
  comtwo.value.getMsg()
}
</script>

<style scoped>

</style>
```

如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用 `ComponentPublicInstance`。这只会包含所有组件都共享的属性，比如 `$el`
> [参考](https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs)

```ts
import { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'
const child = ref<ComponentPublicInstance | null>(null)
```

VUE3-模板引用

# watch
## watch可以监听的值
  可以是响应式ref或者计算属性、响应式对象、getter函数、多个`数据源`组合成的数组  



## vue2中的watch和vue3中的watch的区别

> vue2中methods中可以通过this.属性名访问vue3中setup中的数据，watch也可以监听Vue3中的数据变化
> vue3中watch默认开启深度监听

## 监听单个数据

### 语法
从vue中引入，且在setup中作为函数调用

```ts
import {watch} from "vue";

setup{
    
    ...
    watch("要监听的数据",(更改之后的值，更改之前的值)=>{})
    ...
}
```


### 监听多个数据

### 语法
若需要监听多个数据，多个数据发生变化后都执行同一个事件。则watch第一个参数可以传入数组，用于监听多个数据发生变化
此时回调事件中新值和旧值都是数组类型

```ts
import {watch} from "vue";

setup{
    
    ...
    watch(["要监听的数据1","要监听的数据2"],(更改之后的值，更改之前的值)=>{})
    ...
}
```


## 监听对象

### 注意点

**默认开启深度监听**，对于引用类型，内存地址指向是不变的。所以watch监听的新值和旧值是一样的；

### 特点

1.  监听整个对象，无法获取到旧值
2.  若必须需要新值和旧值，则watch第一个参数必须为函数，函数返回值为需要监听的对象中的某个值（只检测此属性）;若需要监测多个，则采用数组写法，内部写多个函数，函数返回值为需要监测的对象的某个属性

### 注意点

若需要监听对象中的某个对象的属性，则此时深度监听不到，需要手动开始深度监听，watch添加第三个参数{deep\:true}

### Eg
```ts
watch(()=>people.hobby,(n,o)=>{
  console.log("people变化了",n,o)
},{deep:true})
```


## watch内的函数立即执行与深度监听

### 开启watch内的函数立即执行

watch中第三个参数作为配置项除了传入`deep:true`开启深度监听，还可以添加`immediate:true`实现watch内的函数立即执行

### Eg
```
watch(()=>people.hobby,(n,o)=>{
  console.log("people变化了",n,o)
},{deep:true,immediate:true})
```

## 回调的时机
### 说明
都在`vue`组件更新之前被调用（即：在回调中访问的`DOM`都是`vue`更新之前的状态）,若需要在回调中访问更新后的`DOM`可以采用`flush:'post'`选项指定

```ts
watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})
```

对于`watchEffect`可以采用`flush:'post'`或者直接采用`watchPostEffect`

```ts
import { watchPostEffect } from 'vue';
watchPostEffect(() => { /* 在 Vue 更新后执行 */ })
```


# watchEffect
## 区别
### 和watch的区别
1.  watchEffect默认立即执行，并且追踪器依赖
2.  watch需要指明监听的数据源，而watchEffect不需要指定数据源，方法中用到了什么就监听什么

### 和computed的区别
* computed注重值，必须返回一个值；而watchEffect注重过程，不需要写返回值

## 类比React的useEffect
同样都是组件挂载后和更新后触发
watchEffect自动追踪依赖，而useEffect需要手动指定

## 注意点
*   watchEffect默认不能直接监听对象，不是深度监听
*   watchEffect仅会在其同步执行期间，才追踪依赖。在使用异步回调时，只有在第一个await正常工作前访问到的属性才会被追踪
*   watchEffect追踪依赖的数据需要为响应式数据，不然不会执行

## EG
```vue
<template>
    <h1 @click="changeProple">{{people}}</h1>
</template>

<script>
import {reactive,watchEffect} from "vue";

export default {
  name: 'HelloWorld',

  setup(){

    let people = reactive({
      name:"xm",
      hobby:{
        gender:0,
        food:"chicken",
        love:{
          gender:0,
          age:18
        }
      }
    })
    function changeProple(){
      people.hobby.love.age = 24
    }


    watchEffect(()=>{
      console.log("watchEffect",people.hobby.love.age)
    })

    return {
      people,
      changeProple,
    }
  },
  
}
</script>

<style scoped>
</style>

```

VUE3-监听器

# 说明

都需要作为方法且在setup中使用，且需要从vue中引入



## 组件创建时

| Vue2中生命周期    | Vue3中生命周期 |
| ------------ | --------- |
| beforeCreate | setup     |
| create       | setup     |

## 组件挂载时

| Vue2中生命周期   | Vue3中生命周期     |
| ----------- | ------------- |
| beforeMount | onBeforeMount |
| mounted     | onMounted     |

### onBeforeMount

#### 说明
组件挂载前
### onMounted
#### 说明  
组件挂载后，可以访问DOM

## 数据修改时
| Vue2中生命周期   | Vue3中生命周期      |
| ----------- | -------------- |
| beforUpdate | onBeforeUpdate |
| updated     | onUpdated      |

> 只有视图更新后，onBeforeUpdate、onUpdated生命周期才走

### onBeforeUpdate
#### 说明

在组件因响应式状态变更更新DOM之前被调用

### onUpdated

#### 说明

在组件因响应式状态变更更新DOM之后被调用

## 组件卸载时

| Vue2中生命周期     | Vue3中生命周期       |
| ------------- | --------------- |
| beforeDestory | onBeforeUnmount |
| destroyed     | onUnmounted     |

## keep-alive

| Vue2中生命周期   | Vue3中生命周期     |
| ----------- | ------------- |
| activated   | onActivated   |
| deactivated | onDeactivated |

## 捕获错误

| Vue2中生命周期      | Vue3中生命周期       |
| -------------- | --------------- |
| errorCaputered | onErrorCaptured |

### 说明

用来捕获子级组件错误
```ts
setup(){
	...  
	onErrorCaptured((err)=>{
		console.log("error",err)
	})
	...
}
```

## EG
```vue
<template>
	<h1 @click="changeNum">{{ num }}</h1>
	<h1 @click="changeProple">{{people.hobby.love.age}}</h1>
</template>

<script>
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,ref, reactive} from "vue";

export default {
  name: 'HelloWorld',

  setup(){
	console.log("setup执行了")
	let num = ref(1)
	function changeNum(){
	  num.value = 10
	}

	let people = reactive({
	  name:"xm",
	  hobby:{
		gender:0,
		food:"chicken",
		love:{
		  gender:0,
		  age:18
		}
	  }
	})
	function changeProple(){
	  people.hobby.love.age = 24
	}

	onBeforeMount(()=>{
	   console.log("组件挂载前")
	})
	onMounted(()=>{
	  console.log("组件挂载后")
	})
	onBeforeUpdate(()=>{
	  console.log("组件状态更新DOM更新之前")
	})
	onUpdated(()=>{
	  console.log("组件状态更新DOM更新之后")
	})

	return {
	  num,
	  changeNum,
	  people,
	  changeProple,
	}
  },
  
}
</script>

<style scoped>
</style>


/*
  setup执行了
  组件挂载前
  组件挂载后
  
  /* 更新 
	  组件状态更新DOM更新之前
	  组件状态更新DOM更新之后
  */

*/

```