Vue3学习笔记

一、Ref

ref, isRef, shallowRef, triggerRef, customRef

1. ref返回的是es6的一个class类，取值和修改都要加上.value
2. ref 和 shallowRef不能一起写，会引起shallowRef的视图更新
3. ref = shallowRef + triggerRef

<template><div class="home">Ref: {{student1.name}}<br>ShallowRef: {{student2.name}}<br>CustomRef: {{student3}}<br><div ref="myDiv">我是一个div</div><button @click="updateStudentName">修改</button></div>
</template><script setup lang="ts">
import { ref, isRef, shallowRef, triggerRef, customRef } from 'vue'const student1 = ref({ name: '小花1' }) 
const student2 = shallowRef({ name: '小花2' })function myRef<T> (value:T) {return customRef((track, trigger) => {let timer:anyreturn {get () {track() // 收集依赖return value},set (newValue:T) {clearInterval(timer)timer = setTimeout(() => {timer = nullconsole.log('触发一次调用一次')value = newValue // 触发依赖trigger()}, 500)}}})
}
const student3 = myRef<string>('小花3')const myDiv = ref<HTMLDivElement>() // 变量名需要与dom一致
// console.log(myDiv.value?.innerText) dom未渲染，打印无数据const updateStudentName = () => {// student.value.name = '小明1'student2.value.name = '小明2' // 这里如果响应函数里有ref，则shallowRef也会同时刷新 （student，注释掉就不会更新）// student2.value = { name: '小明2' } // 如果想要更新视图需要在value层修改triggerRef(student2) // 强制更新shallowRefstudent3.value = '小明3'console.log(myDiv.value?.innerText)// console.log(student1)// console.log('判断是否是ref', isRef(student1))// console.log(student2)
}
</script>

二、reactive

reactive, readonly, shallowReactive

1. ref支持所有类型 reactive只支持引用类型 Array Object Map Set
2. reactive 取值赋值不需要 .value
3. reactive 是proxy代理，不能直接赋值，否则会破坏响应式对象
4. readonly只读，不可修改readonly赋值的变量值，原始变量可以修改，修改只会readonly赋值的变量值会跟着改变
5. shallowReactive 浅层，多级对象只会作用到第一级

<template><div class="about"><form>姓名：<input v-model="student1.name"></form><ul><li :key="index" v-for="(item,index) in student2">{{item}}</li></ul>shallowReactive：{{student5}}<button @click="submitStudent">修改</button></div>
</template>
<script setup lang="ts">
import { ref, reactive, readonly, shallowReactive } from 'vue'
const student1 = reactive({ name: '小花' })
const student2 = reactive<string[]>([])
const student3 = reactive<{arr:string[]}>({ arr: [] })
const student4 = reactive({ name: '小红' })
const readonlyS4 = readonly(student3)
// readonlyS4.name = ''
const student5 = shallowReactive({obj1: {obj2: {name: '小花'}}
})const submitStudent = () => {// student1.name = '小明'// setTimeout(() => {//   const res = ['1', '2', '3']//   // student2 = res //不是响应式对象，视图不会更新//   student2.push(...res) // 响应式对象，视图更新//   student3.arr = res // 响应式对象，视图更新// }, 2000)student5.obj1.obj2.name = '小明' // 视图不会改变（不能和reactive一起使用）student5.obj1 = { obj2: { name: '小明' } } // 视图改变console.log(student5)
}
</script>

三、to系列

toRaw, toRef, toRefs

1. toRef 只能修改响应式对象的值，非响应式视图不会变化
2. toRefs 解构
3. toRaw 响应式改成非响应式

<template><div class="about"><h1>{{student1}}</h1><h1>{{name}}--{{age}}--{{sex}}</h1><button @click="updateStudent">修改</button></div>
</template>
<script setup lang="ts">
import { reactive, toRaw, toRef, toRefs } from 'vue'
// toRef 只能修改响应式对象的值，非响应式视图不会变化
// toRefs 解构
// toRaw 响应式改成非响应式
const student1 = reactive({ name: '小花', age: 12, sex: '女' })
const age = toRef(student1, 'age')
const { name, sex } = toRefs(student1)
const student2 = reactive({ name: '小花', age: 12, sex: '女' })
const updateStudent = () => {age.value = 13name.value = '小明'sex.value = '男'console.log(student1, toRaw(student2))
}
</script>

四、computed,watch,watchEffect

computed

<input v-model="name1"><br>
<input v-model="name2"><br>
<input v-model="name3.obj1.obj2.name"><br>
<input v-model="name4.obj1.obj2.name"><br>const one = ref('')
const tow = ref('')
const split1 = computed(() => {return `${one.value}--${tow.value}`
})
const split2 = computed({get () {return `${one.value}--${tow.value}`},set () {//}
})

watch

1. watch只能监听响应式对象
2. watch监听引用类型监听的新值和旧值是一样的
3. watch监听reactive包裹的深层对象，可以不加deep

const name1 = ref('小花1')
const name2 = ref('小花2')
const name3 = ref({obj1: {obj2: {name: '小花3'}}
})
const name4 = reactive({obj1: {obj2: {name: '小花4'}}
})// 监听单个
watch(name1, (n, o) => {console.log('watch', n, o)
})
// 监听多个 newValue oldValue 也是数组对应监听数组
watch([name1, name2], (n, o) => {console.log('watch', n, o)
})
// 深度监听 立即执行
watch(name3, (n, o) => {console.log('watch', n, o)
},
{deep: true, // 深度监听immediate: true // 立即执行
})
// 监听对象单一属性（回调函数）
watch(() => name4.obj1.obj2.name, (n, o) => {console.log('watch', n, o)
})
// 监听对象单一属性 （toRef）
const toName = toRef(name4.obj1.obj2, 'name')
watch(toName, (n, o) => {console.log('watch', n, o)
})

watchEffect

1. watchEffect回调函数内部写了什么就监听什么
2. watchEffect会返回一个停止监听的函数

<input id="message1" v-model="message1"><br>
<input v-model="message2"><br>
<button @click="stopWatchEffect">停止监听</button>const message1 = ref('watchEffect1')
const message2 = ref('watchEffect2')
const stopWatchEffect = watchEffect((oninvalidate) => {oninvalidate(() => {console.log('我最先执行，一开始不执行，监听值变化才执行')})const message1Dom:HTMLInputElement = document.getElementById('message1') as HTMLInputElementconsole.log('message1Dom', message1Dom)console.log('message1', message1.value)console.log('message2', message2.value)
}, {flush: 'post', // pre 组件更新前执行 sync强制效果始终同步触发 post组件更新后执行onTrigger (e) {console.log('进入调试模式', e)}
})