Vue

Collections

Note: The main difference is that the watchEffect starts instantly while the watch() runs lazily
Top 7 tips/features in Vue 3 3. Reactive CSS
How to Destructure Props in Vue (Composition API)
The new Wikipedia appearance that took the whole village
- Vue.js has been selected as Wikimedia Foundation's future JavaScript framework
- RFC: Adopt a modern JavaScript framework for use with MediaWiki and EvanYou comment
What to Expect from Vue in 2023 and How it Differs from React
Why I’m sticking with Vue in 2023
- Script setup + composition API produce clean code
- Performance is good
- Best tooling I have used
[Core Team RFC] New SFC macro: defineModel
useFetch triggers a request on the client side in nested components (using resolveComponent) #20476
Vue - scoped style leak
Hydration Mismatch
- invalid HTML nesting structure
- randomly generated values
- The server and the client are in different time zones

nextTick

How to Use nextTick() in Vue

If you don't supply the callback argument to Vue.nextTick() or this.$nextTick(): then the functions would return a promise that's being resolved when DOM is updated.
Using this with an async/await syntax makes the code more readable than the callbacks approach.

await this.$nextTick()
console.log(this.show, this.$refs.content)

How to wait for a browser re-render? Vue.nextTick doesn't seem to cover it, and setTimeout(..., 0) is not good enough.

await this.$nextTick()

리포트 데이터를 테이블로 그리는 탭을 띄우고 바로 인쇄를 호출 했을 때, 테이블 내용이 모두 렌더링 되지 않은 상태에서 인쇄 상태로 전환됨.
해서 DOM에 해당 데이터가 업데이트 됐는지 cockatiel를 통해 polling으로 확인 후 nextTick으로 인쇄 시도 했는데 역시 렌더링이 완료 안된 상태로 진행 됨. DOM 적용과 rendering 시간차가 꽤 되는 듯

this.$nextTick(window.print) // no rendering completed

위 code와 동일한 걸로 보이는 vue issue link에 나온 다음 code로는 잘 됨.

await this.$nextTick()
window.print() // rendering completed

double `requestAnimationFrame`

다음 2 링크도 흥미로움.
setTimeout 0은 안되고 25가 되는 이유.

filter

declare

Vue.filter("USD", (value) => {
  if (typeof value !== "number") throw "value must be number"

  const formatter = new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
  })
  return formatter.format(value)
})

use in template

{{ price | USD}}

use in javascript

this.$options.filter.USD(this.price)

About event

Vue Prevent form submit when pressing enter inside form

You can prevent submission on enter key down just annotating the top-level form.

<form @submit.prevent="handleLogin" @keydown.enter="$event.preventDefault()" />

Children