【Vue】Vue3（2）

文章目录

1 其它 Composition API
- 1.1 shallowReactive 与 shallowRef
- - 1.1.1 Demo.vue
- 1.2 readonly 与 shallowReadonly
- - 1.2.1 Demo.vue
- 1.3 toRaw 与 markRaw
- - 1.3.1 Demo.vue
- 1.4 customRef
- - 1.4.1 Demo.vue
- 1.5 provide 与 inject
- - 1.5.1 App.vue
  - 1.5.2 Child.vue
  - 1.5.3 Son.vue
- 1.6 响应式数据的判断
- - 1.6.1 Demo.vue
2 Composition API 的优势
- 2.1 Options API 存在的问题
- 2.2 Composition API 的优势
3 新的组件
- 3.1 Fragment
- 3.2 Teleport
- - 3.2.1 App.vue
  - 3.2.2 Child.vue
  - 3.2.3 Son.vue
  - 3.2.4 Dialog.vue
- 3.3 Suspense
- - 3.3.1 App.vue
  - 3.3.2 Child.vue
4 其他
- 4.1 全局API的转移
- 4.2 其他改变

1 其它 Composition API

1.1 shallowReactive 与 shallowRef

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。
什么时候使用?
- 如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ===> shallowReactive。
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

1.1.1 Demo.vue

<template>
	<h4>当前的x.y值是：{{x.y}}</h4>
	<button @click="x={y:888}">点我替换x</button>
	<button @click="x.y++">点我x.y++</button>
	<hr>
	<h4>{{person}}</h4>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,toRef,toRefs,shallowReactive,shallowRef} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			// let person = shallowReactive({ // shallowReactive只考虑第一层数据的响应式
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
			let x = shallowRef({ // shallowRef不去处理对象类型的响应式，value是Object，并未转为Proxy
				y:0
			})
			console.log('******',x)

			//返回一个对象（常用）
			return {
				x,
				person,
				...toRefs(person)
			}
		}
	}
</script>

1.2 readonly 与 shallowReadonly

readonly：让一个响应式数据变为只读的（深只读）。
shallowReadonly：让一个响应式数据变为只读的（浅只读）。
应用场景：不希望数据被修改时。

1.2.1 Demo.vue

<template>
	<h4>当前求和为：{{sum}}</h4>
	<button @click="sum++">点我++</button>
	<hr>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,toRefs,readonly,shallowReadonly} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			person = readonly(person)
			// person = shallowReadonly(person)
			// sum = readonly(sum)
			// sum = shallowReadonly(sum)

			//返回一个对象（常用）
			return {
				sum,
				...toRefs(person)
			}
		}
	}
</script>

1.3 toRaw 与 markRaw

toRaw：
- 作用：将一个由reactive生成的响应式对象转为普通对象。
- 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
markRaw：
- 作用：标记一个对象，使其永远不会再成为响应式对象。
- 应用场景：
  1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
  2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

1.3.1 Demo.vue

<template>
	<h4>当前求和为：{{sum}}</h4>
	<button @click="sum++">点我++</button>
	<hr>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<h3 v-show="person.car">座驾信息：{{person.car}}</h3>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
	<button @click="showRawPerson">输出最原始的person</button>
	<button @click="addCar">给人添加一台车</button>
	<button @click="person.car.name+='!'">换车名</button>
	<button @click="changePrice">换价格</button>
</template>

<script>
	import {ref,reactive,toRefs,toRaw,markRaw} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			function showRawPerson(){
				const p = toRaw(person) // toRaw只能处理reactive缔造的响应式对象，如果是ref类型的，p输出undefined
				p.age++ // 不变化
				console.log(p)
			}

			function addCar(){
				let car = {name:'奔驰',price:40}
				//person.car = car // proxy可以捕获对响应式对象person的任何一个属性的任何一种操作，对person后追加的属性也具有响应式
				person.car = markRaw(car) // car永远不会成为响应式数据
			}

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

			//返回一个对象（常用）
			return {
				sum,
				person,
				...toRefs(person),
				showRawPerson,
				addCar,
				changePrice
			}
		}
	}
