1.ref():接受一个内部值,返回一个响应式的、可更改的 ref 对象.此对象只有一个指向其内部值的属性 .value
。
使用实例:
const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1
使用注意项:
如果将一个对象赋值给 ref,那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref,它们将被深层地解包。若要避免这种深层次的转换,请使用 shallowRef()
来替代。
2.computed():2种使用方法:(1)创建一个只读的ref对象,不可以对其进行计算操作(2)通过get和set函数,创建一个可写的计算属性ref,
使用实例:
(1)const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 错误
(2)
const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: (val) => { count.value = val - 1 } }) plusOne.value = 1 //当对computed对象进行赋值时触发set操作,从而对count进行操作 console.log(count.value) // 0
3.reactive(): 返回一个对象的响应式代理。
(1)响应式转换是“深层”的:它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性,同时保持响应性。
const count = ref(1) const obj = reactive({ count }) // ref 会被解包 console.log(obj.count === count.value) // true // 会更新 `obj.count` count.value++ console.log(count.value) // 2 console.log(obj.count) // 2 代理响应式,不需要通过value去取值 // 也会更新 `count` ref obj.count++ console.log(obj.count) // 3 console.log(count.value) // 3
const count = ref(1) const obj = reactive({}) obj.count = count //当一个ref赋值给reactive时自动解包 console.log(obj.count) // 1 console.log(obj.count === count.value) // true
(2)当访问到某个响应式数组或 Map
这样的原生集合类型中的 ref 元素时,不会执行 ref 的解包。
const books = reactive([ref('Vue 3 Guide')]) // 这里需要 .value console.log(books[0].value) const map = reactive(new Map([['count', ref(0)]])) // 这里需要 .value console.log(map.get('count').value)
(3) 若要避免深层响应式转换,只想保留对这个对象顶层次访问的响应性,请使用 shallowReactive() 作替代。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹,因此不等于源对象,建议只使用响应式代理,避免使用原始对象。
4.readonly():接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理。
(1)只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive()
相同,但解包得到的值是只读的。
const original = reactive({ count: 0 }) const copy = readonly(original) watchEffect(() => { // 用来做响应性追踪 console.log(copy.count) }) // 更改源属性会触发其依赖的侦听器 original.count++ // 更改该只读副本将会失败,并会得到一个警告,但是值会做响应式更改 copy.count++ // warning!
(2)要避免深层级的转换行为,请使用 shallowReadonly() 作替代。
5.watchEffect():立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。
(1):第一个参数就是要运行的副作用函数。const count = ref(0) watchEffect(() => console.log(count.value)) // -> 输出 0 立即执行! count.value++ // -> 输出 1
(2)第一个参数副作用函数的参数也是一个函数,用来注册清理回调。清理回调会在该副作用下一次执行前被调用,可以用来清理无效的副作用,例如等待中的异步请求 (参见下面的示例)。
watchEffect(async (onCleanup) => { const { response, cancel } = doAsyncWork(id.value) // `cancel` 会在 `id` 更改时调用 // 以便取消之前 // 未完成的请求 onCleanup(cancel) data.value = await response })
(3)第二个参数是一个可选的选项,可以用来调整副作用的刷新时机或调试副作用的依赖。
默认情况下,侦听器将在组件渲染之前执行。设置 flush: 'post'
将会使侦听器延迟到组件渲染之后再执行。详见回调的触发时机。在某些特殊情况下 (例如要使缓存失效),可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 flush: 'sync'
来实现。然而,该设置应谨慎使用,因为如果有多个属性同时更新,这将导致一些性能和数据一致性的问题。
watchEffect(() => {}, { flush: 'post', onTrack(e) { debugger }, onTrigger(e) { debugger } })
(4)返回值是一个用来停止该副作用的函数
const stop = watchEffect(() => {}) // 当不再需要此侦听器时: stop()
标签:count,const,log,--,学习心得,value,Vue3.0,console,ref From: https://www.cnblogs.com/LylePark/p/16975705.html