6.1 toRaw以及markRaw
<template><div><h2>{{ reactivePerson }}</h2><button @click="change">改变吧</button></div>
</template>
<script setup>
import {reactive,toRaw,markRaw
} from 'vue'
let person = {age: 12,work: {job: {num: 1}}
}
// let reactivePerson = reactive(person) // 拷贝
// // 1.toRaw
// // 作用：将一个由reactive生成的响应式对象转为普通对象。
// // 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
// let pt = toRaw(reactivePerson)
// let change = () => {
// // reactivePerson.age++ //响应式对象形式
// pt.age++ //普通对象形式,不会响应
// console.log(person); //打印出来的数据是普通对象形式
// console.log(reactivePerson); //打印出来的数据是proxy响应式对象形式
// console.log(toRaw(reactivePerson)); //打印出来的数据是普通对象形式
// }
// 2.markRaw
// 作用：标记一个对象，使其永远不会再成为响应式对象。
// 应用场景:
// 有些值不应被设置为响应式的，例如复杂的第三方类库等。
// 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
let reactivePerson = reactive(person) // 拷贝
let pt = markRaw({reactivePerson: {}
})
let is = reactive({reactivePerson: pt.reactivePerson
})
let change = () => {// pt.age++ //普通对象形式,不会响应// is.age++
console.log('111', pt)console.log('222', is)
}
</script>
<style scoped></style>6.2 customRef的使用
创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式
详细信息：customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。
App.vue
<template><div><input type="text" v-model="text"></div>
</template>
<script setup>
import { useDebouncedRef } from './hooks/useDebouncedRef'
const text = useDebouncedRef('hello')
</script>
<style scoped></style>
hooks->useDebouncedRef.js
import { customRef } from 'vue'
export function useDebouncedRef(value, delay = 5000) {let timeoutreturn customRef((track, trigger) => {return {get() {console.log(`get数据为：${value}`);// 在这里发送请求track() //追踪return value},set(newValue) {console.log(`把容器中的数据改成了：${newValue}`);clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}})
}6.3 provide和inject
provide和inject是两个非常实用的组合式API，它们主要用于祖先组件与子孙组件之间的数据传递。provide用于提供数据，而inject则用于注入数据
-
基本概念：
-
provide函数：provide函数用于在祖先组件中提供一个值，该值可以在任何子孙组件中通过inject来接收。
-
inject函数：inject函数用于在任何子孙组件中接收祖先组件通过provide提供的值。
-
-
使用方法：
-
在祖先组件中，通过调用provide函数并传入一个唯一的键（key）和需要传递的数据值，即可提供数据。例如：
provide('someKey', someValue)。 -
在子孙组件中，通过调用inject函数并传入相同的键，即可接收到祖先组件提供的数据。例如：
const someValue = inject('someKey')
-
App.vue
<template><div><GrandSon></GrandSon></div>
</template>
<script setup>
import { reactive, provide } from 'vue'
import GrandSon from './components/GrandSon.vue'
let info = reactive({name: 'haha',age: 12
})
let change = () => {info.name += '@'
}
provide('info', info)
provide('change', change)
</script>
<style scoped></style>
GrandSon.vue
<template><div><h2>{{ infoson }}</h2><button @click="changeson">点我</button></div>
</template>
<!-- setup取代了export default -->
<script setup>
import { inject } from "vue";
let infoson = inject('info')
let changeson = inject('change')
</script>
<style scoped></style>6.3 Teleport
<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去
父组件App.vue
<template><div class="app"><h2>我是父组件</h2><HelloWorld></HelloWorld></div>
</template>
<script setup>
import { reactive, provide } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
</script>
<style scoped>
.app {width: 800px;background-color: #ddd;padding: 30px;margin: 0 auto;
}
</style>子组件HelloWorld.vue
<template><div class="son"><h2>我是helloworld</h2><MyDialog></MyDialog></div>
</template>
<!-- setup取代了export default -->
<script setup>
import MyDialog from './MyDialog.vue'
</script>
<style scoped>
.son {position: relative;background-color: #666;padding: 10px;
}
</style>孙组件MyDialog.vue
<template><div><button @click="open">打开弹窗</button><Teleport to="body"><div v-if="isShow" class="mask"><div class="dialog"><h3>Teleport</h3><h4>弹窗Teleport是一种能够将我们的组件html结构移动到指定位置的技术</h4><h4>弹窗Teleport是一种能够将我们的组件html结构移动到指定位置的技术</h4><h4>弹窗Teleport是一种能够将我们的组件html结构移动到指定位置的技术</h4><button @click="close">关闭弹窗</button></div></div></Teleport></div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
let isShow = ref(false)
const open = () => {isShow.value = true
}
const close = () => {isShow.value = false
}
</script>
<style scoped>
.mask {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(255, 0, 0, 0.5);
}
.dialog {position: absolute;top: 50%;left: 50%;transform: translate(-50%, 0);text-align: center;width: 600px;height: 400px;background-color: #f60;
}
.dialog button {margin: 100px 0 0 0;
}
</style>