【vue3】-【pinia】-【组件间通信】-【插槽】-【组件间通信】-【插槽】-【API】

CaraYQ

已于 2024-02-24 17:30:53 修改

阅读量604

点赞数 9

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-01-16 21:58:43 首次发布

本文链接：https://blog.csdn.net/CaraYQ/article/details/135630200

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

pinia

搭建pinia环境

一、第一步：npm install pinia
二、第二步：操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'

/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)

/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

存储、读取数据

一、Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它，它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。具体编码：src/store/count.ts

   // 引入defineStore用于创建store
   import {defineStore} from 'pinia'
   
   // 定义并暴露一个store
   export const useCountStore = defineStore('count',{
     // 动作
     actions:{},
     // 状态
     state(){
       return {
         sum:6
       }
     },
     // 计算
     getters:{}
   })

具体编码：src/store/talk.ts

   // 引入defineStore用于创建store
   import {defineStore} from 'pinia'
   
   // 定义并暴露一个store
   export const useTalkStore = defineStore('talk',{
     // 动作
     actions:{},
     // 状态
     state(){
       return {
         talkList:[
           {id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},
        		{id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},
           {id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}
         ]
       }
     },
     // 计算
     getters:{}
   })

二、组件中使用state中的数据

<template>
  <div class="count">
    <h2>当前求和为：{{ countStore.sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref,reactive } from "vue";
  // 引入对应的useXxxxxStore
  import {useCountStore} from '@/store/count'
  // 调用useXxxxxStore得到对应的store
  const countStore = useCountStore()

  // 以下两种方式都可以拿到state中的数据
  console.log('@@@',countStore.sum)
  // console.log('@@@',countStore.$state.sum)

/*   
let obj = reactive({
    a:1,
    b:2,
    c:ref(3)
  })
  let x = ref(9)
  console.log(obj.a)
  console.log(obj.b)
  console.log(obj.c)// c是由reactive包裹的ref，在获取c的值时，不用.value，直接obj.c即可
*/

  // 数据
  let n = ref(1) // 用户选择的数字
  // 方法
  function add(){
    
  }
  function minus(){
    
  }
</script>

<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkStore.talkList" :key="talk.id">{{talk.title}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
  import {reactive} from 'vue'
  import axios from "axios";
  import {nanoid} from 'nanoid'
  import {useTalkStore} from '@/store/loveTalk'

  const talkStore = useTalkStore()
  
  // 方法
  async function getLoveTalk(){
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    // 从请求中解构出data，从data中解构出content并将其命名为title
    // let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    // let obj = {id:nanoid(),title}
    // 放到数组中
    // talkList.unshift(obj)
  }
</script>

修改数据（三种方式）

src/store/count.ts代码：

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
  // actions里面放置的是一个一个的方法，用于响应组件中的“动作”
  actions:{
    increment(value){
      console.log('increment被调用了',value)
      if( this.sum < 10){
        // 修改数据（this是当前的store）
        this.sum += value
      }
    }
  },
  // 真正存储数据的地方
  state(){
    return {
      sum:6,
      school:'atguigu',
      address:'宏福科技园'
    }
  }
})

在组件中的三种修改方法：

<template>
  <div class="count">
    <h2>当前求和为：{{ countStore.sum }}</h2>
    <h3>欢迎来到:{{ countStore.school }}，坐落于：{{ countStore.address }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref,reactive } from "vue";
  // 引入useCountStore
  import {useCountStore} from '@/store/count'
  // 使用useCountStore，得到一个专门保存count相关的store
  const countStore = useCountStore()

  // 数据
  let n = ref(1) // 用户选择的数字
  // 方法
  function add(){
    // 第一种修改方式：直接修改
    // countStore.sum += 1

    // 第二种修改方式：使用$patch批量修改
    /* countStore.$patch({
      sum:888,
      school:'尚硅谷',
      address:'北京'
    }) */

    // 第三种修改方式：调用actions
    countStore.increment(n.value)

  }
  function minus(){
    
  }
</script>

storeToRefs

