Vue.js? ?? ? ???? ? ?? ?? ? ????? ???? ????? ???? ??? ????? ???? ?? ? ????. ?? ??, ? ??? ????? ????? LocalStorage? ?? ?? ????? ???? ????? ? ???? ??? ???? Vue? ?? ? ???? LocalStorage? ?? ???? ??? ?????.

?? ??? ???? ???? ?? ??? ???? LocalStorage? ?? ???? ?? ???? ???? ????.

 ??? vue ({
  EL : "#Counter",
  ??? : () => ({
    ??? : LocalStorage.getItem ( "???")
  }),
  ?? : {
    ???() {
      counter % 2 == 0;
    }
  },
  ??? :`<div>
    <div>??? : {{counter}}</div>
    <div>???? {{???? '???': '??'}}</div>
  </div>`
});

 // some-orther-file.js
setInterval (() => {
  const counter = localstorage.getItem ( "counter");
  LocalStorage.setItem ( "???", ??? 1);
}, 1000);

VUE ???? ?? counter ??? ??? ??? LocalStorage?? ??? ???? ??? ???? ????.

? ??? ???? ???? ?? ??? ??? ?? ?? ??? Vuex? ???? ??? ?? LocalStorage? ????? ????. ???? ???? ?? ??? ???? ??? ?? ????????? ??? Vue? ?? ? ???? ??? ?????? ?? ??? ? ??? ??????.

Vue? ?? ?

VUE? ?? ?? ????? ????? data ??? ?????. ?, data ? ?? ??? ???? Object.defineProperty ???? Getter/Setter? ?????. Vue? ? ??? ?? ??? ?? ??? ?????? ??? ?? ??????? ? ? ??? ??? ?? ???? ???? ?? ? ????. ?? ??? ?? ???? ????? ??? ? ? ????? getters? ???? ?? ? ??, ??? ???? ?? ??? ??? ??? ??? ??? ??? ? ? ?? ? ? ????.

 // core/instance/state.js
?? initData () {
  // ...
  ?? (???)
}

 // Core/Observer/Index.js
???? ?? ?? (?) {
  // ...
  ??? ??? (??)
  // ...
}

