How to implement Computed and Watchers functionality in lit
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 142
- Forks
- 230
- PR merge metrics
- No merged PRs in 30d
Description
Hello Team,
I just wanted to know how to achieve computed and watch functionality in the lit element.
****Computed:-** A computed property automatically tracks its reactive dependencies.**
**computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}**
****Watchers:-** Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation.**
With Composition API, we can use them to trigger a callback whenever a piece of reactive state changes
const obj = reactive({ count: 0 })
watch(obj, (newValue, oldValue) => {
// fires on nested property mutations
// Note: `newValue` will be equal to `oldValue` here
// because they both point to the same object!
})
obj.count++
**Developers if we can implement functionality Computed and Watchers. Just let me know ?**
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no repository file, test, or entry point. Start by comparing Lit element's reactive state model with the Computed and Watchers examples in the issue, then define the desired behavior and acceptance criteria before considering an implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100