看上面的代码发现，在模板中使用countStore里面的state时，都需要写countStore.
在这里插入图片描述
我们能不能通过解构赋值将要用的数据从countStore中取出来，在模板中使用的时候直接写sum、school、address： const {sum,school,address} = ref(countStore)，会发现在模板中使用的sum、school、address并不是响应式的，因为const {sum,school,address}是新创建的变量，并不是countStore中响应式的变量，那我们又会想到使用： const {sum,school,address} = toRefs(countStore)，将解构出来的数据变成响应式的，但是toRefs(countStore)会将countStore中所有的东西都变成响应式的，包括actions、getters，这完全没有必要，此时可以用storeToRefs只将countStore中的数据变成响应式的

<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}</h2>
    <h3>欢迎来到:{{ school }}，坐落于：{{ address }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref,reactive,toRefs } from "vue";
  import {storeToRefs} from 'pinia'
  // 引入useCountStore
  import {useCountStore} from '@/store/count'
  // 使用useCountStore，得到一个专门保存count相关的store
  const countStore = useCountStore()
  // storeToRefs只会关注sotre中数据，不会对方法进行ref包裹
  const {sum,school,address} = storeToRefs(countStore)// 使用storeToRefs转换countStore，随后解构
  // console.log('!!!!!',storeToRefs(countStore))

  // 数据
  let n = ref(1) // 用户选择的数字
  // 方法
  function add(){
    countStore.increment(n.value)
  }
  function minus(){
    countStore.sum -= n.value
  }
</script>

getters

一、当state中的数据，需要经过处理后再使用时，可以使用getters配置，在src/store/count.ts中追加getters配置

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
  // actions里面放置的是一个一个的方法，用于响应组件中的“动作”
  actions:{
    increment(value:number){
      console.log('increment被调用了',value)
      if( this.sum < 10){
        // 修改数据（this是当前的store）
        this.sum += value
      }
    }
  },
  // 真正存储数据的地方
  state(){
    return {
      sum:3,
      school:'atguigu',
      address:'宏福科技园'
    }
  },
  getters:{
    bigSum:state => state.sum * 10,
    upperSchool():string{
      return this.school.toUpperCase()
    }
  }
})

组件中读取数据：

<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}，放大10倍后：{{ bigSum }}</h2>
    <h3>欢迎来到:{{ school }}，坐落于：{{ address }}，大写：{{ upperSchool }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref,reactive,toRefs } from "vue";
  import {storeToRefs} from 'pinia'
  // 引入useCountStore
  import {useCountStore} from '@/store/count'
  // 使用useCountStore，得到一个专门保存count相关的store
  const countStore = useCountStore()
  // storeToRefs只会关注sotre中数据，不会对方法进行ref包裹
  const {sum,school,address,bigSum,upperSchool} = storeToRefs(countStore)
  // console.log('!!!!!',storeToRefs(countStore))

  // 数据
  let n = ref(1) // 用户选择的数字
  // 方法
  function add(){
    countStore.increment(n.value)
  }
  function minus(){
    countStore.sum -= n.value
  }
</script>

$subscribe

通过 store 的 $subscribe() 方法侦听store中 state 的变化

talkStore.$subscribe((mutate,state)=>{
// mutate：本次修改的信息
// state：真正的数据
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})

store组合式写法

src/store/count.ts中代码如下：

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'

export const useTalkStore = defineStore('talk',()=>{
  // talkList就是state
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList') as string) || []
  )

  // getATalk函数相当于action
  async function getATalk(){
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(),title}
    // 放到数组中
    talkList.unshift(obj)
  }
  return {talkList,getATalk}
})

组件通信

Vue3组件通信和Vue2的区别：

移出事件总线，使用mitt代替。
vuex换成了pinia。
把.sync优化到了v-model里面了。
把$listeners所有的东西，合并到$attrs中了。
$children被砍掉了。

props

props是使用频率最高的一种通信方式，常用与：父 ↔ 子。

