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