Vue: μ–΄λ ˆμ΄ μ„œλΈŒν΄λž˜μ‹± 지원

에 λ§Œλ“  2018λ…„ 12μ›” 27일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: vuejs/vue

버전

2.5.21

μž¬μƒμ‚° 링크

https://codepen.io/AmrIKhudair/pen/NevxML

μž¬ν˜„ 단계

1- Arrayλ₯Ό ν™•μž₯ν•˜λŠ” 클래슀λ₯Ό λ§Œλ“€κ³  μ‚¬μš©μž 지정 λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
2- 클래슀의 μƒˆ μΈμŠ€ν„΄μŠ€λ₯Ό μΈμŠ€ν„΄μŠ€ν™”ν•˜κ³  데이터에 μΆ”κ°€
3- ν…œν”Œλ¦Ώμ˜ μΈμŠ€ν„΄μŠ€μ—μ„œ λ©”μ„œλ“œ 호좜 μ‹œλ„

무엇을 κΈ°λŒ€ν•©λ‹ˆκΉŒ?

λ©”μ†Œλ“œκ°€ μ„±κ³΅μ μœΌλ‘œ 싀행됨

μ‹€μ œλ‘œ 무슨 일이 μΌμ–΄λ‚˜κ³  μžˆμŠ΅λ‹ˆκΉŒ?

ν•¨μˆ˜κ°€ μ•„λ‹Œ 였λ₯˜

feature request

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

@AmrIKhudair
λ‚˜λŠ” 이것도 ν•„μš”ν–ˆκ³  μ‚¬μš©μž μ˜μ—­μ—μ„œ μž‘λ™ν•˜λ„λ‘ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. Vue 3이 λ„μ°©ν•˜λ©΄ μ œκ±°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

export function makeReactive (obj) {
  // eslint-disable-next-line no-proto
  const proto = obj.__proto__

  Object.defineProperty(obj, '__proto__', {
    get () { return proto },
    // eslint-disable-next-line no-proto
    set (newValue) { proto.__proto__ = newValue }
  })
}
import { makeReactive } from 'util'

export default class UserCollection extends Array {
  constructor (...args) {
    super(...args)

    makeReactive(this)
  }
}

λͺ¨λ“  3 λŒ“κΈ€

Vue 2λŠ” ν˜„μž¬ Array μ„œλΈŒν΄λž˜μ‹±μ„ μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€(Vue 3 개발 λΈŒλžœμΉ˜λŠ” 이미 μ§€μ›ν•©λ‹ˆλ‹€). 이것을 κΈ°λŠ₯ μš”μ²­μœΌλ‘œ λ³€ν™˜ν•˜κ² μŠ΅λ‹ˆλ‹€.

@AmrIKhudair
λ‚˜λŠ” 이것도 ν•„μš”ν–ˆκ³  μ‚¬μš©μž μ˜μ—­μ—μ„œ μž‘λ™ν•˜λ„λ‘ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. Vue 3이 λ„μ°©ν•˜λ©΄ μ œκ±°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

export function makeReactive (obj) {
  // eslint-disable-next-line no-proto
  const proto = obj.__proto__

  Object.defineProperty(obj, '__proto__', {
    get () { return proto },
    // eslint-disable-next-line no-proto
    set (newValue) { proto.__proto__ = newValue }
  })
}
import { makeReactive } from 'util'

export default class UserCollection extends Array {
  constructor (...args) {
    super(...args)

    makeReactive(this)
  }
}

@edcoreweb
정말 κ°μ‚¬ν•©λ‹ˆλ‹€

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