若 父传子：属性值是非函数。
若 子传父：属性值是函数。
父组件：

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>汽车：{{ car }}</h4>
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<!--
		父组件通过props向子组件传递数据car和sendToy方法，
		只要子组件调用了这个sendToy方法，父组件就会调用自己的getToy方法
		-->
		<Child :car="car" :sendToy="getToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import {ref} from 'vue'
	// 数据
	let car = ref('奔驰')
	let toy = ref('')
	// 方法
	function getToy(value:string){
		toy.value = value
	}
</script>

子组件

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>玩具：{{ toy }}</h4>
		<h4>父给的车：{{ car }}</h4>
		<button @click="sendToy(toy)">把玩具给父亲</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import {ref} from 'vue'
	// 数据
	let toy = ref('奥特曼')
	// 声明接收props
	defineProps(['car','sendToy'])
</script>

自定义事件

自定义事件常用于：子 => 父。

注意区分好：原生事件、自定义事件。

原生事件：
事件名是特定的（click、mosueenter等等）
事件对象$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
自定义事件：事件名是任意名称，事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！

父组件：

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<!-- 
		给子组件Child绑定事件 
		send-toy是自定义事件，需要在子组件中声明并且由子组件通过emit('send-toy'）触发，子组件一旦触发，父组件就会调用自身的saveToy方法
		-->
    <Child @send-toy="saveToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from './Child.vue'
	import { ref } from "vue";
	// 数据
	let toy = ref('')
	// 用于保存传递过来的玩具
	function saveToy(value:string){
		console.log('saveToy',value)
		toy.value = value
	}
</script>

子组件

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>玩具：{{ toy }}</h4>
		<!-- 触发send-toy事件，并向saveToy方法传递参数toy -->
		<button @click="emit('send-toy',toy)">测试</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import { ref } from "vue";
	// 数据
	let toy = ref('奥特曼')
	// 声明事件
	const emit =  defineEmits(['send-toy'])
</script>

mitt

与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。

安装mitt：npm i mitt
新建文件：src\utils\emitter.ts

// 引入mitt 
import mitt from "mitt";

// 创建emitter，emitter能绑定事件、触发事件、解绑事件
const emitter = mitt()

/*
	// 以下是使用示例，在实际代码中，绑定事件、解绑事件的代码应该在接收数据的组件中，
	// 触发事件的代码应该写在提供数据的组件中
  // 绑定事件
  emitter.on('abc',(value)=>{
    console.log('abc事件被触发',value)
  })
  emitter.on('xyz',(value)=>{
    console.log('xyz事件被触发',value)
  })

  setInterval(() => {
    // 触发事件
    emitter.emit('abc',666)
    emitter.emit('xyz',777)
  }, 1000);

  setTimeout(() => {
    // 清理事件
    emitter.all.clear()
  }, 3000); 
*/

// 创建并暴露mitt
export default emitter

接收数据的组件中：绑定事件、同时在销毁前解绑事件：

import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";

// 绑定事件
emitter.on('send-toy',(value)=>{
  console.log('send-toy事件被触发',value)
})

onUnmounted(()=>{
  // 解绑事件
  emitter.off('send-toy')
})

提供数据的组件，在合适的时候触发事件

import emitter from "@/utils/emitter";

function sendToy(){
  // 触发事件，emitter.emit()的第二个参数是值，用于向send-toy的回调函数传值
  emitter.emit('send-toy',toy.value)
}

v-model

一、实现 父↔子 之间相互通信。
二、前序知识 —— v-model的本质

   <!-- 在html标签上使用v-model指令 -->
   <input type="text" v-model="userName">
   
   <!-- v-model的本质是下面这行代码 -->
   <input 
     type="text" 
     :value="userName" 
     @input="userName =(<HTMLInputElement>$event.target).value"
   >

三、组件标签上的v-model的本质：:moldeValue+ update:modelValue事件。

   <!-- 组件标签上使用v-model指令 -->
   <AtguiguInput v-model="userName"/>
   
   <!-- 组件标签上v-model的本质 -->
   <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>

针对:modelValue="userName"：向子组件AtguiguInput传递了modelValue参数，且其值为userName，那么在子组件AtguiguInput中应该先接收这个参数：defineProps(['modelValue'])，再在模版中使用：在input输入框中：:value="modelValue"
针对@update:model-value="userName = $event"：相当于给子组件AtguiguInput传递了一个自定义事件@update:model-value，那么在子组件AtguiguInput中应该先接声明这个事件：defineEmits(['update:model-value'])，再在用户输入时触发这个事件，并将用户输入的内容传给父组件：@input="emit('update:model-value',$event.target.value)"，一旦子组件触发了这个事件，父组件会执行userName = $event，$event就是子组件传过来的$event.target.value值

综上，AtguiguInput组件代码如下：

   <template>
     <div class="box">
       <!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->
   		<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->
       <input 
          type="text" 
          :value="modelValue" 
          @input="emit('update:model-value',$event.target.value)"
       >
     </div>
   </template>
   
   <script setup lang="ts" name="AtguiguInput">
     // 接收props
     defineProps(['modelValue'])
     // 声明事件
     const emit = defineEmits(['update:model-value'])
   </script>

$event到底是啥，什么时候能.target？

对于原生事件，$event就是事件对象，能.target
对于自定义事件，$event就是触发事件时所传递的数据，不能.target

那么前述@input="emit('update:model-value',$event.target.value)"中input是原生事件，想要获取值要$event.target.value，而<AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>中update:model-value是自定义事件（注意只能是这个自定义事件），所以取值直接写$event

四、也可以更换modelValue，例如改成abc

   <!-- 也可以更换value，例如改成abc-->
   <AtguiguInput v-model:abc="userName"/>
   
   <!-- 上面代码的本质如下 -->
   <AtguiguInput :abc="userName" @update:abc="userName = $event"/>

AtguiguInput组件中：

   <template>
     <div class="box">
       <input 
          type="text" 
          :value="abc" 
          @input="emit('update:abc',$event.target.value)"
       >
     </div>
   </template>
   
   <script setup lang="ts" name="AtguiguInput">
     // 接收props
     defineProps(['abc'])
     // 声明事件
     const emit = defineEmits(['update:abc'])
   </script>

五、如果modelValue可以更换，那么就可以在组件标签上多次使用v-model：<AtguiguInput v-model:abc="userName" v-model:xyz="password"/>

$attrs

用于实现当前组件的父组件，向当前组件的子组件通信（爷→孙），如果爷爷组件向孙子组件传了事件，那么孙组件可以通过调用该事件更改爷爷组件中的值。

$attrs是一个对象，包含所有父组件传入的标签属性，但会自动排除props中声明的属性（可以认为声明过的 props 被子组件自己“消费”了）

父组件：

<template>
  <div class="father">
    <h3>父组件</h3>
    <!-- v-bind="{x:100,y:200}"等同于：x=100 y=200 -->
		<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from "vue";
	let a = ref(1)
	let b = ref(2)
	let c = ref(3)
	let d = ref(4)

	function updateA(value){
		a.value = value
	}
</script>

子组件，原封不动的将所有数据传给孙组件：

<template>
	<div class="child">
		<h3>子组件</h3>
		<GrandChild v-bind="$attrs"/>
	</div>
</template>

<script setup lang="ts" name="Child">
	import GrandChild from './GrandChild.vue'
</script>

孙组件：

<template>
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a：{{ a }}</h4>
		<h4>b：{{ b }}</h4>
		<h4>c：{{ c }}</h4>
		<h4>d：{{ d }}</h4>
		<h4>x：{{ x }}</h4>
		<h4>y：{{ y }}</h4>
		<button @click="updateA(666)">点我更新A</button>
	</div>
</template>

<script setup lang="ts" name="GrandChild">
	defineProps(['a','b','c','d','x','y','updateA'])
</script>

`$refs`、`$parent`

$refs：用于父→子。，值为对象，包含所有被ref属性标识的DOM元素或组件实例。
$parent：用于子→父。，值为对象，当前组件的父组件实例对象。
父组件：

<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产：{{ house }}</h4>
		<button @click="changeToy">修改Child1的玩具</button>
		<button @click="changeComputer">修改Child2的电脑</button>
		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
		<Child1 ref="c1"/>
		<Child2 ref="c2"/>
	</div>
</template>

<script setup lang="ts" name="Father">
	import Child1 from './Child1.vue'
	import Child2 from './Child2.vue'
	import { ref,reactive } from "vue";
	let c1 = ref()
	let c2 = ref()

	// 数据
	let house = ref(4)
	// 方法
	function changeToy(){
		c1.value.toy = '小猪佩奇'
	}
	function changeComputer(){
		c2.value.computer = '华为'
	}
	function getAllChild(refs:{[key:string]:any}){
		console.log(refs)
		for (let key in refs){
			refs[key].book += 3
		}
	}
	// 向外部提供数据，之后子组件就可以访问该组件的house数据
	defineExpose({house})
</script>

child1：

<template>
  <div class="child1">
    <h3>子组件1</h3>
		<h4>玩具：{{ toy }}</h4>
		<h4>书籍：{{ book }} 本</h4>
		<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
  </div>
</template>

<script setup lang="ts" name="Child1">
	import { ref } from "vue";
	// 数据
	let toy = ref('奥特曼')
	let book = ref(3)

	// 方法
	function minusHouse(parent:any){
		parent.house -= 1
	}

	// 把数据交给外部，父组件才能操作子组件的数据
	defineExpose({toy,book})

</script>

child2：

<template>
  <div class="child2">
    <h3>子组件2</h3>
		<h4>电脑：{{ computer }}</h4>
		<h4>书籍：{{ book }} 本</h4>
  </div>
</template>

<script setup lang="ts" name="Child2">
		import { ref } from "vue";
		// 数据
		let computer = ref('联想')
		let book = ref(6)
		// 把数据交给外部
		defineExpose({computer,book})
</script>

当使用ref定义了一个响应式数据，对数据进行读取时，什么时候该`.value`？

<script setup lang="ts">
	// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
let obj = reactive({
		a:1,
		b:2,
		c:ref(3)
	})
	let x = ref(4)

	console.log(obj.a)
	console.log(obj.b)
	console.log(obj.c)
	console.log(x)
</script>

provide、inject

一、用于实现祖孙组件直接通信
二、具体使用：

在祖先组件中通过provide配置向后代组件提供数据
在后代组件中通过inject配置来声明接收数据

三、具体编码：

【第一步】父组件中使用provide提供数据

<template>
     <div class="father">
       <h3>父组件</h3>
       <h4>资产：{{ money }}</h4>
       <h4>汽车：{{ car }}</h4>
       <button @click="money += 1">资产+1</button>
       <button @click="car.price += 1">汽车价格+1</button>
       <Child/>
     </div>
   </template>
   
   <script setup lang="ts" name="Father">
     import Child from './Child.vue'
     import { ref,reactive,provide } from "vue";
     // 数据
     let money = ref(100)
     let car = reactive({
       brand:'奔驰',
       price:100
     })
     // 用于更新money的方法
     function updateMoney(value:number){
       money.value += value
     }
     // 提供数据，此处提供了数据money，还提供了修改数据的方法updateMoney
     // {money,updateMoney}是对象的简写形式：{money:money,updateMoney:updateMoney}，
     // 注意不能写成money:money.value，否则就是爷爷组件取money的值传给孙组件，数据就不是响应式的了
     provide('moneyContext',{money,updateMoney})// 实际上，这一步操作之后，不管是孙组件还是子组件，父组件的所有后代组件都可以通过inject接收数据了
     provide('car',car)
   </script>

注意：子组件中不用编写任何东西，是不受到任何打扰的

【第二步】孙组件中使用inject配置项接受数据。

<template>
     <div class="grand-child">
       <h3>我是孙组件</h3>
       <h4>资产：{{ money }}</h4>
       <h4>汽车：{{ car }}</h4>
       <button @click="updateMoney(6)">点我</button>
     </div>
   </template>
   
   <script setup lang="ts" name="GrandChild">
     import { inject } from 'vue';
     // 注入数据，inject第二个参数是（第一个参数）的默认值
    let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})
     let car = inject('car')
