提交 f0c28745 编写于 作者: fxy060608's avatar fxy060608

refactor(v3): cid and nid

上级 5e3858b0
export function generateId (vm, parent) {
if (!vm.$parent) {
return '-1'
}
const vnode = vm.$vnode
const context = vnode.context
// slot 内的组件,需要补充 context 的 id,否则可能与内部组件索引值一致,导致 id 冲突
if (context && context !== parent && context._$id) {
if (process.env.NODE_ENV !== 'production') {
console.log('generateId:' + context._$id + ';' + parent._$id + ',' + vnode.data.attrs._i)
}
return context._$id + ';' + parent._$id + ',' + vnode.data.attrs._i
}
return parent._$id + ',' + vnode.data.attrs._i
}
...@@ -21,7 +21,11 @@ import { ...@@ -21,7 +21,11 @@ import {
B_CLASS, B_CLASS,
B_STYLE, B_STYLE,
S_CLASS S_CLASS
} from '../../constants' } from '../../constants'
import {
generateId
} from '../../../helpers/util'
import { import {
diff diff
...@@ -57,10 +61,7 @@ export function initData (Vue) { ...@@ -57,10 +61,7 @@ export function initData (Vue) {
if (!this._$vd) { if (!this._$vd) {
return return
} }
// TODO 自定义组件中的 slot 数据采集是在组件内部,导致所在 context 中无法获取到差量数据
// 如何保证每个 vm 数据有变动,就加入 diff 中呢?
// 每次变化,可能触发多次 beforeUpdate,updated
// 子组件 updated 时,可能会增加父组件的 diffData,如 slot 等情况
diff(this._$newData, this._$data, this._$vdUpdatedData) diff(this._$newData, this._$data, this._$vdUpdatedData)
this._$data = JSON.parse(JSON.stringify(this._$newData)) this._$data = JSON.parse(JSON.stringify(this._$newData))
// setTimeout 一下再 nextTick( 直接 nextTick 的话,会紧接着该 updated 做 flush,导致父组件 updated 数据被丢弃) // setTimeout 一下再 nextTick( 直接 nextTick 的话,会紧接着该 updated 做 flush,导致父组件 updated 数据被丢弃)
...@@ -87,11 +88,7 @@ export function initData (Vue) { ...@@ -87,11 +88,7 @@ export function initData (Vue) {
this._$vdomSync = new VDomSync(this.$options.pageId, this.$options.pagePath, this) this._$vdomSync = new VDomSync(this.$options.pageId, this.$options.pagePath, this)
} }
if (this._$vd) { if (this._$vd) {
if (!this.$parent) { this._$id = generateId(this, this.$parent)
this._$id = '-1'
} else {
this._$id = this.$parent._$id + ',' + this.$vnode.data.attrs._i
}
this._$vd.addVm(this) this._$vd.addVm(this)
this._$vdMountedData = Object.create(null) this._$vdMountedData = Object.create(null)
this._$setData(MOUNTED_DATA, this._$vdMountedData) this._$setData(MOUNTED_DATA, this._$vdMountedData)
......
...@@ -153,16 +153,12 @@ export class VDomSync { ...@@ -153,16 +153,12 @@ export class VDomSync {
removeElement (elm) { removeElement (elm) {
const elmIndex = this.elements.indexOf(elm) const elmIndex = this.elements.indexOf(elm)
if (elmIndex === -1) { if (elmIndex === -1) {
return console.error(`removeElement[${elm.cid}][${elm.nid}] not found`) if (process.env.NODE_ENV !== 'production') {
} console.error(`removeElement[${elm.cid}][${elm.nid}] not found`)
this.elements.splice(elmIndex, 1) }
}
removeElementByCid (cid) {
if (!cid) {
return return
} }
this.elements = this.elements.filter(elm => elm.cid !== cid) this.elements.splice(elmIndex, 1)
} }
push (type, cid, data, options) { push (type, cid, data, options) {
......
...@@ -29,10 +29,11 @@ export function initEvent (Vue) { ...@@ -29,10 +29,11 @@ export function initEvent (Vue) {
} }
const $event = this.$handleEvent($vueEvent) const $event = this.$handleEvent($vueEvent)
const cid = this._$id const cid = this._$id
// 当自定义组件根节点触发事件时,nid 始终为 0
const currentTarget = $vueEvent.$origCurrentTarget || $vueEvent.currentTarget const currentTarget = $vueEvent.$origCurrentTarget || $vueEvent.currentTarget
const nid = currentTarget === this.$el ? 0 : $event.options.nid // 当自定义组件根节点触发事件时,nid 补充前缀,避免与组件内部 nid 冲突(根组件page不需要)
const nid = ((currentTarget === this.$el && this.mpType !== 'page') ? 'r-' : '') + $event.options.nid
if (typeof nid === 'undefined') { if (typeof nid === 'undefined') {
return console.error(`[${cid}] nid not found`) return console.error(`[${cid}] nid not found`)
} }
...@@ -42,7 +43,7 @@ export function initEvent (Vue) { ...@@ -42,7 +43,7 @@ export function initEvent (Vue) {
delete $event.mp delete $event.mp
delete $event.preventDefault delete $event.preventDefault
delete $event.stopPropagation delete $event.stopPropagation
delete $event.options delete $event.options
delete $event.$origCurrentTarget delete $event.$origCurrentTarget
// 实时发送,延迟的话,会导致 touch 类事件被合并,影响实际业务逻辑,比如 touchstart 中修改变量为 true,touchend 修改为 false // 实时发送,延迟的话,会导致 touch 类事件被合并,影响实际业务逻辑,比如 touchstart 中修改变量为 true,touchend 修改为 false
vd.sendUIEvent(cid, nid, $event) vd.sendUIEvent(cid, nid, $event)
......
...@@ -3,11 +3,15 @@ import { ...@@ -3,11 +3,15 @@ import {
UI_EVENT UI_EVENT
} from '../../../constants' } from '../../../constants'
function findParentCid (vm) { import {
generateId
} from '../../../helpers/util'
function findParent (vm) {
let parent = vm.$parent let parent = vm.$parent
while (parent) { while (parent) {
if (parent._$id) { if (parent._$id) {
return parent._$id return parent
} }
parent = parent.$parent parent = parent.$parent
} }
...@@ -30,11 +34,7 @@ export class VDomSync { ...@@ -30,11 +34,7 @@ export class VDomSync {
} }
initVm (vm) { initVm (vm) {
if (!vm.$parent) { vm._$id = generateId(vm, findParent(vm))
vm._$id = '-1'
} else {
vm._$id = findParentCid(vm) + ',' + vm.$vnode.data.attrs._i
}
let vData = this.addBatchVData[vm._$id] let vData = this.addBatchVData[vm._$id]
if (!vData) { if (!vData) {
console.error('cid unmatched', vm) console.error('cid unmatched', vm)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册