Vue: .once рдЕрдкрдиреЗ рдЖрдк рдХреЗ рд╕рд╛рде рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдирд╣реАрдВ рдЬрд╛рддрд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 2 рдлрд╝рд░ре░ 2017  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vuejs/vue

рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рддрддреНрд╡ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВ:

<div @click.self.once="eat">Eat <span>me</span></div>

рдпрджрд┐ рд╣рдо "рдИрдЯ" рд╢рдмреНрдж рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рд╕рдм рдХреБрдЫ рдЙрдореНрдореАрдж рдХреЗ рдореБрддрд╛рдмрд┐рдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдШрдЯрдирд╛ рдХреЛ рдПрдХ рдмрд╛рд░ рдирд┐рдХрд╛рд▓ рджрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ рдФрд░ рд╣рдо рдЦреБрд╢ рд╣реИрдВред

рд▓реЗрдХрд┐рди рдЕрдЧрд░ рд╣рдо "рдореБрдЭ" рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддреЗ рд╣реИрдВ, рдЬреЛ рдмрд╛рд▓ рдиреЛрдб рд╣реИ, рдФрд░ рдлрд┐рд░ рд╣рдо "рдИрдЯ" рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдШрдЯрдирд╛ рдХрднреА рднреА рдирд┐рдХрд╛рд▓ рдирд╣реАрдВ рджреА рдЬрд╛рдПрдЧреА! рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ .once рдХреЛ рдХрд┐рд╕реА рдШрдЯрдирд╛ рдХреЛ рдирд┐рдХрд╛рд▓ рджрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЖрд╕рд╛рди рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ .once рдХреЛ рдХреЗрд╡рд▓ рдЙрд╕реА рд░реВрдк рдореЗрдВ рдЪрд┐рд╣реНрдирд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рдЬрдм рдЙрд╕реЗ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдирд┐рдХрд╛рд▓ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╣реЛред

рд╕рднреА 6 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдореБрджреНрджрд╛ рджрд░реНрдЬ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рдХреГрдкрдпрд╛ рд╕реВрдЪрдирд╛ рд░рд┐рдкреЛрд░реНрдЯрд┐рдВрдЧ рджрд┐рд╢рд╛рдирд┐рд░реНрджреЗрд╢реЛрдВ рдХрд╛ рдкрд╛рд▓рди рдХрд░реЗрдВ рдФрд░ рдПрдХ рдиреНрдпреВрдирддрдо JSFiddle рдпрд╛ JSBin рдкреНрд░рджрд╛рди рдХрд░реЗрдВ рдЬрд┐рд╕рдореЗрдВ рдкреНрд░рддрд┐рд▓рд┐рдкрд┐ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдпреЛрдЧреНрдп рдЪрд░рдгреЛрдВ рдХрд╛ рдПрдХ рд╕реЗрдЯ рд╣реЛрддрд╛ рд╣реИ рдЬреЛ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рд╡рд░реНрдгрд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░ рдХреЛ рдЬрдиреНрдо рджреЗ рд╕рдХрддрд╛ рд╣реИред

рдЗрд╕рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдХреНрдпреЛрдВ рд╣реИ?

рдирдорд╕реНрддреЗ,

рдореИрдВ рдУрдкреА рдирд╣реАрдВ рд╣реВрдВ рд▓реЗрдХрд┐рди рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдореИрдВ рдЙрд╕ рдореБрджреНрджреЗ рдХреЛ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛ рдЬрд┐рд╕рдХрд╛ рд╡рд╣ рдЬрд┐рдХреНрд░ рдХрд░ рд░рд╣рд╛ рдерд╛ред рдореИрдВрдиреЗ рдЪрд┐рддреНрд░рдг рдХреЗ рд▓рд┐рдП рдиреАрдЪреЗ рдПрдХ JSFiddle рд╕рдВрд▓рдЧреНрди рдХрд┐рдпрд╛ред