</script>

插槽

默认插槽

父组件中：

<Category title="今日热门游戏">
<!-- Category里面的内容（也就是下面ul标签及其所有内容）会替换Category组件中<slot></slot>这行代码，这就是默认插槽 -->
	<ul>
		<li v-for="g in games" :key="g.id">{{ g.name }}</li>
	</ul>
</Category>

子组件中：

<template>
  <div class="category">
    <h2>{{title}}</h2>
    <!-- 如果使用Category组件时没有传入任何东西（即前述父组件里没有ul标签），那么默认展示下面这个“默认内容” -->
    <slot>默认内容</slot>
  </div>
</template>

<script setup lang="ts" name="Category">
  defineProps(['title'])
</script>

具名插槽

当子组件中存在多个插槽时，可以为每个插槽指定name属性作为唯一标识：

<template>
  <div class="category">
    <slot name="s1">默认内容1</slot>
    <slot name="s2">默认内容2</slot>
  </div>
</template>

父组件在使用子组件时，可以通过v-slot:s1或者#s2指明和子组件的哪个插槽匹配

<Category title="今日热门游戏">
	<template v-slot:s1>
		<ul>
        	<li v-for="g in games" :key="g.id">{{ g.name }}</li>
       	</ul>
	</template>
    <template #s2>
		<a href="">更多</a>
	</template>
