网络宣传网站建设咨询,前程无忧官网,烟台小学网站建设,现在用什么软件做网站往期内容#xff1a;
《Vue零基础入门教程》合集#xff08;完结#xff09;
《Vue进阶教程》第一课#xff1a;什么是组合式API
《Vue进阶教程》第二课#xff1a;为什么提出组合式API
《Vue进阶教程》第三课#xff1a;Vue响应式原理
《Vue进阶教程》第四课#… 往期内容
《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 langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodyscriptconst { 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 langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyscript src../node_modules/vue/dist/vue.global.js/scriptscriptconst { 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
/html3) effect的高级用法 effect函数的高级用法 1lazy: 懒执行 2scheduler: 自定义更新 lazy选项 示例
懒执行
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodyscriptconst { 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
/htmlscheduler选项
示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodyscriptconst { ref, effect } Vueconst count ref(0)effect(() {console.log(第一次执行这里, count.value)},{scheduler: () {console.log(更新时, 执行这里...)},})/script/body
/html
