vue3.0 与 2.0 差异学习记录

响应式性基础 API

reactive

返回对象的响应式副本

     const obj = tractive({ count: 0 })
     响应式转换是 "深层"的

类型声明：

    function reactive <T extend object>(target: T): UnwrapNestedRefs<T>

readonly

获取一个对象（响应式或纯对象） 或 ref 返回原始代理的只读代理。 只读代理是深层的：访问的任何嵌套 property 也是只读的

    const original = reactive({ count: 0 })
    const copy = readonly(original)
    watchEffect(() => {
        // 适用于响应式追踪
        console.log(copy.count)
    })
    
    // 变更 original 会触发侦听器依赖副本
    original.count++
    
    //变更副本将失败并导致警告
    copy.count++ // 警告
    

isProxy

检查对象是 reactive 还是 readonly 创建的代理

isReactive

检查对象是否是 reactive 创建的响应式 proxy.

   import { reactive, isReactive } from "vue"
   export default {
       setup(){
           const state = reactive({
               name: 'John
           })
           console.log(isReactive(state)) // -> true
       }
   
   }

如果 proxy 是 readonly 创建的， 但还包装了由 reactive 创建的另一个 proxy, 它也会返回true

refs

ref

接收一个内部值并返回一个响应式且可变的 ref 对象，ref 对象具有指向内部值的单个 property .value

示例

    const count = ref(0)
    console.log(count.value) // value
    count.value++
    console.log(count.value) // 1

如果将对象分配为 ref 值， 则可以通过 reactive 方法使该对象具有高度的响应式。

类型声明

interface ref<T>{xx
    value: T
}

function ref<T>(value:T):Ref<T>

有时我们可能需要 ref 的内部值指定复杂类型，我们可以通过在调用 ref 来覆盖默认推断时传递一个泛型参数来简介的做到这一点。

    const foo = ref<string | number>('foo')