</Category>

作用域插槽

数据在组件自身，但根据数据生成的结构需要组件的使用者（父组件）来决定。新闻数据在子组件中，但使用数据所遍历出来的结构由父组件决定
子组件：

		<template>
           <div class="category">
             <h2>今日游戏榜单</h2>
             <!-- 将数据传递给组件的使用者 -->
             <slot :games="games" a="哈哈" name="game"></slot>
           </div>
         </template>
   
         <script setup lang="ts" name="Category">
           import {reactive} from 'vue'
           let games = reactive([
             {id:'asgdytsa01',name:'英雄联盟'},
             {id:'asgdytsa02',name:'王者荣耀'},
             {id:'asgdytsa03',name:'红色警戒'},
             {id:'asgdytsa04',name:'斗罗大陆'}
           ])
         </script>

父组件：

<Game v-slot="params">
<!-- 
	如果子组件的slot指定了name属性值，父组件在使用时，可以通过以下方式指定插槽
	<Game v-slot:game="params"> 
    <Game #game="params"> 
-->
	<ul>
	    <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
	</ul>
</Game>

API

shallowRef 与 shallowReactive

`shallowRef`

用于创建一个响应式数据，但只对顶层属性进行响应式处理，他只跟踪引用值的变化，不关心值内部的属性变化。用法：let myVar = shallowRef(initialValue);