?? ??? ??? {
  // ...
  ??? (?) {
    // ...
    this.walk (??)
  }

  ?? (obj) {
    const keys = object.keys (obj)
    for (i = 0; i <keys.length i><p> ???? ? LocalStorage? ???? ????? <strong>????? ??? ??? ?????.</strong></p>
<p> ??? ???. ??? ?????? getter? setter? ?? ? ? ??? VUE??? ???? ??? ?????. ??? VUE? ??? ???? ?????. ?? ? ???? ????? Vue? ?? ???? ?? ?? ?? ???? VUE? ?? ? ???? ??????.</p>
<p> LocalStorage? ??? ?? ? ? ?????</p>
<h3> LocalStorage ??? ?? ??????</h3>
<p> ?? LocalStorage ???? ????? ?? ??? ???? LocalStorage ????? ??? ?? ?? ????? ?? ? ? ????.</p>
<p> // LocalStorage Project Key? ?? ???? VUE ???? ?? ??? MAP STROYITEMSUBSCRIPERS = {};</p>
<p> const getitem = window.localstorage.getItem; localStorage.getItem = (?, ??) => {console.info ( "getse", key);</p>
<p> // ?? vue ????? ?? if (! storeitemsubscribers [key]) storeitemsubscribers [key] = []; if (target) storeitemsubscribers [key] .push (target);</p>
<p> // ?? ??? ?????? return getItem.call (localStorage, key); };</p>
<p> const setitem = window.localstorage.setitem; localStorage.setitem = (?, ?) => {console.info ( "setting", key, value);</p>
<p> // if (storeItemSubScriber [key]) {storeItemSubScriber [key] .foreach ((dep) => {if (dep.HasOwnProperty (key)) dep [key] = value;})? ???? vue ????? ?? ???????. }</p>
<p> // ?? ?? setitem.call (localStorage, key, value)? ?????. };</p>
<p> // ... (??? ??? ??? ?? ???? ?????)</p>
<p> ? ???? <code>getItem</code> ? <code>setItem</code> ????? LocalStorage ????? ???? ?? ??? ???? ?????. ??? <code>getItem</code> ?? ??? ?? ?? ?? ??? ????, <code>setItem</code> ??? ??? ???? ?? ?? ??? ???? ??? ??? ?? ?????.</p>
<p> ?? ??? ????? ?? ?? ????? ?? ??? <code>getItem</code> ?? ???? ?? ??? ???????. ? ?? ??? ??? ??? ? ????. ??? ??? ??? <code>this</code> ? ????.</p>
<p> ??? ? ??? ??? ? ?? ??????. ?? ??, ???? ?? ??? ???? ?? ??? ?? ? ? ?????</p>
<h3> VUE?? ???? ???? ??</h3>
<p> ??? ?? ?? Vue? ?? ? ????? ??? ? ????. ??? ??? ??? ? ? ??? ??? getter? ????? ?? ??? ??? ????? ?????. ??? ?? ?????? ??? ? ? ????? ??? ??? ?? ? Getter ???? ???? ????? ?? ??? ????. Getter ???? ??? ????. ?? ????? ?? ????? ??? ? ? ?????</p>
<p> ? ??? ??? <code>Dep</code> ????? ?? ???? ??? ??? ?????. ? ???? ? ?? ?? ?? ???? ?? ? ??? ??? ??? ?? ?? ?? ??? ???? ??? ? ? ????. ? ??? ???? ??? <code>Watcher</code> ??? ?? ?????. ???, ??? ??? ????, ??? ???? ??? ?? ??? ? ???? ????? ?? ? ??? ? ???? ????? ???????.</p>
<p> ??? ??, ??? ??????</p>
<p> VUE? ??? ??? ?? ? ????? ? ?? ? ?? ??? ?? ???? ?? ?? ?? ( <code>Watcher</code> ???? ???? ??? ?) ? ? ?? ?? ????? ??? ??? ????. ???? ??? ??? ???? ????. ??? ? ?? ?? ?????.</p>
<ol>
<li> <strong>??? ?? ??? ??? ?????.</strong> ??? ??? ??? ?????.</li>
<li> <strong>??? ???? ?? ?????? ??? ??? ?? ?????.</strong> ??? ?? ?? ? ??? ?? ????? ?? ?? ??? ? ??????.</li>
</ol>
<p> ???? ???? ??? ???? ?? ??? ??? ?????. <strong><code>Dep</code> ???? ?? ??? ??? ???? ?????.</strong> ?? ?? ?? ? ??? ??? ??? ? ? ????? ?????.</p>
<h3> ?? LocalStorage?? ???? ??????</h3>
<p> ??? Vue? ?? ????? ??? ? ? ?? ??? ??? ? ? ????. ??? VUE ????? ???? ???? ???? ??? ???? ?? ?? ??? ??? ??? ? ????. LocalStorage? ???? ?? ?? ?? ????? ?? ??? ??? ? ?????</p>
<p> ??? ??? ??? ? LocalStorage? ????? ????, ??? <code>beforeCreate</code> ?? <code>created</code> ?? ??? ? ????. ? ? ??? ??? ??? ????? ??? ????? ??? ??? ?? ? ?? ?? ?? ?? ????? ???? ?? ??? ?? ? ???? (Lifecycle Hook?? ??? ? ? ??). ?? ?? ??? ?? ??? ??? ????? ?? ? ? ????.</p>
<p> ????? ? ??? ??? ????? ?? ?? ??? ??? ??? ????. ?? ????? ?? Global Mixin? ?????? ?? ? ? ????.</p>
<p> // ... (??? ??? ??? ?? ???? ?????)</p>
<p> ?? ?? ??? ???? ?? ??? ????? ???? ?????.</p>
<p> // ... (??? ??? ??? ?? ???? ?????)</p>
<h3> ??? ?? ??? ?</h3>
<p> ??? ?? ??? ?????, ??? ?? ?? ????? ?? ??????. ?? ? ???? ?? ? ???? ?? ?? ?? ????? ?? ?? ??? ?????. ?? ?? ?? ????? ?? ??? LocalStorage? ??? ???? ??? ?? ???? ?? ?? ?? ?? ??? ????. ?, ?? ??? Vue Responsive Systems? ?? ??? ??? ????? ? ? ???? ??? ???? ????.</p></keys.length>

? ??? Vue?? ?? ????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!