往期内容：
《Vue零基础入门教程》合集（完结）
《Vue进阶教程》第一课：什么是组合式API
《Vue进阶教程》第二课：为什么提出组合式API
《Vue进阶教程》第三课：Vue响应式原理
《Vue进阶教程》第四课：reactive()函数详解
《Vue进阶教程》第五课：ref()函数详解(重点)
1) 基本使用
📝计算属性computed()函数
1参数: 函数/对象
2作用: 创建一个计算属性
3返回: 计算属性对象
示例1
接收函数作为参数
const state = reactive({firstname: 'xiao', lastname: 'ming'})
// 接收一个副作用函数做为参数, 返回一个ref类型对象
const fullname = computed(() => {return state.firstname + state.lastname
})
// 通过.value操作
console.log(fullname.value)示例2
接收一个对象作为参数, 但是这种方式用的不多.
接收对象作为参数
const state = reactive({firstname: 'xiao', lastname: 'ming'})
// 接收一个副作用函数做为参数, 返回一个ref类型对象
const fullname = computed({get() {return state.firstname + ' ' + state.lastname},set(newValue) {[state.firstname, state.lastname] = newValue.split(' ')}
})
// 通过.value操作
console.log(fullname.value)2) 计算属性的特点
懒执行
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { reactive, computed } = Vueconst state = reactive({ firstname: 'xiao', lastname: 'ming' })const fullname = computed(() => {console.log('默认不执行, 只有当访问fullName.value时执行')return state.firstname + state.lastname})setTimeout(() => {fullname.value}, 1000)</script></body>
</html>缓存
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script src="../node_modules/vue/dist/vue.global.js"></script><script>const { reactive, computed } = Vueconst state = reactive({ firstname: 'xiao', lastname: 'ming' })const fullname = computed(() => {console.log('computed')return state.firstname + state.lastname})console.log(fullname.value) // 初次访问时, 执行1次, 保存到缓存console.log(fullname.value) // 再次访问, 直接返回缓存中的数据</script></body>
</html>
3) effect的高级用法
effect函数的高级用法
1lazy: 懒执行
2scheduler: 自定义更新
lazy选项
示例
懒执行
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { ref, effect } = Vueconst count = ref(0)// effect 返回 run() 函数,// 1. 加入lazy:true选项后, 不会自动调用副作用函数// 2. 手动执行run()函数, 才会调用副作用函数, 建立依赖关系const run = effect(() => {console.log('一开始不执行, 调用run才会执行', count.value)},{ lazy: true })console.log(run)</script></body>
</html>
scheduler选项
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { ref, effect } = Vueconst count = ref(0)effect(() => {console.log('第一次执行这里', count.value)},{scheduler: () => {console.log('更新时, 执行这里...')},})</script></body>
</html>