JSFiddle

  1. 'рдИрдЯ' рд╢рдмреНрдж рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдирд╛ рдЙрдореНрдореАрдж рдХреЗ рдореБрддрд╛рдмрд┐рдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ: рдИрд╡реЗрдВрдЯ рдХреЛ рдирд┐рдХрд╛рд▓ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рдлрд▓реЛрдВ рдХреЗ рдбреЗрдЯрд╛ рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

  2. рдпрджрд┐ рд╣рдо JSFiddle рдХреЛ рдкреБрдирдГ рд▓реЛрдб рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рд╕реНрдкреИрди рдЪрд╛рдЗрд▓реНрдб рдПрд▓рд┐рдореЗрдВрдЯ 'рдореА' рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддреЗ рд╣реИрдВ, рдФрд░ рдлрд┐рд░ 'рдИрдЯ' рдкрд░, рдлреНрд░реВрдЯ рдбреЗрдЯрд╛ рдЕрдкрдбреЗрдЯ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИред

рдЙрдореНрдореАрдж рд╣реИ рдпреЗ рдорджрдж рдХрд░реЗрдЧрд╛ред

@boristhuy JSFiddle рдЙрдкрд▓рдмреНрдз рдХрд░рд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рдореЗрд░рд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдпрд╣реА рдорддрд▓рдм рд╣реИред

рдпрд╣ рдПрдХ рдмрдЧ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдИрд╡реЗрдВрдЯ рд╣реИрдВрдбрд▓ рдХреЛ рдПрдХ рдмрд╛рд░ рдкреНрд░рд╡реЗрд╢ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдпрд╣ рд╕рдВрд╢реЛрдзрдХ рдЪреЗрдХ рдХреЗ рдХрд╛рд░рдг рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд▓рд╛рдЧреВ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИред

рд╢рд╛рдпрдж рд╣рдореЗрдВ рдЗрд╕рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП once рдХреЛрдб рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

рдкрд╕рдВрдж

(function(){
  var called = false;
  return function($events){
    // modifiers check
    // called check
    if (called)return;
    called = true;
    // handler code
  }
})()

once рд░реЗрдВрдбрд░ рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдпрд╣ рдПрдХ рдмреНрд░реЗрдХрд┐рдВрдЧ рдкрд░рд┐рд╡рд░реНрддрди рд▓рд╛рдПрдЧрд╛ред рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдХрд╛ рдПрдХ рддрд░реАрдХрд╛ рдЦреЛрдЬрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред

  1. [wip] рдЯреЗрдореНрдкрд▓реЗрдЯ рдХреЗ рд▓рд┐рдП once рдЬреАрдирдХреЛрдб рдЕрдкрдбреЗрдЯ рдХрд░реЗрдВред
  2. [рдХрд┐рдпрд╛] once рд░реЗрдВрдбрд░ рдлрдВрдХреНрд╢рди рдореЗрдВ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рдЧрдпрд╛ on: {'~click': handle} , рдкреБрд░рд╛рдиреА рд░рдгрдиреАрддрд┐ рд░рдЦреЗрдВред
  3. [рдХрд┐рдпрд╛] рдХреЗрд╕ рдмреЗрд▓реЛ рдХреЗ рд▓рд┐рдП рдЕрдкрдбреЗрдЯрд▓рд┐рд╕реНрдЯ рдореЗрдВ рдПрдХ рдмрдЧ рдореМрдЬреВрдж рд╣реИ:
    рдкреБрд░рд╛рдирд╛: '~click': handle
    new: 'click': handle2

@ рджреЗрд╣рд╛рдд рдореИрдВрдиреЗ рдЗрд╕реЗ рд╣реИрдВрдбрд▓рд░ рд╕реЗ рдПрдХ рд╡рд┐рд╢реЗрд╖ рдореВрд▓реНрдп рд╡рд╛рдкрд╕ рдХрд░рдХреЗ рддрдп рдХрд┐рдпрд╛ рд╣реИ рдЬрд┐рд╕реЗ рдирд┐рд╖реНрдкрд╛рджрди рд╕реЗ рд░реЛрдХрд╛ рдЬрд╛рддрд╛ рд╣реИред рдпрд╣ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдЙрд▓реНрд▓рд┐рдЦрд┐рдд 3 (3) рдмрдЧ рдХреЛ рд╕рдВрдмреЛрдзрд┐рдд рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрджрд┐ рдЖрд╡рд╢реНрдпрдХ рд╣реЛ рддреЛ рдПрдХ рдЕрд▓рдЧ рдкреАрдЖрд░ рдореЗрдВ рд╕рдВрднрд╛рд▓ рд▓реЗрдВред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