增加默认render; 优化渲染机制,避免在vue下被渲染2次

pull/1/head 1.5.8
yutent 2023-03-21 18:23:13 +08:00
parent 310e2bff1e
commit 886829f44d
3 changed files with 16 additions and 8 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@bd/core", "name": "@bd/core",
"version": "1.5.7", "version": "1.5.8",
"type": "module", "type": "module",
"description": "百搭UI组件库的核心", "description": "百搭UI组件库的核心",
"main": "dist/index.js", "main": "dist/index.js",

View File

@ -51,6 +51,7 @@ export const __attr2prop__ = Symbol('attr2prop')
export const __clear_update__ = Symbol('clearupdate') export const __clear_update__ = Symbol('clearupdate')
export const __children__ = Symbol('children') export const __children__ = Symbol('children')
export const __updated__ = Symbol('updated') export const __updated__ = Symbol('updated')
export const __in_tree__ = Symbol('intree')
export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}` export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}`

View File

@ -19,7 +19,8 @@ import {
__attr2prop__, __attr2prop__,
__clear_update__, __clear_update__,
__children__, __children__,
__updated__ __updated__,
__in_tree__
} from './constants.js' } from './constants.js'
import { css, adoptStyles } from './css.js' import { css, adoptStyles } from './css.js'
import { render, html, svg } from './html.js' import { render, html, svg } from './html.js'
@ -102,6 +103,7 @@ export class Component extends HTMLElement {
super() super()
this[__pending__] = false this[__pending__] = false
this[__mounted__] = false this[__mounted__] = false
this[__in_tree__] = false
// 这里提前定义一次, 是为了在connectedCallback之前, 就已有赋值时报错的bug // 这里提前定义一次, 是为了在connectedCallback之前, 就已有赋值时报错的bug
this[__changed_props__] = new Map() // 记录一次渲染周期内变化的属性 this[__changed_props__] = new Map() // 记录一次渲染周期内变化的属性
this.root = this.shadowRoot || this.attachShadow({ mode: 'open' }) this.root = this.shadowRoot || this.attachShadow({ mode: 'open' })
@ -215,22 +217,24 @@ export class Component extends HTMLElement {
// 确认更新到视图 // 确认更新到视图
[__updated__]() { [__updated__]() {
if (this[__pending__]) { if (this[__in_tree__] === false) {
try { this[__in_tree__] = document.body.contains(this)
}
if (this[__in_tree__]) {
if (this[__pending__]) {
let props = this[__changed_props__] let props = this[__changed_props__]
this[__render__]() this[__render__]()
this[__feedback__](props) this[__feedback__](props)
} catch (err) { this[__clear_update__]()
console.error(err)
} }
this[__clear_update__]()
} }
} }
// 更新回调反馈 // 更新回调反馈
[__feedback__](props) { [__feedback__](props) {
// 初始化时不触发updated回调 // 初始化时不触发updated回调
if (!this[__mounted__]) { if (this[__mounted__] === false) {
this[__mounted__] = true this[__mounted__] = true
this.mounted() this.mounted()
} else { } else {
@ -257,6 +261,9 @@ export class Component extends HTMLElement {
mounted() {} mounted() {}
unmounted() {} unmounted() {}
updated() {} updated() {}
render() {
return html`<slot></slot>`
}
$on(type, callback, options) { $on(type, callback, options) {
return bind(this, type, callback, options) return bind(this, type, callback, options)