山东大学创新项目实训开发日志（19）之前端知识深度学习
今天晚上在队长的带领下学习了一下前端vue的基础知识
reactive和ref函数
| ref | reactive | |
|---|---|---|
| 数据类型 | 原始数据、对象 | 对象 |
| 操作 | js中需要添加.value，tamplate中则不用 | 都不用添加.value |
computed和watch
computed
-
写法
-
<script setup>const Factorial = computed(() => {let result = 1;for (let i = 1; i <= count.value; i++) {result *= i;}return result;});</script>
-
-
注意
-
计算属性中不应该有异步请求或者修改dom等操作
-
应该避免修改计算属性的值
-
watch
-
作用监听一个或者多个数据的变化
基础使用-监听单个数据
-
写法
-
<script setup>watch(Factorial, (newFactorial, prevFactorial) => {console.log(`Factorial changed from ${prevFactorial} to ${newFactorial}`);});</script>
-
-
注意
-
ref对象不需要加.value
-
基础使用-监听多个数据
-
写法
-
<script setup>watch([count, zzy],([newCount, newZzy], [prevCount, prevZzy]) => {console.log(`多重监听count changed from ${prevCount} to ${newCount}`);console.log(`多重监听zzy changed from ${prevZzy.age} to ${newZzy.age}`);},{deep: true,});</script>
-
-
注意
-
用一个数组来设置需要监听的对象
-
传入参数仍然是两个，新值在前，旧值在后（第10行）
-
immediate
-
说明
-
在监听器创建时立即触发回调函数
-
-
写法
-
<script setup>watch(zzy, () => {console.log('zzy changed');},{//在监听器创建时立即触发回调函数immediate: true});</script>
-
进阶使用-深度监听
-
说明
-
监听对象的嵌套属性发生变化时也会触发监听函数
-
但是获取不到旧值，因为传入的是引用
-
指向同一个地址所以pre和new是一样的
-
-
写法
-
<script setup>watch(zzy, (newZzy, prevZzy) => {console.log(`zzy changed from ${prevZzy.age} to ${newZzy.age}`);},{//深度监听deep: true});</script>
-
-
深度监听，获取旧值
-
先将对象转为JSON字符串，然后再转为对象，避免引用传递的问题
-
写法
-
let prevZzySnapshot = JSON.parse(JSON.stringify(zzy.value)); // 初始化快照watch(zzy,(newZzy) => {console.log(`zzy changed from ${prevZzySnapshot.age} to ${newZzy.age}`);prevZzySnapshot = JSON.parse(JSON.stringify(newZzy)); // 更新快照},{deep: true,});
-
进阶使用-精确监听
-
对象的某个嵌套属性变化时才执行，其它嵌套属性变化时不执行
-
写法变成两个回调函数
-
<script setup>watch(() => zzy.value.age,(newAge, prevAge) => {console.log(`zzy.age changed from ${prevAge} to ${newAge}`);});</script>
-
模板引用
<div ref="index"><!-- code --!></div>
<script setup>const index = ref(null)</script>
compute请求尽量不要有后端的请求
