为什么这里的 ref 不用 v-bind:ref or :ref

Question

<div class="slider" ref="rootRef">
 </div>

setup () {
    const rootRef = ref(null)
    const { currentPageIndex } = useSlider(rootRef)

    return {
      rootRef,
      currentPageIndex
    }
  }

老师，如果 attribute 设置 值，不是要 v-bind吗？ 如果不设置， 就当作一个字符串？

老师，早上好。 您看，setup() 中 return 出来一个 rootRef， 然后 template 中，ref=‘rootref’. 如此以来，template 中的 ref 不是绑定一个动态数据了吗？ 为什么不是应该就 :ref吗？

谢谢 老师指点

Answer 1

ustbhuangyi 2021-07-22 13:08:59

你在 setup 函数中定义的 rootRef 变量，在内部执行完 setup 函数后，会赋值给组件实例的 setupState 变量中。

也就是 setupState.rootRef = ref(null)。

然后在组件的 patch 阶段，DOM 挂载完毕后会执行 setRef 函数，它先从 vnode 中拿到 ref 变量，也就是你在模板中定义的 rootRef 字符串，然后根据这个变量修改 setupState.rootRef = vnode.el，也就是对应的 DOM。

这就是为啥你在 mounted 之后可以通过 rootRef.value 访问到 DOM。

这是从源码角度层面的分析，也建议你去学习一下。

Answer 2

ustbhuangyi 2021-07-22 09:44:41

v-bind 绑定的是动态数据，静态数据就是字符串

• 提问者 All_Good #1

  老师，不好意思。问题没问清楚，我重新编辑了一下