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. 生命周期
生命周期是说一个先后顺序。确实很抽象,自己开始都理解偏了。
这里很容易遇到一个数据加载不到的问题。很大程度上是讲生命周期靠前之后,数据不会拿到。还有一个比较容易想到的问题,就是数据没有检测,比如数据进行处理的时候,没有判断数据是否为空,有些函数不能进行空操作的。