《Vue进阶教程》第六课：computed()函数详解(上)

往期内容：

《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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/889385.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！