美文网首页
Vue中一些API和选项

Vue中一些API和选项

作者: 搬码人 | 来源:发表于2023-08-29 18:08 被阅读0次

    isRef()

    顾名思义,判断一个值是否为ref类型

    unref()

    接触ref的包裹,即如果参数是ref,则返回内部值,否则返回值本身

    toRefs()

    const fooRef = ref(state.foo)
    

    请注意,上面这个 ref 不会和 state.foo 保持同步,因为这个ref()接收到的是一个纯数值。
    toRef() 这个函数在你想把一个 prop 的 ref 传递给一个组合式函数时会很有用:

    toValue

    refgetter规范化为值。如果参数是ref,它会返回ref的值;如果参数是函数,它会调用函数并返回其返回值。否则,将会原样返回参数。
    这是官方组合式函数中的一个例子:

    toRefs()

    将一个响应式对象转化为一个普通对象,而这个普通对象的属性将会被转化为ref,相当于对每个属性都使用了toRef()

    当从组合式函数中返回响应式对象时,toRefss()相当有用。使用它,消费者组件可以解构/展开返回的对象而不会失去响应性:

    isProxy()

    检查一个对象是否是由reactive()readonly()shallowReactive()shallowReadonly创建的代理。

    isReactive()

    检查一个对象是否是由 reactive()shallowReactive() 创建的代理。

    isReadonly()

    检查传入的值是否为只读对象。只读对象的属性可以更改,但他们不能通过传入的对象直接赋值。
    通过 readonly()shallowReadonly() 创建的代理都是只读的,因为他们是没有 set 函数的 computed()ref。


    shallowRef()

    常常用于对大型数据解构的性能优化或是与外部的状态管理系统集成。

    triggerRef()

    强制触发依赖于一个浅层ref()的副作用,这通常在对潜引用的内部值进行深度变更后使用。

    customRef()

    创建一个自定义的ref,显式声明对其依赖追踪和更新触发的控制方式。
    customRef() 预期接收一个工厂函数作为参数,这个工厂函数接受 track 和 trigger 两个函数作为参数,并返回一个带有 get 和 set 方法的对象。
    一般来说,track() 应该在 get() 方法中调用,而 trigger() 应该在 set() 中调用。然而事实上,你对何时调用、是否应该调用他们有完全的控制权。

    示例:创建一个防抖ref

    shallowReactive()

    一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露,这也意味着值为ref的属性不会被自动解包了。

    shallowReadonly()

    readonly()的浅层作用形式
    readonly()不同,这里没有深层级的转换:只有根层级的属性变为了只读。属性的值都会被原样存储和暴露,这也意味着值为ref的属性不会被自动解包。

    toRaw()

    根据一个Vue创建的代理返回其原始对象

    markRaw()

    将一个对象转为不可被转为代理。

    effectScope

    创建一个effect作用域,可以捕获其中所创建的响应式副作用(即计算属性和帧听器),这样捕获到的副作用可以一起处理。

    getCurrentScope()

    如果有的话,返回当前活跃的effect作用域。

    onScopeDispose()

    在当前活跃的effect作用域上注册一个处理回调函数。当相关的 effect 作用域停止时会调用这个回调函数。
    这个方法可以作为可复用的组合式函数中 onUnmounted 的替代品,它并不与组件耦合,因为每一个 Vue 组件的 setup() 函数也是在一个 effect 作用域中调用的。


    mixins

    意为混入,可以使用可复用的代码

    • 基本使用

    如果组件和mixins有重复数据,mixins中的数据会被覆盖。

    • 全局引用

    render函数

    我的理解就是手动创建界面元素

    • 基本使用

    同样能看到效果


    ref

    通过ref获取DOM元素

    如果用于普通DOM元素,引用将是元素本身;如果用于子组件,引用将是子组件的实例。父组件往往可以通过ref访问子组件暴露的数据。
    或者ref可以接收一个函数值,用于对存储引用位置的完全控制:

    <ChildComponent :ref="(el) => child = el" />
    

    关于ref注册时机的重要说明:因为ref本身是作为渲染函数的结果来创建的,必须等待组件挂载后才嗯那个对它进行访问。调用方式"ref名.value.子组件暴露的属性"
    this.$refs也是非响应式的,因此不应该在模板中使用它来进行数据绑定。

    相关文章

      网友评论

          本文标题:Vue中一些API和选项

          本文链接:https://www.haomeiwen.com/subject/odlumdtx.html