<template>
	<div class="app">
		<h2>求和为：{{ sum }}</h2>
		<h2>名字为：{{ person.name }}</h2>
		<h2>年龄为：{{ person.age }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePerson">修改整个人</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,shallowRef,shallowReactive } from 'vue'

	let sum = shallowRef(0)
	let person = shallowRef({
		name:'张三',
		age:18
	})
	
	// 因为shallowRef只对顶层属性进行响应式处理，他只跟踪引用值的变化，所以只有操作xx.value才有效
	function changeSum (){// 生效
		sum.value += 1
	}
	function changeName (){// 不生效
		person.value.name = '李四'
	}
	function changeAge (){// 不生效
		person.value.age += 1
	}
	function changePerson (){// 生效
		person.value = {name:'tony',age:100}
	}
</script>

`shallowReactive`

用于建一个浅层响应式对象，使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的，使用shallowReactive后，对象的顶层属性是响应式的，但嵌套对象的属性不是。用法：const myObj = shallowReactive({ ... });

<template>
	<div class="app">
		<h2>汽车为：{{ car }}</h2>
		<button @click="changeBrand">修改品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeEngine">修改发动机</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,shallowRef,shallowReactive } from 'vue'
	let car = shallowReactive({
		barnd:'奔驰',
		options:{
			color:'红色',
			engine:'V8'
		}
	})
	// 使用shallowReactive后，对象的顶层属性是响应式的，但嵌套对象的属性不是，
	// 所以只有操作car.barn和car.options才生效
	function changeBrand(){// 生效
		car.barnd = '宝马'
	}
	function changeColor(){// 不生效
		car.options.color = '紫色'
	}
	function changeEngine(){// 不生效
		car.options.engine = 'V12'
	}
</script>

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。
当你只关心数据整个有没有变化，而不关心数据内部的变化时使用

readonly 与 shallowReadonly

readonly(响应式数据)：响应式数据都是只读
shallowReadonly(响应式数据)：响应式数据的第一层为只读，深层次的数据依旧可以操作

`readonly`

用于创建一个对象的深只读副本。

   const original = reactive({ ... });
   const readOnlyCopy = readonly(original);// readonly(响应式数据)，注意接收的是响应式数据不是响应式数据的值

特点：

对象的所有嵌套属性都将变为只读。
任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。

应用场景：

创建不可变的状态快照。
保护全局状态或配置不被修改。

<template>
	<div class="app">
		<h2>当前sum1为：{{ sum1 }}</h2>
		<h2>当前sum2为：{{ sum2 }}</h2>
		<h2>当前car1为：{{ car1 }}</h2>
		<h2>当前car2为：{{ car2 }}</h2>
		<button @click="changeSum1">点我sum1+1</button>
		<button @click="changeSum2">点我sum2+1</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,readonly } from "vue";

	let sum1 = ref(0)
	let sum2 = readonly(sum1)// readonly接收的是响应式数据不是响应式数据的值
	
	function changeSum1(){// 生效
		sum1.value += 1
	}
	function changeSum2(){// 不生效
		sum2.value += 1 //sum2是不能修改的
	}
