vue3 -【Composition API】-【新的组件】

创建Vue3.0工程

使用vue-cli创建

一、官方文档
二、相关指令

1. 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上：vue --version
2. 安装或者升级你的@vue/cli：npm install -g @vue/cli
3. 创建时选择vue3：vue create vue_test
4. 启动：cd vue_test、npm run serve

使用vite创建

一、官方文档
二、vite官网
三、vite：新一代前端构建工具。
四、优势如下：

1. 开发环境中，无需打包操作，可快速的冷启动。
2. 轻量快速的热重载（HMR）。
3. 真正的按需编译，不再等待整个应用编译完成。

五、传统构建与vite构建对比图


六、相关指令：

1. 创建工程：npm init vite-app <project-name>
2. 进入工程目录：cd <project-name>
3. 安装依赖：npm install
4. 运行：npm run dev

分析工程结构

main.js中引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数，工厂函数直接调用，不用new，代码如下：

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

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”，身上的属性和方法没有vm上的那么多)
const app = createApp(App)

//挂载
app.mount('#app')

Vue3组件中的模板结构可以没有根标签

常用Composition API

官方文档

拉开序幕的setup

一、理解：Vue3.0中一个新的配置项，值为一个函数。
二、setup是所有Composition API（组合API）“ 表演的舞台 ”。
三、组件中所用到的：数据、方法等等，均要配置在setup中。
四、setup函数的两种返回值：

1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

五、⚠️注意点：

1. 尽量不要与Vue2.x配置混用
2. Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
   但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
3. 如果有重名，setup优先。
4. setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合，后面再讲）

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>性别：{{sex}}</h2>
  <!-- vue2和vue3中的配置冲突时，以vue3为主 -->
	<h2>a的值是：{{a}}</h2>
	<button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
	<br>
	<br>
	<button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
	<br>
	<br>
	<button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
	<br>
	<br>
	<button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>

</template>

<script>
	// import {h} from 'vue'
	export default {
		name: 'App',
    	//vue2的配置方法也可以用，vue3向下兼容
		data() {
			return {
				sex:'男',
				a:100
			}
		},
		methods: {
			sayWelcome(){
				alert('欢迎来到尚硅谷学习')
			},
      		//vue2中可以读取vue3中的配置
			test1(){
				console.log(this.sex)
				console.log(this.name)
				console.log(this.age)
				console.log(this.sayHello)
			}
		},
		//此处只是测试一下setup，暂时不考虑响应式的问题。
		setup(){
			//数据
			let name = '张三'
			let age = 18
			let a = 200

			//方法
			function sayHello(){
				alert(`我叫${name}，我${age}岁了，你好啊！`)
			}
			function test2(){
				console.log(name)
				console.log(age)
				console.log(sayHello)
        		//vue3中读不出来vue2的配置，建议这两个版本的配置不要混用
				console.log(this.sex)
				console.log(this.sayWelcome)
			}

			//返回一个对象（常用）
			return {
				name,
				age,
				sayHello,
				test2,
				a
			}

			//返回一个函数（渲染函数）
      		/*
      		渲染函数：要返回h函数的返回值
      		h('要把什么元素放到页面','标签体内容')
      		你模板中写的啥已经不重要了，页面展示以渲染函数为主
       		*/
			// return ()=> h('h1','尚硅谷')
		}
	}
</script>

setup的两个注意点

一、在vue2中，父组件Demo标签体中的内容就相当于父组件给子组件传东西了，但是子组件如果不使用slot标签占位，Demo标签体中的内容是不会显示在页面的，此时在子组件实例的$slots中可以获取到Demo标签体中的内容（是个虚拟节点），但是如果在子组件中使用了slot标签，那么那个虚拟节点会转成真实DOM，并替换掉slot标签放在页面中。
二、在vue2中，父组件App.vue给子组件Demo.vue传值，如果子组件不用props接收，那么在子组件实例对象的$attrs身上可以获取到值，在模板中通过$attrs.msg使用，但是这种方式不能对类型进行限制。注意：

