1. 首頁 > 生活百科 > >

ref 源碼解析 Vue ref 和 v-for 結合

生活百科

前言Vue 中組件的使用很方便，而且直接取組件實例的屬性方法等也很方便，其中通過 ref 是最普遍的 。
平時使用中主要是對一個組件進行單獨設置 ref  ， 但是有些場景下可能是通過給定數據渲染的 ， 這時會結合  v-for 一塊使用 。那么在使用的時候具體怎么寫？為什么這樣寫？下面就來探究下 。
一、ref 和 v-for 結合1、ref 簡單使用
// html<div ref="testRef"></div>// jsthis.$refs.testRef.xxx2、ref 結合 v-for 使用
<div :ref="'test'+t.code" v-for="t in classList" :key="t.code"></div>在取值時怎么??？通?this.$refs['test'+t.code]?
這樣取會發現是一個數組，那就去數組中的第一使用（根據經驗驅使） ， 結果這樣是對的 。
this.$refs[`test${t.code}`][0]用是用對了 ， 那么為什么要這樣用呢？我想在 Vue 源碼中一定能夠找到答案的 。在 Vue 源碼中的確找到了想要的 。
二、Vue 中 ref 注冊解析直接在 ./src 下搜索 ref ， 搜索到的挺多的，一個個文件打開看了看 ， 鎖定了一個文件，這個文件就是 ref 的注冊代碼 。（路徑：src\core\vdom\modules\template-ref.ts）
這里主要看下文件中的 registerRef 函數：
【ref 源碼解析 Vue ref 和 v-for 結合】export function registerRef(vnode: VNodeWithData, isRemoval?: boolean) {const ref = vnode.data.refif (!isDef(ref)) returnconst vm = vnode.contextconst refValue = https://www.huyubaike.com/biancheng/vnode.componentInstance || vnode.elmconst value = isRemoval ? null : refValueconst $refsValue = isRemoval ? undefined : refValueif (isFunction(ref)) {invokeWithErrorHandling(ref, vm, [value], vm, `template ref function`)return}const isFor = vnode.data.refInForconst _isString = typeof ref ==='string' || typeof ref === 'number'const _isRef = isRef(ref)const refs = vm.$refsif (_isString || _isRef) {// 這里就是 v-for 綁定時的處理if (isFor) {const existing = _isString ? refs[ref] : ref.valueif (isRemoval) {isArray(existing) && remove(existing, refValue)} else {if (!isArray(existing)) {if (_isString) {refs[ref] = [refValue]setSetupRef(vm, ref, refs[ref])} else {ref.value = https://www.huyubaike.com/biancheng/[refValue]}} else if (!existing.includes(refValue)) {existing.push(refValue)}}} else if (_isString) {if (isRemoval && refs[ref] !== refValue) {return}refs[ref] = $refsValuesetSetupRef(vm, ref, value)} else if (_isRef) {if (isRemoval && ref.value !== refValue) {return}ref.value = value} else if (__DEV__) {warn(`Invalid template ref type: ${typeof ref}`)}}}1、函數可以綁定 ref 的值 ， 也可以刪除
2、根據傳入的 node 的 ref 綁定值的類型：string、number、ref、InFor 做不同的處理
3、如果是 InFor 綁定的 ref，會存儲成數組的方式
所以，到此從源碼中找到 ref 在綁定時 ， 如果是通過 v-for 綁定的，那么 ref.value 就是數組，在取值時就要按照數組方式取值了 。

    推薦閱讀