</script>

`shallowReadonly`

与 readonly 类似，但只作用于对象的顶层属性。

const original = reactive({ ... });
const shallowReadOnlyCopy = shallowReadonly(original);

特点：

只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。
适用于只需保护对象顶层属性的场景。

<template>
	<div class="app">
		<h2>当前car1为：{{ car1 }}</h2>
		<h2>当前car2为：{{ car2 }}</h2>
		<button @click="changeBrand2">修改品牌(car2)</button>
		<button @click="changeColor2">修改颜色(car2)</button>
		<button @click="changePrice2">修改价格(car2)</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,shallowReadonly } from "vue";
	
	let car1 = reactive({
		brand:'奔驰',
		options:{
			color:'红色',
			price:100
		}
	})
	let car2 = shallowReadonly(car1)
	// 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。
	function changeBrand2(){// 不生效
		car2.brand = '宝马'
	}
	function changeColor2(){// 生效
		car2.options.color = '绿色'
	}
	function changePrice2(){// 生效
		car2.options.price += 10
	}
</script>

toRaw 与 markRaw

`toRaw`

用于获取一个响应式对象的原始对象， toRaw 返回的对象不再是响应式的，不会触发视图更新。

官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。
何时使用？在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象

	import { reactive,toRaw,markRaw,isReactive } from "vue";
   
   /* toRaw */
   // 响应式对象
   let person = reactive({name:'tony',age:18})
   // 原始对象
   let rawPerson = toRaw(person)
   
   /* markRaw */
   let citysd = markRaw([
     {id:'asdda01',name:'北京'},
     {id:'asdda02',name:'上海'},
     {id:'asdda03',name:'天津'},
     {id:'asdda04',name:'重庆'}
   ])
   // 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了
   let citys2 = reactive(citys)
   console.log(isReactive(person))
   console.log(isReactive(rawPerson))
   console.log(isReactive(citys))
   console.log(isReactive(citys2))

`markRaw`

标记一个对象，使其永远不会变成响应式的。

