Как определить свойство данных в веб-компоненте, установленном или измененном

Question

HTML:

<comp-two></comp-two>

JS:

class CompTwo extends HTMLElement {
    constructor() {
        super()
        this._options=[]
    }
    get options() {
        return this._options
    }
    set options(val) {
        this._options = val
    }
}

const el = document.querySelector('comp-two')
el.options = ['one','two','three']

Существует ли принятый метод для уведомления кода внутри webComponent о том, что свойство установлено? Если есть какая-то разница, я вкладываю веб-компоненты.

Я вижу, что установка атрибута сделает это, но кажется расточительным?

Answer 1

Свойство может быть прочитано напрямую:

console.log(this.propertyName)

Но так как значение может измениться в любое время после создания компонента, проблема заключается в том, чтобы знать , когда происходит изменение, аналогично о том, как attributeChangedCallback используется для обновления атрибутов.

A setter сработает при записи именованного свойства. Как и attributeChangedCallback для атрибутов, значение свойства не обязательно изменилось .

set propertyName(val){
    this._propertyName = val // keep a copy, name must be different
                             // underscore is popular method
    this.doSomething(val)    // act on the new property value
}

get propertyName(){
    return this._propertyName
}

Примечание. После включения метода установки свойство больше не может быть прочитано напрямую. Используйте getter , чтобы вернуть локальную копию, сохраненную установщиком, или просто прочитайте локальную копию напрямую.

Пенни, наконец, уронили для меня ..