费曼学习法:用输出倒逼输入
vue3的响应式
- reactive
- ref
- computed
- readonly
API | 传入 | 返回 | 备注 |
---|---|---|---|
reactive | plain-object | 对象代理 | 深度监听对象中的所有属性 |
readonly | plain-object or proxy | 对象代理 | 只能读取对象属性不可修改 |
ref | any | {value,…} | 对value的访问是响应式的,如果给value的值是对象则通过reactive转换响应式,如果本身是响应式对象则使用响应式 |
computed | function | {value,…} | 监听响应式对象的变化,返回一个新的响应式对象 |
vue3响应式脱离了组件,vue2依赖于组件
应用:
- 当需要将对象变成响应式则使用reactive
- 当需要将响应式对象只读则使用readonly
- 当需要非对象变成响应式对象则使用ref
- 当需要将已知响应式对象得到一个新的响应式对象,则使用computed
监听数据变化
watch
// 等效于vue2的$watch
// 监听单个数据的变化
const state = reactive({ count: 0 })
watch(() => state.count, (newValue, oldValue) => {
// ...
}, options)
const countRef = ref(0);
watch(countRef, (newValue, oldValue) => {
// ...
}, options)
// 监听多个数据的变化
watch([() => state.count, countRef], ([new1, new2], [old1, old2]) => {
// ...
});
watchEffect
const stop = watchEffect(() => {
// 该函数会立即执行,然后追中函数中用到的响应式数据,响应式数据变化后会再次执行
})
// 通过调用stop函数,会停止监听
stop(); // 停止监听
无论是watch、watchEffect 当依赖变化回调函数都是异步的(微任务)
应用:
- 当首次不需要执行,并需要旧值,需要监控回调函数中不行则使用
watch
- 其他情况可用
watchEffect
响应式转换
- toRef:将响应式对象属性转换为ref
- toRefs:将响应式对象转换为ref
- unref:isRef§ ? p.value : p
核心工具函数 官方地址
- isRef
- isProxy
- isReactive
- isReadonly
编码习惯建议
所有的composition function均以ref的结果返回,以保证setup函数的返回结果中不包含reactive或readonly直接产生的数据
内部实现逻辑不管,总之给模板的就是ref
function usePos(){
const pos = reactive({ x:0, y:0 });
return toRefs(pos); // {x: refObj, y: refObj}
}
function useBooks(){
const books = ref([]);
return {
books // books is refObj
}
}
function useLoginUser(){
const user = readonly({
isLogin: false,
loginId: null
});
return toRefs(user); // { isLogin: refObj, loginId: refObj } all ref is readonly
}
setup(){
// 在setup函数中,尽量保证解构、展开出来的所有响应式数据均是ref
return {
...usePos(),
...useBooks(),
...useLoginUser()
}
}