电子商务网站建设阶段网站流量统计分析工具

「本专栏是我在学习 Vue3 过程中的总结与分享，旨在帮助初学者快速上手 Vue3。由于我也在持续学习中，如果有任何疏漏或错误，欢迎大家在评论区指正，我们一起进步！」
提示：使用该文档学习vue3需要有一些vue和vue2的基础才可以更好的学习噢~~
版权：未经允许，禁止转载！
鼓励：也许你正处于黑暗，可别忘了，星星都是在夜幕中才闪耀光芒。自信是你内心的火种，点燃它，就能照亮前行的路，走向属于你的灿烂黎明。
————————————————

---

前言

提示：本章为Vue3学习的最后一章！！！

Vue 3 的推出带来了许多强大的新特性，极大地提升了开发效率和用户体验。在响应式系统方面，Vue 3 提供了更细粒度的控制，例如 shallowRef、shallowReactive、readonly 等 API，使开发者能够更灵活地管理数据状态。此外，Teleport 和 Suspense 等新特性也为组件化开发带来了更多可能性。本文将深入探讨这些 API 的使用场景和实现原理，帮助开发者更好地理解和应用 Vue 3 的新特性。

---

一、shallowRef 与 shallowReactive

• 作用：
  • shallowRef：创建一个浅层响应的 ref，只对 .value 属性进行响应式处理，不会递归追踪其内部属性的变化。
  • shallowReactive：创建一个浅层响应的对象，只对对象的第一层属性进行响应式处理，不会递归追踪嵌套对象的属性变化。
• 优势：
  • 性能优化：避免深层递归响应式处理，减少不必要的性能开销。
  • 适用于不需要深度监听的数据结构，如大型对象或外部库实例。

示例代码：

App.vue

<template><div class="app"><h2>求和为：{{sum}}</h2><h2>名字为：{{person.name}}</h2><h2>年龄为：{{person.age}}</h2><h2>汽车为：{{car}}</h2><button @click="changeSum">sum + 1</button><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button><span>|||||||||||||||||</span><button @click="changeBrand">修改品牌</button><button @click="changeColor">修改颜色</button><button @click="changeEngine">修改发动机</button></div>
</template><script setup lang="ts" name="App">
import { shallowRef, ref, shallowReactive } from 'vue';
// shallowReactive
// shallowRef只处理最外层的数据
// 因此修改名字和修改年龄就不好用了
// 他们两个效果是一样的
let sum = shallowRef(0)
let person = shallowRef({name: '张三',age: 18
})
let car = shallowReactive({brand: '宝马',options:{color: '红色',engine: 'v8'}
})function changeSum(){sum.value += 1
}
function changeName(){person.value.name = '李四'
}
function changeAge(){person.value.age += 1
}
function changePerson(){person.value = {name: 'tony', age: 100}
}
function changeBrand(){car.brand = '法拉利'
}
function changeColor(){car.options.color = '紫色'
}
function changeEngine(){car.options.engine = 'v12'
}
</script><style scoped>
.app{background-color: #ddd;border-radius: 10px;padding: 10px;
}
</style>

---

二、readonly 与 shallowReadonly

• 作用：
  • readonly：创建一个只读的响应式对象，所有嵌套属性都无法被修改。
  • shallowReadonly：创建一个浅层只读的响应式对象，仅第一层属性为只读，嵌套属性仍可修改。
• 优势：
  • 数据保护：防止数据被意外修改，确保数据的不可变性。
  • 适用于需要保护的数据场景，如全局配置或传递给子组件的 props。

示例代码：

App.vue

<template><div class="app"><h2>当前sum1为：{{sum1}}</h2><h2>当前sum2为：{{sum2}}</h2><h2>当前汽车为：{{car}}</h2><button @click="changeSum1">点我sum1 + 1</button><button @click="changeSum2">点我sum2 + 1</button><button @click="changeBrand">修改品牌</button><button @click="changeColor">修改颜色</button><button @click="changePrice">修改价格</button></div>
</template><script setup lang="ts" name="App">
import { reactive, readonly, ref, shallowReadonly } from 'vue';
let sum1 = ref(0)
// readonly括号里面只能写响应式的数据
// sum1变化sum2也会变化，但只是因为sum1的改变而已
// reactive也是同样的效果
// shallowReadonly是只让最外层的可读，但是再里面的层次是可以正常修改
let sum2 = readonly(sum1)
let car1 = reactive({brand: '奔驰',options: {color: '红色',price: 100}
})
let car = shallowReadonly(car1)
function changeSum1(){sum1.value += 1
}
function changeSum2(){sum2.value += 1
}
function changeBrand(){car.brand = '宝马'
}
// shallowReadonly 只是最外层的数据只读噢
function changeColor(){car.options.color = '黑色'
}
function changePrice(){car.options.price = 300
}
</script><style scoped>
.app{background-color: #ddd;border-radius: 10px;padding: 10px;
}
</style>

---

三、toRaw 与 markRaw

• 作用：
  • toRaw：返回响应式对象的原始非代理对象。
  • markRaw：标记一个对象，使其永远不会被转换为响应式对象。
• 优势：
  • 直接操作原始对象：避免响应式系统的开销，适用于性能敏感的场景。
  • 防止不必要的响应式转换：适用于不需要响应式的静态数据或第三方库实例。

示例代码：

App.vue