1. 如果子组件使用props接收，那么数据存在于子组件实例对象身上，$attrs中就没有数据了
2. 如果子组件不使用props接收，那么数据子组件实例对象身上就没有数据，数据在子组件实例对象的$attrs属性中

三、在vue3中，使用v-slot指定插槽名字，v-slot的值就是插槽的name，不是字符串。父组件App.vue中的代码：

<template>
	<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
		<template v-slot:qwe>
			<span>尚硅谷</span>
		</template>
		<template v-slot:asd>
			<span>尚硅谷</span>
		</template>
	</Demo>
</template>

<script>
	import Demo from './components/Demo'
	export default {
		name: 'App',
		components:{Demo},
		setup(){
			function showHelloMsg(value){
				alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`)
			}
			return {
				showHelloMsg
			}
		}
	}
</script>

四、在vue2中，父组件给子组件传递了数据，子组件可以不用props接收，但是在vue3中必须用props接收，不适用会给你警告
五、在vue3中父组件给子组件绑定了自定义事件，子组件要使用emits声明这个事件
六、setup执行的时机：在beforeCreate之前执行一次且只执行这一次，this是undefined。所以你在setup函数中不能使用this
七、setup接收两个参数：

1. props：存放父组件给子组件传递的数据，数据会被整理成一个对象，对象是响应式的
2. context：对象（普通的对象，不是响应式的），里面有attrs、emit、slots
   （1）attrs：同vue2的$attrs，如果子组件没有使用props接收父组件传过来的数据，那么数据会保存在attrs中
   （2）emit：触发父组件给子组件绑定的自定义事件
   （3）slots：同vue2的$slots，拿到的是虚拟DOM，是插槽中的内容，如果你在子组件中写了slot标签，那么这些虚拟DOM会转换成真实DOM出现在页面上
   子组件Demo.vue中的代码：

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<button @click="test">测试触发一下Demo组件的Hello事件</button>
  <slot name="qwe"></slot>
</template>

<script>
	import {reactive} from 'vue'
	export default {
		name: 'Demo',
		props:['msg','school'],
		emits:['hello'],
		setup(props,context){//在整个工作过程中，只调用一次
			// console.log('---setup---',props)
			// console.log('---setup---',context)
			// console.log('---setup---',context.attrs) //相当于Vue2中的$attrs
			// console.log('---setup---',context.emit) //触发自定义事件的。
			console.log('---setup---',context.slots) //插槽
			//数据
			let person = reactive({
				name:'张三',
				age:18
			})

			//方法
			function test(){
				context.emit('hello',666)//触发父组件给子组件绑定的自定义事件
			}

			//返回一个对象（常用）
			return {
				person,
				test
			}
		}
	}
</script>

ref函数

一、作用：定义一个响应式的数据
二、语法：const xxx = ref(initValue)，如：let name = ref('张三')，把数据使用ref(数据)包一下，数据就变成响应式的了。ref()把’张三’加工一下，加工成了个引用实现（RefImpl）的实例对象，然后存在name中。

如果ref(数据)包裹的数据是一个对象，对象中的每个属性都是响应式的，哪怕对象中的是对象，对象里的对象的每个属性也都是响应式的

1. 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
2. JS中操作数据： xxx.value，即在setup中使用时，本例需要通过name.value获取数据。

xxx.value得到的是由ref函数包裹的数据，如果ref(数据)包裹的数据是一个对象，那么在setup中使用时，需要通过对象.value.键名获取数据。

3. 模板中读取数据：不需要.value，直接：<div>{{xxx}}</div>。本例在模板中使用时，还是使用name，模板发现name是RefImpl的实例对象，会自己去读取他的value属性。

三、⚠️备注：

1. 接收的数据可以是：基本类型、也可以是对象类型。
2. 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
3. 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h3>工作种类：{{job.type}}</h3>
	<h3>工作薪水：{{job.salary}}</h3>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name: 'App',
		setup(){
			// 数据
			let name = ref('张三')
			let age = ref(18)
			let job = ref({
				type:'前端工程师',
				salary:'30K'
			})

			//方法
			function changeInfo(){
        		// console.log(name,age)// 都是RefImpl实例对象，数据保存在实例对象的value属性中
				// name.value = '李四'
				// age.value = 48
				console.log(job.value)
        		/*
        		job.value得到的是由ref函数包裹的数据，此处是个对象：
        		{
					type:'前端工程师',
					salary:'30K'
			  	}
			  	所以要像下面这样更改他们的值
         		*/
				// job.value.type = 'UI设计师'
				// job.value.salary = '60K'
			}

			//返回一个对象（常用）
			return {
				name,
				age,
				job,
				changeInfo
			}
		}
	}
</script>

reactive函数

一、作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
二、语法：const 代理对象= reactive(源对象)，接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
三、reactive定义的响应式数据是“深层次的”，对象中的每个属性都是响应式的，哪怕是对象中的对象的属性。
三、内部基于ES6 的Proxy实现，通过代理对象操作源对象内部数据进行操作。
四、只有reactive函数才能将对象类型的数据变成proxy的实例对象
五、在setup中使用reactive函数包裹的对象时，不用.value，直接用
六、能通过索引值更改数组的值，并且会被vue检测到

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<h3>工作种类：{{person.job.type}}</h3>
	<h3>工作薪水：{{person.job.salary}}</h3>
	<h3>爱好：{{person.hobby}}</h3>
	<h3>测试的数据c：{{person.job.a.b.c}}</h3>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
	import {reactive} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					type:'前端工程师',
					salary:'30K',
					a:{
						b:{
							c:666
						}
					}
				},
				hobby:['抽烟','喝酒','烫头']
			})

			//方法
			function changeInfo(){
        		console.log(person);
				person.name = '李四'
				person.age = 48
				person.job.type = 'UI设计师'
				person.job.salary = '60K'
				person.job.a.b.c = 999
				person.hobby[0] = '学习'
			}

			//返回一个对象（常用）
			return {
				person,
				changeInfo
			}
		}
	}
</script>

reactive对比ref

一、从定义数据角度对比：

1. ref用来定义：基本类型数据。
2. reactive用来定义：对象（或数组）类型数据。

⚠️备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
二、从原理角度对比：

1. ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
2. reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。

三、从使用角度对比：

1. ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
2. reactive定义的数据：操作数据与读取数据：均不需要.value。

Vue3.0中的响应式原理

本节用到的数据：

let person = {
	name:'张三',
	age:18
}

vue2.x的响应式

一、实现原理：

1. 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
2. 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

二、存在问题：

1. 新增属性、删除属性, 界面不会更新。
2. 直接通过下标修改数组, 界面不会自动更新。

三、模拟Vue2中实现响应式

let p = {}
Object.defineProperty(p,'name',{
	configurable:true,
	get(){ //有人读取name时调用
		return person.name
	},
	set(value){ //有人修改name时调用
		console.log('有人修改了name属性，我发现了，我要去更新界面！')
		person.name = value
	}
})
Object.defineProperty(p,'age',{
	get(){ //有人读取age时调用
		return person.age
	},
	set(value){ //有人修改age时调用
		console.log('有人修改了age属性，我发现了，我要去更新界面！')
		person.age = value
	}
})

Vue3.0的响应式

一、实现原理:

1. 通过Proxy（代理）: 拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
2. 通过Reflect（反射）: 对源对象的属性进行操作。
   MDN文档中描述的Proxyproxy与Reflectreflect

二、模拟Vue3中实现响应式

//const p = new Proxy(你想让p代理对哪个对象的操作（源对象）,{})，p是代理对象
const p = new Proxy(person,{
	//有人读取p的某个属性时调用
	get(target,propName){//target：源对象，propName：读的属性名
		console.log(`有人读取了p身上的${propName}属性`)
        //Reflect.get(对象,属性)：获取对象身上的某个属性值
		return Reflect.get(target,propName)
	},
	//有人修改p的某个属性、或给p追加某个属性时调用
	set(target,propName,value){//value：修改的值
		console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
        //Reflect.set(对象,属性,值)：修改对象身上的某个属性值
		Reflect.set(target,propName,value)
	},
	//有人删除p的某个属性时调用
	deleteProperty(target,propName){
		console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
        //Reflect.deleteProperty(对象,属性)：删除对象身上的某个属性
		return Reflect.deleteProperty(target,propName)
	}
})

let obj = {a:1,b:2}
//通过Object.defineProperty去操作，会报错：不能在obj身上重复定义c属性，所以需要用try...catch来捕获错误
/* try {
	Object.defineProperty(obj,'c',{
		get(){
			return 3
		}
	})
	Object.defineProperty(obj,'c',{
		get(){
			return 4
		}
	})
} catch (error) {
	console.log(error)
} */

//通过Reflect.defineProperty去操作，不会报错，但是以第一次的为主。
//Reflect.defineProperty有返回值，返回true代表操作成功，返回false代表操作失败
const x1 = Reflect.defineProperty(obj,'c',{
	get(){
		return 3
	}
})
console.log(x1)
			
const x2 = Reflect.defineProperty(obj,'c',{
	get(){
		return 4
	}
})
//直接通过if判断操作是否成功，进行后续操作
if(x2){
	console.log('某某某操作成功了！')
}else{
	console.log('某某某操作失败了！')
}

计算属性与监视

computed函数

一、与Vue2.x中computed配置功能一致
二、写法

1. 简写：不考虑计算属性被修改的情况

person.fullName = computed(()=>{
	return person.firstName + '-' + person.lastName
})
//或：			
let fullName = computed(()=>{//接收一个函数，普通函数、箭头函数都行。
	// 在setup中放心写箭头函数、普通函数，因为这里面不用this，this为undefined
	//这个函数相当于计算属性的getter
	return person.firstName + '-' + person.lastName//一定要有返回值
})

2. 完整写法：考虑读和写

person.fullName = computed({//接收一个对象
	get(){
		return person.firstName + '-' + person.lastName
	},
	set(value){
		const nameArr = value.split('-')
		person.firstName = nameArr[0]
		person.lastName = nameArr[1]
	}
})

watch函数

一、与Vue2.x中watch配置功能一致
二、本节用到的数据：

let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
	name:'张三',
	age:18,
	job:{
		j1:{
			salary:20
		}
	}
})

三、watch函数监视情况分析：

1. 监视ref所定义的一个响应式数据：watch(监视的变量名,函数(新值,旧值){},{配置对象，可选})，当你监视的变量发生变化后，会调用函数。

watch(sum,(newValue,oldValue)=>{
	console.log('sum变了',newValue,oldValue)
},{immediate:true})

2. 监视ref所定义的多个响应式数据：把要监视的多个响应式数据放在数组中，作为第一个参数传给watch函数，此时，newValue和oldValue都是数组，newValue为[sum的新值,msg的新值]，oldValue为[sum的旧值,msg的旧值]

watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变了',newValue,oldValue)
},{immediate:true})

3. 监视reactive所定义的一个响应式数据的全部属性，监视reactive所定义的对象的所有属性。⚠️注意：
   （1）此处无法正确的获取oldValue，如果你一定要获取oldValue，那么把数据提取出来，单独用ref定义，不要把数据放在对象中
   （2）在vue3中强制开启了深度监视，关不了，在vue3中deep配置无效

watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{deep:false}) //此处的deep配置无效

4. 监视reactive所定义的一个响应式数据中的某个属性：watch函数的第一个参数接收一个箭头函数，箭头函数的返回值是你要监听的属性

watch(()=>person.name,(newValue,oldValue)=>{
	console.log('person的name变化了',newValue,oldValue)
},{immediate:true,deep:true})

5. 监视reactive所定义的一个响应式数据中的某些属性

watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
	console.log('person的name或age变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

6. 特殊情况：监视的对象中的对象，deep配置有效，但无法获取oldValue

watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效

watch监视ref数据的说明

一、watch监听ref定义的基本类型数据时，不用.value，.value是取出值，我们需要监听的是一个结构

watch(sum,(newValue,oldValue)=>{
	console.log('sum的值变化了',newValue,oldValue)
})

二、监听ref定义的对象时，如果这样写（第一个参数传入想监听的对象）：

watch(person,(newValue,oldValue)=>{
	console.log('person的值变化了',newValue,oldValue)
})

那么监听的是一个RefImpl实例对象，数据保存在该实例对象的value中，对象.value是一个proxy实例对象，当你把这个proxy实例对象彻底替换掉了，对象.value指向的地址发生了变化，才会被检测到，如果你只是更改对象中的属性值，是不会被检测到的。所以在监听ref定义的对象时，要写对象.value ，才是监听数据的变化。对象.value是proxy实例对象，说明对象.value是借助reactive函数生成的，所以监视的是reactive定义的数据，reactive定义的数据开启了深层监视。

watch(person.value,(newValue,oldValue)=>{
	console.log('person的值变化了',newValue,oldValue)
})

三、但是你像下面这样开启深度监听，还是能检测到数据的变化

watch(person,(newValue,oldValue)=>{
	console.log('person的值变化了',newValue,oldValue)
},{deep:true})

watchEffect函数

一、本节用到的数据：

let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
	name:'张三',
	age:18,
	job:{
		j1:{
			salary:20
		}
	}
})

二、用watch监听：

watch(sum,(newValue,oldValue)=>{
	console.log('sum的值变化了',newValue,oldValue)
},{immediate:true})

三、watch的套路是：既要指明监视的属性，也要指明监视的回调。
四、watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
五、watchEffect有点像computed：但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
六、watchEffect的用法：watchEffect(函数)：接收一个函数，函数中用到了哪个变量，就监视哪个变量。

watchEffect(()=>{
	const x1 = sum.value
	const x2 = person.job.j1.salary
	console.log('watchEffect所指定的回调执行了')
})

七、watchEffect的执行时机：

1. 一上来就会执行watchEffect函数，不用等值改变才执行，一上来（一执行setup）值变不变都执行
2. 监视的变量发生变化时，会再帮你执行回调函数

生命周期

一、Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有两个被更名：

beforeDestroy改名为beforeUnmount
destroyed改名为unmounted

二、Vue3.0也提供了Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted

三、实例代码：

import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
	name: 'Demo',
	setup(){
		console.log('---setup---')
		/*
		通过组合式API的形式去使用生命周期钩子，但是每个生命周期钩子都要改名。
		如果你通过配置项的形式使用生命周期钩子，setup在beforeCreate和created之前调用，
		现在你要在setup中通过组合式API的形式去使用生命周期钩子，vue3没有为beforeCreate和created提供组合式API，
		beforeCreate和created都相当于setup()。
		 */
		onBeforeMount(()=>{
			console.log('---onBeforeMount---')
		})
		onMounted(()=>{
			console.log('---onMounted---')
		})
		onBeforeUpdate(()=>{
			console.log('---onBeforeUpdate---')
		})
		onUpdated(()=>{
			console.log('---onUpdated---')
		})
		onBeforeUnmount(()=>{
			console.log('---onBeforeUnmount---')
		})
		onUnmounted(()=>{
			console.log('---onUnmounted---')
		})
		return {}
		},
		//通过配置项的形式使用生命周期钩子
	beforeCreate() {
		console.log('---beforeCreate---')
	},
	created() {
		console.log('---created---')
	},
	beforeMount() {
		console.log('---beforeMount---')
	},
	mounted() {
		console.log('---mounted---')
	},
	beforeUpdate(){
		console.log('---beforeUpdate---')
	},
	updated() {
		console.log('---updated---')
	},
	beforeUnmount() {
		console.log('---beforeUnmount---')
	},
	unmounted() {
		console.log('---unmounted---')
	}
}

四、如果通过组合式API的形式去使用生命周期钩子和通过配置项的形式使用生命周期钩子同时存在，执行顺序：setup、beforeCreate、created、onBeforeMount、beforeMount、onMounted、mounted。即：使用组合式API的形式早于使用配置项的形式

自定义hook函数

一、hook本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。
二、自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。
三、新建12_src_自定义hook/hooks/usePoint.js文件用于自定义hook函数

⚠️注意：hook函数的文件名：useXxx.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){//定义hook，把他定义成函数
	//实现鼠标“打点”相关的数据
	let point = reactive({
		x:0,
		y:0
	})

	//实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		//添加事件监听：window.addEventListener('事件名',监听到该事件后执行的回调)
		window.addEventListener('click',savePoint)
	})

	onBeforeUnmount(()=>{
		//移除事件监听：window.removeEventListener('事件名',事件对应的回调)
		window.removeEventListener('click',savePoint)
	})

	return point
}

四、在使用hook函数的组件中：

1. 引入hook函数：import usePoint from '../hooks/usePoint'
2. hook中暴露的是个函数，所以用的时候直接调用，然后会得到函数的返回值，使用返回值即可

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</button>
	<hr>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import {ref} from 'vue'
	import usePoint from '../hooks/usePoint'//引入hook
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let point = usePoint()
			//返回一个对象（常用）
			return {sum,point}
		}
	}
</script>

toRef与toRefs

一、本节用到的数据：

let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
	name:'张三',
	age:18,
	job:{
		j1:{
			salary:20
		}
	}
})

二、以前每次我们展示数据时，都用的person.name，person.age，person.job.j1.salary……每次都要写person.太麻烦了，有没有一种方法让我在这里可以直接写name、age、job.j1.salary

<template>
	<h4>{{person}}</h4>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<h2>薪资：{{person.job.j1.salary}}K</h2>
</template>

1. 如果你在返回对象时，像下面这样写，虽然也可以实现功能且不报错，但是你除了第一次读了person中的属性，后面每次你改变值的时候，改变的都是新弄出来的ref(person.name)这个RefImpl实例对象的value，根本不是person中的属性

return {
	name:ref(person.name),
	age:ref(person.age),
	salary:ref(person.job.j1.salary),
    person,//可以把person返回出去，再把person中的某些属性提取出来返回出去，方便使用
}

2. 返回的对象使用toRef
   （1）toRef的作用：创建一个ref对象，其value值指向另一个对象中的某个属性。简单来说，toRef用于把一个数据变成Ref的
   （2）语法：const 变量名 = toRef(对象,'对象的键')。
   如：const name2 = toRef(person,'name')，把person中的name属性变成ref的，name2是一个RefImpl实例对象，RefImpl实例对象的value属性保存着'张三'，其实value属性是去读了person.name
   （3）应用：要将响应式对象中的某个属性单独提供给外部使用时。

return{
	person,//可以把person返回出去，再把person中的某些属性提取出来返回出去，方便使用
	name:toRef(person,'name'),
	age:toRef(person,'age'),
	salary:toRef(person.job.j1,'salary'),
}

3. 像上面这样把数据一个取出来再用toRef包一下太麻烦，我们可以使用toRefs。
   （1）toRefs与toRef功能一致，但可以批量创建多个ref对象
   （2）语法：toRefs(person)

return{
	person,
	...toRefs(person)//...只能把对象的第一层解构出来，对象中的对象的属性解构不出来。
}

其它 Composition API

shallowReactive与shallowRef

一、shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

let person = shallowReactive({ //只考虑第一层数据的响应式
	name:'张三',
	age:18,
	job:{//里面的不是响应式的
		j1:{
			salary:20
		}
	}
})

二、shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。

let a = shallowRef(0);
console.log(a);//和ref一样

let x = shallowRef({//不对对象进行响应式处理。
	y:0
})

这里，x是个RefImpl实例对象，但是x的value属性是个普通对象，不是proxy实例对象，说明shallowRef把你传入的对象直接拿来用了，没有使用reactive函数包装，所以数据不是响应式的
⚠️注意：x是使用shallowRef生成的，后续不能修改x中的属性值，而是生成新的对象来替换

<button @click="x={y:888}">点我替换x</button>

三、什么时候使用?

1. 如果有一个对象数据，结构比较深，但变化时只是外层属性变化，使用shallowReactive。
2. 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换，使用shallowRef。

readonly与shallowReadonly

一、本节用到的数据：

let sum = ref(0)
let person = reactive({
	name:'张三',
	age:18,
	job:{
		j1:{
			salary:20
		}
	}
})

二、readonly：让一个响应式数据变为只读的（深只读）。
语法：readonly(响应式的数据)，readonly对响应式数据进行加工，重新生成新的对象并返回，新对象中所有属性都不允许修改

person = readonly(person)

三、shallowReadonly：让一个响应式数据变为只读的（浅只读）。
语法：shallowReadonly(响应式的数据)，对响应式数据进行加工，重新生成新的对象并返回，新对象中第一层属性不允许修改，深层次的数据可以修改，比如这里的name age job不能改，但是j1和salary可以改

person = shallowReadonly(person)

四、readonly和shallowReadonly也都可以接收ref的

sum = readonly(sum)
sum = shallowReadonly(sum)

五、应用场景: 不希望数据被修改时。响应式数据可能不是你这个组件定义的，那个组件叫你别改数据，那你收到数据就用readonly或shallowReadonly加工一下，以后你就用加工后的数据

toRaw与markRaw

一、本节用到的数据：

let sum = ref(0)
let person = reactive({
	name:'张三',
	age:18,
	job:{
		j1:{
			salary:20
		}
	}
})

二、toRaw

1. 作用：将一个由reactive生成的响应式对象转为普通对象。
2. 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
3. 语法：toRaw(reactive定义的响应式对象)，将响应式数据变成非响应式数据，也就是原始数据

function showRawPerson(){
	const p = toRaw(person)
	p.age++//数据会改变，页面不会变化
	console.log(p)
}

三、markRaw

1. 作用：标记一个对象，使其永远不会再成为响应式对象。
2. 应用场景:
   （1）有些值不应被设置为响应式的，例如复杂的第三方类库等。
   （2）当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
3. 语法：markRaw(数据)，把数据标记为非响应式的，数据永远不会成为响应式的

function addCar(){
	let car = {name:'奔驰',price:40}
	person.car = markRaw(car)
}

function changePrice(){
	person.car.price++
	console.log(person.car.price)//数据会改变，但是页面不会更新
}

customRef

一、作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。
二、需求：输入框中输入内容，1s后显示在h3标签中

<template>
	<input type="text" v-model="keyWord">
	<h3>{{keyWord}}</h3>
</template>

如果我们像之前一样，使用Vue提供的ref：let keyWord = ref('hello')，那么输入框中的内容一改变，keyWord就会收集到，就会显示在页面上，无法实现延迟效果。所以我们需要自定义一个ref，我们给他命名为myRef
三、回忆一下，我们在使用Vue提供的ref时的代码：let keyWord = ref('hello')，显然，ref是一个函数，参数是要进行响应式处理的数据，那么myRef也应该是个函数，接收要进行响应式处理的数据和延迟时间：

function myRef(value,delay){}

在myRef中使用customRef自定义一个ref，把自定义的ref返回出去，外界才能用啊。
customRef的用法：

1. customRef接受一个函数作为参数，不然你自定义函数的逻辑往哪里写？不是只能往函数中写吗？
2. 函数收到两个参数：
   （1）track：在getter中使用，用于通知Vue追踪getter返回的数据的变化，相当于提前和get商量一下，让他认为这个value是有用的
   （2）trigger：在setter中使用，用于通知vue重新解析模板
3. 函数必须返回一个对象，这个对象中必须有两个属性：get和set，他们都是函数。回顾一下，你在调用ref时，会传入一个参数，当页面某元素读取这个参数时，会调用getter，当页面某元素修改了，会调用setter。

//本质上是一个函数
function myRef(value,delay){
	// 使用customRef自定义一个ref，把自定义的ref返回出去，外界才能用
	return customRef((track,trigger)=>{
		return {// 返回一个对象，对象中有get和set两个方法
			get(){
				console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
				track() //通知Vue追踪返回的数据value的变化
				return value//直接返回传入的数据
			},
			set(newValue){
				console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
				value = newValue
				trigger() //通知Vue去重新解析模板
			},
		}
	})
}

四、完整代码

import {ref,customRef} from 'vue'
export default {
	name: 'App',
	setup() {
		function myRef(value,delay){
			let timer
       		return customRef((track,trigger)=>{
				return {
					get(){
						track()
						return value//直接返回传入的数据
					},
					set(newValue){
						clearTimeout(timer)
						timer = setTimeout(()=>{
							value = newValue
							trigger() //通知Vue去重新解析模板
						},delay)
					},
				}
			})
		}
		let keyWord = myRef('hello',500) //使用程序员自定义的ref
		return {keyWord}
	}
}

provide与inject

一、作用：实现祖与后代组件间通信
二、套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据，父子组件也可以用这个方法传递数据。
三、具体写法：

1. 祖组件中：provide('给你要传递的数据取一个名字',数据)

import { reactive,toRefs,provide } from 'vue'//引入
export default {
	name:'App',
	components:{Child},
	setup(){
		let car = reactive({name:'奔驰',price:'40W'}
		provide('car',car) //给自己的后代组件传递数据
		return {...toRefs(car)}
	}
}

2. 孙组件中：inject('想得到的数据的名字')，返回一个响应式数据

import {inject} from 'vue'
export default {
	name:'Son',
	setup(){
		let car = inject('car')
		return {car}
	}
}

响应式数据的判断

一、本节用到的数据：

let car = reactive({name:'奔驰',price:'40W'})
let sum = ref(0)
let car2 = readonly(car)

二、isRef：检查一个值是否为一个ref对象

console.log(isRef(sum))

三、isReactive：检查一个对象是否是由reactive创建的响应式代理

console.log(isReactive(car))

四、isReadonly：检查一个对象是否是由readonly创建的只读代理

console.log(isReadonly(car2))

五、isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

console.log(isProxy(car))
console.log(isProxy(car2))//readonly出来了一个响应式数据，返回的依旧是proxy对象，而不是普通对象
console.log(isProxy(sum))

Composition API的优势

Options API存在的问题：使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

Composition API的优势：我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

新的组件

Fragment

一、在Vue2中：组件必须有一个根标签
二、在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
三、好处：减少标签层级，减小内存占用

Teleport

Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
	<!-- 
	<teleport to="body">
	也可以写css选择器：<teleport to="#atguigu"> 
	-->
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense

我们之前在app.vue中引入子组件时，是这样引入的：import Child from './components/Child'，如果采用这种静态引入的方式，如果引入失败，整个app组件都不会渲染，如果某个组件引入慢了，其他所有组件都会等这个组件引入成功后再一起渲染。为了解决这个问题，我们可以使用defineAsyncComponent异步引入组件，异步引入就不会出现静态引入的情况，但是等异步引入的组件回来的时候，页面可能会抖动一下，会刷新一下。可以使用Suspense标签包裹异步引入的组件，Suspense标签底部使用插槽实现，Suspense有两个插槽，一个叫default，用于展示异步加载完成时的组件，一个叫fallback，用于展示异步加载的组件还没加载完成时展示的内容。

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>稍等，加载中...</h3>
			</template>
		</Suspense>
	</div>
</template>

<script>
	import {defineAsyncComponent} from 'vue'
    //defineAsyncComponent接收一个函数，函数返回值是import函数执行的结果
	const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入
	export default {
		name:'App',
		components:{Child},
	}
</script>