例如使用mockjs时，为了防止误把mockjs变为响应式对象，可以使用 markRaw 去标记mockjs

	/* markRaw */
   let citys = markRaw([
     {id:'asdda01',name:'北京'},
     {id:'asdda02',name:'上海'},
     {id:'asdda03',name:'天津'},
     {id:'asdda04',name:'重庆'}
   ])
   // 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了
   let citys2 = reactive(citys)

customRef

用于创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制。就比如说，vue提供的ref在检测到响应式数据改变后会立马渲染到视图上，假如你希望响应式数据改变1s后，再渲染到视图上，可以自定义一个ref
实现防抖效果（useSumRef.ts）：

import {customRef } from "vue";

export default function(initValue:string,delay:number){
  let msg = customRef((track,trigger)=>{
    let timer:number
    return {
      get(){
        track() // 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新
        return initValue
      },
      set(value){
        clearTimeout(timer)
        timer = setTimeout(() => {
          initValue = value
          trigger() //通知Vue数据msg变化了
        }, delay);
      }
    }
  }) 
  return {msg}
}

组件中使用：

<template>
	<div class="app">
		<h2>{{ msg }}</h2>
		<input type="text" v-model="msg">
	</div>
</template>

<script setup lang="ts" name="App">
	import {ref} from 'vue'
	import useMsgRef from './useMsgRef'

	// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
	// let msg = ref('你好')

	// 使用useMsgRef来定义一个响应式数据且有延迟效果
	let {msg} = useMsgRef('你好',2000)
</script>

Teleport

用于将组件html结构移动到指定位置的技术。
比如现在要实现：点击按钮，弹出弹框，弹框位于浏览器中上方，App.vue：

<template>
  <div class="outer">
    <h2>我是App组件</h2>
    <br>
    <Modal/>
  </div>
</template>

<script setup lang="ts" name="App">
  import Modal from "./Modal.vue";
</script>

<style>
  .outer{
    background-color: #ddd;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 0 10px;
    width: 400px;
    height: 400px;
    filter: saturate(200%);// 加上这行代码后，Modal.vue组件的position定位会参考父组件（App.vue），而不是浏览器窗口
  }
  img {
    width: 270px;
  }
</style>

Modal.vue

<template>
  <button @click="isShow = true">展示弹窗</button>
  <div class="modal" v-show="isShow">
      <h2>我是弹窗的标题</h2>
      <p>我是弹窗的内容</p>
      <button @click="isShow = false">关闭弹窗</button>
    </div>
</template>

<script setup lang="ts" name="Modal">
  import {ref} from 'vue'
  let isShow = ref(false)
</script>

<style scoped>
  .modal {
    width: 200px;
    height: 150px;
    background-color: skyblue;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 0 5px;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 20px;
    margin-left: -100px;
  }
</style>

于是乎，将Modal.vue的模板代码放在teleport标签中，指定to属性的值，就会把代码移动到body标签中，position不再受saturate的影响

<teleport to='body' >
<!-- 将下面这个div的内容（也就是把teleport标签包裹的内容）移动到body标签中 -->
    <div class="modal" v-show="isShow">
      <h2>我是一个弹窗</h2>
      <p>我是弹窗中的一些内容</p>
      <button @click="isShow = false">关闭弹窗</button>
    </div>
</teleport>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验。假如子组件中有异步任务，你可以在父组件中使用Suspense包裹子组件，指定在子组件的异步任务没执行完之前，渲染一些东西额。使用步骤：

异步引入组件
使用Suspense包裹子组件，并配置好default 与 fallback

<template>
  <div class="app">
    <h2>我是App组件</h2>
    <Suspense>
    <!-- v-slot:default表示<Child/>异步加载完成后再渲染 -->
      <template v-slot:default>
        <Child/>
      </template>
      <!-- v-slot:fallback表示<Child/>异步加载未完成时渲染的内容 -->
      <template v-slot:fallback>
       	<h2>加载中......</h2>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts" name="App">
  import {Suspense} from 'vue'
  import Child from './Child.vue'
</script>