<template><div class="app"></div>
</template><script setup lang="ts" name="App">
import { markRaw, reactive, toRaw } from 'vue';// toRaw可以使一个响应式的对象变成非响应式的对象
let person = reactive({name: '张三',age: 18
})
let rawPerson = toRaw(person)
// markRaw标记的对象是不能够再次变成响应式的数据的
let citysd = markRaw([{id:'asdda01',name:'北京'},{id:'asdda02',name:'上海'},{id:'asdda03',name:'天津'},{id:'asdda04',name:'重庆'}
])
let cityrac = reactive(citysd)
console.log('响应式对象',person);
console.log('非响应式对象',rawPerson);
console.log('非响应式对象',citysd);
console.log('非响应式对象',cityrac);</script><style scoped>
.app{background-color: #ddd;border-radius: 10px;padding: 10px;
}
</style>

---

四、customRef

• 作用：
  • 创建一个自定义的 ref，允许开发者完全控制其依赖追踪和更新触发逻辑。
• 优势：
  • 灵活性：可以自定义 get 和 set 的逻辑，实现复杂的响应式行为。
  • 适用于需要特殊逻辑的响应式数据，如防抖、异步数据加载等。

示例代码：

useMsgRef.ts

import { customRef } from "vue";export default function (initValue: string, delay: number) {// track跟踪 // trigger触发// customRef必须返回一个函数并且return一个get&setlet timer: numberlet msg = customRef((track, trigger) => {return {get() {track() // 告诉vue，一旦数据发生变化就必须要更新return initValue},set(value) {clearTimeout(timer)timer = setTimeout(() => {initValue = valuetrigger() // 告诉vue 我的数据改变了}, delay)}}})return { msg }
}

App.vue

<template><div class="app"><h2>{{msg}}</h2><input type="text" v-model="msg"></div>
</template><script setup lang="ts" name="App">
import useMsgRef from './hooks/useMsgRef';let {msg} = useMsgRef('你好',2000)
</script><style scoped>
.app{background-color: #ddd;border-radius: 10px;padding: 10px;
}
</style>

---

五、Teleport

• 作用：
  • 将组件的内容渲染到 DOM 中的任意位置，而不受组件层级结构的限制。
• 优势：
  • 解决 DOM 结构问题：例如将模态框、通知栏等渲染到 <body> 或其他容器中。
  • 提升代码可维护性：保持逻辑组件与 DOM 结构的分离。

示例代码：

Modal.vue

<template><button @click="isShow = true">展示弹窗</button><!-- 这样它就是相对整个body定位了 --><teleport to='body'>    <div class="modal" v-show="isShow"><h2>我是弹窗的标题</h2><p>我是弹窗的内容</p><button @click="isShow = false">关闭弹窗</button></div></teleport>
</template><script setup lang='ts'>
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>

App.vue

<template><div class="outer"><h2>我是App组件</h2><img src="http://www.atguigu.com/images/index_new/logo.png" alt=""><br><Modal></Modal></div>
</template><script setup lang="ts" name="App">
import Modal from './Modal.vue';</script><style scoped>.outer{background-color: #ddd;border-radius: 10px;padding: 5px;box-shadow: 0 0 10px;width: 400px;height: 400px;filter: saturate(200%);}/* 因为一些例如filter的设置，或者是图片的影响 *//* 我们的位置可能会发生改变，因此我们直接使用Teleport */img {width: 270px;}</style>

---

六、Suspense

• 作用：
  • 提供一种优雅的方式来处理异步组件的加载状态，支持加载中和加载失败的占位内容。
• 优势：
  • 提升用户体验：在异步组件加载时显示加载指示器或备用内容。
  • 简化异步逻辑：统一管理异步组件的加载状态，减少代码复杂度。

示例代码：

Child.vue

<template><div class="child"><h2>我是Child组件</h2><h3>当前求和为：{{ sum }}</h3></div>
</template><script setup lang='ts' name="Child">
import axios from 'axios';
import { ref } from 'vue';let sum = ref(0)
// 当我们在setup中发送请求并需要返回的情况
// 如果想要正常使用就必须使用sus
let {data: {content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 会直接给你提示，不让你在这里直接使用异步请求
console.log(content)
</script><style scoped>.child {background-color: skyblue;border-radius: 10px;padding: 10px;box-shadow: 0 0 10px;}
</style>

App.vue

<template>
<!-- 
我们可以直接使用 <Suspense>异步请求组件</Suspense>
当然我们也可以对其进行配置之后再使用该标签，也会产生不同的效果
--><div class="app"><!-- 在这里将子组件包裹在里面，就不会出现异常 --><Suspense><!-- 它使用了卡槽 --><!-- default放的是子组件 --><template v-slot:default><Child></Child></template><!-- 因为需要等待请求，因此提供了一个中间的卡槽 --><!-- 当请求发送成功返回后就消失了 --><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><style scoped>.app {background-color: #ddd;border-radius: 10px;padding: 10px;box-shadow: 0 0 10px;}
</style>

---

总结

今天深入探讨了 Vue 3 中的多个核心特性，包括 shallowRef 与 shallowReactive 的浅层响应式控制、readonly 与 shallowReadonly 的只读数据保护、toRaw 与 markRaw 的原始对象操作、customRef 的自定义响应式逻辑，以及 Teleport 和 Suspense 在组件渲染和异步加载中的应用。这些特性不仅优化了性能，还提升了开发灵活性和用户体验。通过合理运用这些工具，开发者可以更高效地构建高性能、可维护的 Vue 3 应用。

感谢大家对本专栏的支持，Vue3的学习到这里就结束了，很高兴能收获这么多可爱的粉丝们，我也会尽可能的多出一些前端以及后端的内容，供大家参考学习。那么…完结撒花！