无需登录网页小游戏网站,wordpress搜索 主题,关键词整站优化公司,杭州建设网站制作一#xff1a;前言 二#xff1a;常见api
1、ref 和 reactive 这两个组合式 api 是在 Vue3 开发中最为常见的两个 api #xff0c;主要是将一个非响应式的数据变为响应式数据。 ref作用: 定义一个数据的响应式
语法: const xxx ref(initValue):创建一个包含响应式数据的引…一前言 二常见api
1、ref 和 reactive 这两个组合式 api 是在 Vue3 开发中最为常见的两个 api 主要是将一个非响应式的数据变为响应式数据。 ref作用: 定义一个数据的响应式
语法: const xxx ref(initValue):创建一个包含响应式数据的引用(reference)对象js中操作数据: xxx.value模板中操作数据: 不需要.value一般用来定义一个基本类型的响应式数据 reactive作用: 定义多个数据的响应式
语法const proxy reactive(obj):响应式转换是“深层的”会影响对象内部所有嵌套的属性内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据都是响应式的接收一个普通对象然后返回该普通对象的响应式代理器对象
代码
// ref
templateh2{{count}}/h2hrbutton clickupdate更新/button
/templatescript
import {ref
} from vue
export default {/* 使用vue3的composition API */setup () {// 定义响应式数据 ref对象const count ref(1)console.log(count)// 更新响应式数据的函数function update () {// alert(update)count.value count.value 1}return {count,update}}
}
/script// reactive
templateh2name: {{state.name}}/h2h2age: {{state.age}}/h2h2wife: {{state.wife}}/h2hrbutton clickupdate更新/button
/templatescript
import {reactive,
} from vue
export default {setup () {/* 定义响应式数据对象*/const state reactive({name: tom,age: 25,wife: {name: marry,age: 22},})console.log(state, state.wife)const update () {state.name --state.age 1state.wife.name state.wife.age 2}return {state,update,}}
}
/script
2、shallowRef和shallowReactive shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式) shallowRef: 只处理了value的响应式, 不进行对象的reactive处理 什么时候用浅响应式呢? 一般情况下使用ref和reactive即可如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 shallowReactive如果有一个对象数据, 后面会产生新的对象来替换 shallowRef
templateh2App/h2h3m1: {{m1}}/h3h3m2: {{m2}}/h3h3m3: {{m3}}/h3h3m4: {{m4}}/h3button clickupdate更新/button
/templatescript langts
import { reactive, ref, shallowReactive, shallowRef } from vueexport default {setup () {const m1 reactive({a: 1, b: {c: 2}})const m2 shallowReactive({a: 1, b: {c: 2}})const m3 ref({a: 1, b: {c: 2}})const m4 shallowRef({a: 1, b: {c: 2}})const update () {m4.value.a 1}return {m1,m2,m3,m4,update,}}
}
/script
3、 readonly 与 shallowReadonly
readonly: 深度只读数据获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。只读代理是深层的访问的任何嵌套 property 也是只读的。shallowReadonly 浅只读数据创建一个代理使其自身的 property 为只读但不执行嵌套对象的深度只读转换应用场景: 在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除
templateh2App/h2h3{{state}}/h3button clickupdate更新/button
/templatescript langts
import { reactive, readonly, shallowReadonly } from vueexport default {setup () {const state reactive({a: 1,b: {c: 2}})// const rState1 readonly(state)const rState2 shallowReadonly(state)const update () {// rState1.a // error// rState1.b.c // error// rState2.a // errorrState2.b.c}return {state,update}}
}
/script
4、 toRaw 与 markRaw
toRaw 返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。这是一个还原方法可用于临时读取访问不会被代理/跟踪写入时也不会触发界面更新。markRaw 标记一个对象使其永远不会转换为代理。返回对象本身应用场景: 有些值不应被设置为响应式的例如复杂的第三方类实例或 Vue 组件对象。当渲染具有不可变数据源的大列表时跳过代理转换可以提高性能。
templateh2{{state}}/h2button clicktestToRaw测试toRaw/buttonbutton clicktestMarkRaw测试markRaw/button
/templatescript langts
/*
toRaw: 得到reactive代理对象的目标数据对象
*/
import {markRaw,reactive, toRaw,
} from vue
export default {setup () {const state reactiveany({name: tom,age: 25,})const testToRaw () {const user toRaw(state)user.age // 界面不会更新}const testMarkRaw () {const likes [a, b]// state.likes likesstate.likes markRaw(likes) // likes数组就不再是响应式的了setTimeout(() {state.likes[0] --}, 1000)}return {state,testToRaw,testMarkRaw,}}
}
/script5、toRef
为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的区别ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响应用: 当要将 某个prop 的 ref 传递给复合函数时toRef 很有用
templateh2App/h2p{{state}}/pp{{foo}}/pp{{foo2}}/pbutton clickupdate更新/buttonChild :foofoo/
/templatescript langts
import {reactive,toRef,ref,
} from vue
import Child from ./Child.vueexport default {setup () {const state reactive({foo: 1,bar: 2})const foo toRef(state, foo)const foo2 ref(state.foo)const update () {state.foo// foo.value// foo2.value // foo和state中的数据不会更新}return {state,foo,foo2,update,}},components: {Child}
}
/script
templateh2Child/h2h3{{foo}}/h3h3{{length}}/h3
/templatescript langts
import { computed, defineComponent, Ref, toRef } from vueconst component defineComponent({props: {foo: {type: Number,require: true}},setup (props, context) {const length useFeatureX(toRef(props, foo))return {length}}
})function useFeatureX(foo: Ref) {const lenth computed(() foo.value.length)return lenth
}export default component
/script
6、customRef
创建一个自定义的 ref并对其依赖项跟踪和更新触发进行显式控制需求: 使用 customRef 实现 debounce 的示例
templateh2App/h2input v-modelkeyword placeholder搜索关键字/p{{keyword}}/p
/templatescript langts
/*
customRef:创建一个自定义的 ref并对其依赖项跟踪和更新触发进行显式控制需求: 使用 customRef 实现 debounce 的示例
*/import {ref,customRef
} from vueexport default {setup () {const keyword useDebouncedRef(, 500)console.log(keyword)return {keyword}},
}/*
实现函数防抖的自定义ref
*/
function useDebouncedRefT(value: T, delay 200) {let timeout: numberreturn customRef((track, trigger) {return {get() {// 告诉Vue追踪数据track()return value},set(newValue: T) {clearTimeout(timeout)timeout setTimeout(() {value newValue// 告诉Vue去触发界面更新trigger()}, delay)}}})
}/script7、provide 与 inject provide和inject提供依赖注入功能类似 2.x 的provide/inject 实现跨层级组件(祖孙)间通信
templateh1父组件/h1p当前颜色: {{color}}/pbutton clickcolorred红/buttonbutton clickcoloryellow黄/buttonbutton clickcolorblue蓝/buttonhrSon /
/templatescript langts
import { provide, ref } from vue
/*
- provide 和 inject 提供依赖注入功能类似 2.x 的 provide/inject
- 实现跨层级组件(祖孙)间通信
*/import Son from ./Son.vue
export default {name: ProvideInject,components: {Son},setup() {const color ref(red)provide(color, color)return {color}}
}
/scripttemplatedivh2子组件/h2hrGrandSon //div
/templatescript langts
import GrandSon from ./GrandSon.vue
export default {components: {GrandSon},
}
/scripttemplateh3 :style{color}孙子组件: {{color}}/h3/templatescript langts
import { inject } from vue
export default {setup() {const color inject(color)return {color}}
}
/script
三结尾 熟练的掌握 Vue3 中各种组合式 api 可以让我们在日常开发中规避很多的 bug 以及提高代码速率。好啦以上就是本文的全部内容了。希望能够对各位小伙伴有所帮助哦。