</script>

1.4 customRef

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

实现防抖效果：

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

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

1.4.1 Demo.vue

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

<script>
	import {ref,customRef} from 'vue'
	export default {
		name: 'App',
		setup() {
			//自定义一个ref——名为：myRef
			function myRef(value,delay){
				let timer
				return customRef((track,trigger)=>{
					return {
						get(){
							console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
							track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
							return value
						},
						set(newValue){
							console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
							clearTimeout(timer) // 防抖机制，什么时候停止修改，什么时候将结果修改至页面
							timer = setTimeout(()=>{
								value = newValue
								trigger() //通知Vue去重新解析模板（get()中返回value，配合track才能改数据）
							},delay)
						},
					}
				})
			}

			// let keyWord = ref('hello') //使用Vue提供的ref
			let keyWord = myRef('hello',500) //使用程序员自定义的ref
			
			return {keyWord}
		}
	}
</script>

1.5 provide 与 inject

作用：实现祖与后代组件间通信。
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据。

具体写法：

祖组件中：

setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

后代组件中：

setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}

1.5.1 App.vue

<template>
	<div class="app">
		<h3>我是App组件（祖），{{name}}--{{price}}</h3>
		<Child/>
	</div>
</template>

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

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

1.5.2 Child.vue

<template>
	<div class="child">
		<h3>我是Child组件（子）</h3>
		<Son/>
	</div>
</template>

<script>
	import {inject} from 'vue'
	import Son from './Son.vue'
	export default {
		name:'Child',
		components:{Son},
		/* setup(){
			let x = inject('car') // 父子之间一般不用这个，用props即可
			console.log(x,'Child-----')
		} */
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

1.5.3 Son.vue

<template>
	<div class="son">
		<h3>我是Son组件（孙），{{car.name}}--{{car.price}}</h3>
	</div>
</template>

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

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
</style>

1.6 响应式数据的判断

isRef：检查一个值是否为一个 ref 对象。
isReactive：检查一个对象是否是由 reactive 创建的响应式代理。
isReadonly：检查一个对象是否是由 readonly 创建的只读代理。
isProxy：检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。

1.6.1 Demo.vue

<template>
	<h3>我是App组件</h3>
</template>

<script>
	import {ref, reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
	export default {
		name:'App',
		setup(){
			let car = reactive({name:'奔驰',price:'40W'})
			let sum = ref(0)
			let car2 = readonly(car)

			console.log(isRef(sum))
			console.log(isReactive(car))
			console.log(isReadonly(car2))
			console.log(isProxy(car))
			console.log(isProxy(sum))

			
			return {...toRefs(car)}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

2 Composition API 的优势

2.1 Options API 存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

2.2 Composition API 的优势

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

3 新的组件

3.1 Fragment

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

3.2 Teleport

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

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

3.2.1 App.vue

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Child/>
	</div>
</template>

<script>
	import Child from './components/Child'
	export default {
		name:'App',
		components:{Child},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

3.2.2 Child.vue

<template>
	<div class="child">
		<h3

秒客网

【Vue】Vue3（2）

文章目录

1 其它 Composition API

1.1 shallowReactive 与 shallowRef

1.1.1 Demo.vue

1.2 readonly 与 shallowReadonly

1.2.1 Demo.vue

1.3 toRaw 与 markRaw

1.3.1 Demo.vue

1.4 customRef

1.4.1 Demo.vue

1.5 provide 与 inject

1.5.1 App.vue

1.5.2 Child.vue

1.5.3 Son.vue

1.6 响应式数据的判断

1.6.1 Demo.vue

2 Composition API 的优势

2.1 Options API 存在的问题

2.2 Composition API 的优势

3 新的组件

3.1 Fragment

3.2 Teleport

3.2.1 App.vue

3.2.2 Child.vue

`相关文章`