Vue: рд╕рдорд░реНрдерди рдРрд░реЗ рдЙрдкрд╡рд░реНрдЧ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 27 рджрд┐рд╕ре░ 2018  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vuejs/vue

рд╕рдВрд╕реНрдХрд░рдг

2.5.21

рдкреНрд░рдЬрдирди рд▓рд┐рдВрдХ

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

рдкреНрд░рдЬрдирди рдХреЗ рдЪрд░рдг

1- рдРрд░реЗ рдХрд╛ рд╡рд┐рд╕реНрддрд╛рд░ рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рдПрдХ рд╡рд░реНрдЧ рдмрдирд╛рдПрдВ рдФрд░ рдПрдХ рдХрд╕реНрдЯрдо рд╡рд┐рдзрд┐ рдЬреЛрдбрд╝реЗрдВ
2- рдХреНрд▓рд╛рд╕ рдХреЗ рдПрдХ рдирдП рдЗрдВрд╕реНрдЯреЗрдВрд╕ рдХреЛ рдЗрдВрд╕реНрдЯреЗрдВрдЯ рдХрд░реЗрдВ рдФрд░ рдЗрд╕реЗ рдбреЗрдЯрд╛ рдореЗрдВ рдЬреЛрдбрд╝реЗрдВ
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)
  }
}

рд╕рднреА 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 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

paceband picture paceband  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

loki0609 picture loki0609  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

franciscolourenco picture franciscolourenco  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Jokcy picture Jokcy  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

bdedardel picture bdedardel  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