vue里面ref和生命周期的理解

1. ref

vue里面增加一个DOM节点的写法。这是比较通俗的说法，vue里面讲的是ref是给元素或者子组件注册引用信息的，值得注意的是引用信息注册在父组件的$refs对象上。如果在普通的DOM元素使用，引用指向DOM；子组件指向组件实例。

注册后，vue会进行销毁。但如果不使用就不要注册了。

ref的源码如下：

import { remove } from 'shared/util'

 

export default {

 create (_: any, vnode: VNodeWithData) {

   registerRef(vnode)

  },

 update (oldVnode: VNodeWithData, vnode: VNodeWithData) {

   if (oldVnode.data.ref !== vnode.data.ref) {

     registerRef(oldVnode, true)

     registerRef(vnode)

    }                      

  },

 destroy (vnode: VNodeWithData) {

   registerRef(vnode, true)

  }

}

 

export function registerRef (vnode:VNodeWithData, isRemoval: ?boolean) {

 const key = vnode.data.ref

  if(!key) return

 

 const vm = vnode.context

 const ref = vnode.componentInstance || vnode.elm

 const refs = vm.$refs

  if(isRemoval) {

   if (Array.isArray(refs[key])) {

     remove(refs[key], ref)

    }else if (refs[key] === ref) {

     refs[key] = undefined

    }

  }else {

   if (vnode.data.refInFor) {

     if (!Array.isArray(refs[key])) {

       refs[key] = [ref]

     } else if (refs[key].indexOf(ref) < 0) {

       // $flow-disable-line

       refs[key].push(ref)

     }

    }else {

     refs[key] = ref

    }

  }

}

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。

2. 生命周期

生命周期是说一个先后顺序。确实很抽象，自己开始都理解偏了。

这里很容易遇到一个数据加载不到的问题。很大程度上是讲生命周期靠前之后，数据不会拿到。还有一个比较容易想到的问题，就是数据没有检测，比如数据进行处理的时候，没有判断数据是否为空，有些函数不能进行空操作的。