{"id":343053,"date":"2022-12-23T09:01:59","date_gmt":"2022-12-23T09:01:59","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=343053"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2022-12-23T09:01:59","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=343053","title":{"rendered":"<span>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 Vue<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u0430\u0440\u0430\u043c\u0443\u0448\u043a\u043e \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440. \u042f \u0440\u0430\u0431\u043e\u0442\u0430\u044e frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Nord Clan.<\/p>\n<p>\u0418\u0437 <a href=\"https:\/\/habr.com\/ru\/company\/nordclan\/blog\/699356\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a> \u043c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u0434\u0438\u043c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c: \u043a\u0430\u043a Vue \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442 \u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0438\u043d\u0430\u0447\u0435, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 Vue?<\/p>\n<p>\u0425\u043e\u0442\u044c \u0441\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Vue <a href=\"https:\/\/vuejs.org\/guide\/extras\/reactivity-in-depth.html\"><u>\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043f\u043e\u0434\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u0443\u0430\u043b\u044c<\/u><\/a>, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043a\u0440\u044b\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u043f\u0440\u0438\u043f\u043e\u0434\u043d\u044f\u0442\u0430 \u043e\u043d\u0430 \u043d\u0435 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e-\u0442\u0430\u043a\u0438 \u043e\u0431\u0448\u0438\u0440\u0435\u043d. \u0418 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a Vue \u00ab\u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0447\u0432\u0443\u00bb \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u0432\u043e Vue, \u0442\u0430\u043a \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0438 \u0444\u0440\u0435\u0439\u0432\u043e\u0440\u043a\u0430\u0445, \u043e\u0431\u0448\u0438\u0440\u043d\u0430, \u0438 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435\u0441\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u0437\u043e\u0440\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0443\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2013 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439:<\/p>\n<pre><code class=\"typescript\">Vue   .createApp({     data: () => ({       dynamic: 1     }),     template: `       &lt;div>         &lt;div>foo&lt;\/div>         &lt;div>bar&lt;\/div>         &lt;div>{{ dynamic }}&lt;\/div>         &lt;button @click=\"() => {          dynamic += 1         }\">increment&lt;\/button>       &lt;\/div>     `,   })   .mount('#app')<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Composition API \u0441 \u0446\u0435\u043b\u044c\u044e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 proxy-\u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 instance.ctx<\/h3>\n<p>\u0412\u0441\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 mountComponent.<\/p>\n<p>\u041a\u0430\u043a \u043f\u043e\u043c\u043d\u0438\u043c, \u0444\u0443\u043d\u043a\u0446\u0438\u044f mountComponent \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0440\u0438 \u0432\u0435\u0449\u0438: \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 instance \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0430 \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0432\u044b\u0437\u044b\u0432\u0430\u044f render-\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 patch \u043d\u0430 \u0435\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435:<\/p>\n<pre><code class=\"typescript\">const mountComponent: MountComponentFn = (   initialVNode,   container, ) => {   \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e instance \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430   const instance: ComponentInternalInstance = (     initialVNode.component = createComponentInstance(initialVNode)       )    \/\/ \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0437\u0434\u0435\u0441\u044c   setupComponent(instance)     \/\/ \u0430 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433   setupRenderEffect(     instance,     container,   ) }<\/code><\/pre>\n<p>setupComponent (\u043e\u0442\u043c\u0435\u0447\u0435\u043d \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u043a\u0430\u043a \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u043e\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432) \u043f\u043e\u043c\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 proxy-\u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 instance.ctx \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c data:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/de7\/942\/046\/de794204676a6a4a50648387568f2a6a.png\" alt=\"\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 instance.ctx \u0438 $data \u0432 proxy \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupComponent\" title=\"\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 instance.ctx \u0438 $data \u0432 proxy \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupComponent\" width=\"300\" height=\"279\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de7\/942\/046\/de794204676a6a4a50648387568f2a6a.png\"\/><figcaption>\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 instance.ctx \u0438 $data \u0432 proxy \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupComponent<\/figcaption><\/figure>\n<p>proxy-\u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f data \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 reactive:<\/p>\n<pre><code class=\"typescript\">instance.data = reactive(data)<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f reactive \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 proxy-\u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 data, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430 \u043b\u043e\u0432\u0443\u0448\u043a\u0438 set, get, has, ownKeys, defineProperty:<\/p>\n<pre><code class=\"typescript\">const mutableHandlers: ProxyHandler&lt;object> = {   get,   set,   deleteProperty,   has,   ownKeys }  const proxy = new Proxy(   target,   mutableHandlers )<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 data.dynamic \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c proxy-\u043b\u043e\u0432\u0443\u0448\u043a\u0438 set \u0438 get \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 Vue 2<\/summary>\n<div class=\"spoiler__content\">\n<p><em>\u041a\u0441\u0442\u0430\u0442\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432 Vue 2 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435?<\/em><\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432 data \u0435\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 names \u0438 \u043c\u044b \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u0435 \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u00abthis.names[0] = \/\/ \u2026\u00bb, \u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/em><\/p>\n<p><em>Proxy \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 Object.defineProperty \u0441 get-\u00a0 \u0438 set- \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0432 Vue 2 \u043d\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043d\u0438\u0445.<\/em><\/p>\n<p><em>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 Vue 2 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c <\/em><a href=\"https:\/\/vuejsdevelopers.com\/2017\/03\/05\/vue-js-reactivity\/#vue-2-reactivity-caveats\"><em><u>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/u><\/em><\/a><em> \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u00ab\u0434\u0430\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u00bb \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 Object.defineProperty \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/em><\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a\u0436\u0435 setupComponent \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 instance.ctx \u0432 proxy \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 accessCache, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a data, props, setupState \u0438 \u0442.\u043f.:<\/p>\n<pre><code class=\"typescript\">\/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e\u0433\u043e dictionary \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \/\/ \u0438 \u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 AccessTypes instance.accessCache = Object.create(null)  const PublicInstanceProxyHandlers: ProxyHandler&lt;any> = {   get({ _: instance }: ComponentRenderContext, key: string) {      \/\/ \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043a key \u0432 accessCache    },    set(     { _: instance }: ComponentRenderContext,      key: string,      value: any    ): boolean {       \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 key \u0432 setupState, data, props, context     }, }  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 dynamic \u043f\u0440\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 accessCache \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d AccessTypes.DATA, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00ab2\u00bb.<\/p>\n<p>PublicInstanceProxyHandlers \u2013 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442-\u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435 \u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043b\u043e\u0432\u0443\u0448\u0435\u043a get, set \u0438 \u0442.\u0434., \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 dynamic \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f getter \u043d\u0430 PublicInstanceProxyHandlers, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 (\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 dynamic \u043f\u043e accessCache \u0438\u043b\u0438 \u0437\u0430\u043f\u0438\u0441\u044c dynamic \u0432 accessCache \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 setupState, data \u0438 \u0442.\u043f.), \u0430 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c getter \u0438\u0437 mutableHandlers \u043d\u0430 \u0441\u0430\u043c\u043e\u0439 data.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f getter-\u044b \u0438\u0437 PublicInstanceProxyHandlers \u0438 mutableHandlers, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043c\u0435\u0442\u044f\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e data.dynamic \u043a\u0430\u043a \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0435\u0435 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h3>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a2c\/950\/c4d\/a2c950c4d2456ec6b1ae84f6ed394ff0.png\" alt=\"\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 dynamic \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0437\u043e\u0432\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupRenderEffect\" title=\"\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 dynamic \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0437\u043e\u0432\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupRenderEffect\" width=\"500\" height=\"509\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a2c\/950\/c4d\/a2c950c4d2456ec6b1ae84f6ed394ff0.png\"\/><figcaption>\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 dynamic \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0437\u043e\u0432\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupRenderEffect<\/figcaption><\/figure>\n<p>setupRenderEffect \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, ReactiveEffect, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u00ab\u0440\u0430\u0437\u0440\u0443\u043b\u0438\u0432\u0430\u0442\u044c\u00bb \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">const effect = new ReactiveEffect(   componentUpdateFn,   () => queueJob(update),   instance.scope )<\/code><\/pre>\n<p>componentUpdateFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 patch, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u0435\u0445 \u0438\u043b\u0438 \u0438\u043d\u044b\u0445 vnode \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0438\u0445 \u0442\u0438\u043f\u0430\u043c \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, processComponent, processElement, processText \u0438 \u0442.\u043f. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e <a href=\"https:\/\/habr.com\/ru\/company\/nordclan\/blog\/699356\/\"><u>\u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/u><\/a>.<\/p>\n<p><code>() => queueJob(update)<\/code> \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043e\u043a \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (\u0432\u044b\u0437\u043e\u0432 componentUpdateFn). \u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u044d\u0442\u043e \u043d\u0435\u043a\u0438\u0439 \u00ab\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u00bb \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<details class=\"spoiler\">\n<summary>watch<\/summary>\n<div class=\"spoiler__content\">\n<p><em>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e queueJob \u0435\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, queuePreFlushCb \u0438 queuePostFlushCb, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 <\/em><a href=\"https:\/\/vuejs.org\/guide\/essentials\/watchers.html#callback-flush-timing\"><em><u>watch<\/u><\/em><\/a><em>, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435 watch (\u043e\u043f\u0446\u0438\u044f flush) \u0434\u043e \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0435.<\/em><\/p>\n<\/div>\n<\/details>\n<p>instance.scope \u2013 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0438\u043c scope, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u043c \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p><code>new ReactiveEffect()<\/code> \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0432 scope \u043d\u043e\u0432\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u2013 componentUpdateFn:<\/p>\n<pre><code class=\"typescript\">class ReactiveEffect {  constructor(     public fn: () => T,     scope?: EffectScope   ) {     \/\/ fn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 componentUpdateFn     scope.effects.push(fn)   } }<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, scope \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c watch.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u00ab\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u043e\u0440\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u0432 instance.update \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">const effect = new ReactiveEffect(    \/\/ \u2026  )  const update: SchedulerJob = () => effect.run()  update()<\/code><\/pre>\n<p>update \u0432\u044b\u0437\u043e\u0432\u0435\u0442 effect.run, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0430\u043a \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442, activeEffect:<\/p>\n<pre><code class=\"typescript\">let activeEffect: ReactiveEffect | undefined  class ReactiveEffect {   run() {     activeEffect = this      return this.fn()   } }<\/code><\/pre>\n<p>this.fn \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 componentUpdateFn, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u044b\u0437\u043e\u0432\u0435\u0442 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a dynamic:\u00a0<\/p>\n<pre><code class=\"typescript\">return function render(_ctx, _cache) {   with (_ctx) {      \/\/ ...      return (_openBlock(), _createElementBlock(\"div\", null, [          \/\/ ...          \/\/ \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a dynamic \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 get-\u043b\u043e\u0432\u0443\u0448\u0435\u043a \u043d\u0430  instance.ctx \u0438 $data        _createElementVNode(\"div\", null, _toDisplayString(dynamic), 1 \/* TEXT *\/),       ])     )   } }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0432\u0441\u0435<\/summary>\n<div class=\"spoiler__content\">\n<p><em>\u0414\u0430, \u043a\u0441\u0442\u0430\u0442\u0438, \u044f \u0437\u0430\u0431\u044b\u043b \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0432 <\/em><a href=\"https:\/\/habr.com\/ru\/company\/nordclan\/blog\/690522\/\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a><em>, \u0447\u0442\u043e dynamic \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 <\/em><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Statements\/with\"><em><u>with<\/u><\/em><\/a><em>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u00ab\u043d\u0430 \u043b\u0435\u0442\u0443\u00bb, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u0441\u0430\u043c\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u0435\u0447\u043d\u0443\u044e \u043d\u043e\u0442\u0430\u0446\u0438\u044e.<\/em><\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a dynamic \u0432\u044b\u0437\u043e\u0432\u0435\u0442 proxy-\u043b\u043e\u0432\u0443\u0448\u043a\u0443 get \u0438\u0437 instance.ctx, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a dynamic \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0435\u0433\u043e \u0432 accessCache, \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0432 \u0435\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 AccessType, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043b\u044e\u0447 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 O(n):<\/p>\n<pre><code class=\"typescript\">{   get(target: Target, key: string | symbol) {     \/\/ \u043f\u0435\u0440\u0432\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043a\u043b\u044e\u0447\u0443 \u0438\u0437 data \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 hasOwn     if (data !== EMPTY_OBJ &amp;&amp; hasOwn(data, key)) {       accessCache![key] = AccessTypes.DATA       return data[key]     }   } }<\/code><\/pre>\n<p>\u0410 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 dynamic \u0432\u043e\u0437\u044c\u043c\u0435\u0442\u0441\u044f \u0438\u0437 accessCache:<\/p>\n<pre><code class=\"typescript\">\/\/ \u0432\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043a\u043b\u044e\u0447\u0443 \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 accessCache const n = accessCache![key]  \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 hasOwn \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043b\u0438\u0441\u044c  \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u043a\u043b\u044e\u0447\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 if (n !== undefined) {   switch (n) {     case AccessTypes.SETUP:       return setupState[key]     case AccessTypes.DATA:       \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 data.dynamic \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0437\u0434\u0435\u0441\u044c       return data[key]     case AccessTypes.CONTEXT:       return ctx[key]     case AccessTypes.PROPS:       return props![key]   } }<\/code><\/pre>\n<p>\u041f\u043e\u043c\u043d\u0438\u043c, data \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u043b\u0430 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u0430 \u0432 proxy, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a data[key] \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043e \u0432 mutableHandlers \u043d\u0430 get-\u043b\u043e\u0432\u0443\u0448\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0441\u043b\u0435\u0436\u0435\u043d\u0438\u0435 \u0437\u0430 dynamic:<\/p>\n<pre><code class=\"typescript\">{   get(target: Target, key: string | symbol) {     \/\/ target \u0440\u0430\u0432\u043d\u044b\u0439 { dynamic: 1 }     \/\/ key \u0440\u0430\u0432\u043d\u044b\u0439 dynamic     track(target, TrackOpTypes.GET, key)   { }<\/code><\/pre>\n<p>\u0422\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u043b\u043e\u0432\u043a\u043e\u0441\u0442\u044c\u044e \u0440\u0443\u043a \u0431\u0435\u0437 \u043c\u043e\u0448\u0435\u043d\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f track \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f data \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445, \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0435\u0433\u043e \u0432 WeakMap.<\/p>\n<p>WeakMap \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0435 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043d\u0438 \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u0430 \u0432\u043e\u0442 <a href=\"https:\/\/habr.com\/ru\/company\/oleg-bunin\/blog\/433318\/\"><u>\u0441\u0441\u044b\u043b\u043a\u0430<\/u><\/a>, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0432\u0435\u0436\u0438\u0442\u044c \u0432\u0430\u0448\u0443 \u043f\u0430\u043c\u044f\u0442\u044c \u043e \u0441\u0441\u044b\u043b\u043a\u0430\u0445 \u0432 JS :D):<\/p>\n<pre><code class=\"typescript\">const targetMap = new WeakMap&lt;any, KeyToDepMap>()  function track(target: object, type: TrackOpTypes, key: unknown) {   \/\/ \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 target \u0440\u0430\u0432\u043d\u043e\u043c\u0443 { dynamic: 1 }   let depsMap = targetMap.get(target)    \/\/ \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 { dynamic: 1 }, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0435   if (!depsMap) {     depsMap = new Map()     targetMap.set(target, depsMap)   }    \/\/ ... }<\/code><\/pre>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c targetMap \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043d\u0435\u0433\u043e data, \u0433\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 data, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u2013 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/289\/7d8\/838\/2897d883800ba5a09cf1fec7badae0a0.png\" alt=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 data \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430\" title=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 data \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430\" width=\"300\" height=\"141\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/289\/7d8\/838\/2897d883800ba5a09cf1fec7badae0a0.png\"\/><figcaption>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 data \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430<\/figcaption><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0430 \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f dynamic \u0438, \u0435\u0441\u043b\u0438 \u0438\u0445 \u043d\u0435\u0442, \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043d\u043e\u0432\u0430\u044f:<\/p>\n<pre><code class=\"typescript\">function track(target: object, type: TrackOpTypes, key: unknown) {    \/\/ \u2026    \/\/ \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u043b\u044e\u0447\u0430 \u0440\u0430\u0432\u043d\u043e\u0433\u043e dynamic   let dep = depsMap.get(key)    \/\/ \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f dynamic, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0445   if (!dep) {     dep = createDep()     depsMap.set(key, dep)   } }<\/code><\/pre>\n<p>\u0418 \u0442\u0435\u043f\u0435\u0440\u044c targetMap \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bdc\/bce\/783\/bdcbce783334e243d541c5ea458189ba.png\" alt=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e dynamic \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438\" title=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e dynamic \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438\" width=\"400\" height=\"243\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bdc\/bce\/783\/bdcbce783334e243d541c5ea458189ba.png\"\/><figcaption>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e dynamic \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438<\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f <code>{ dynamic: 1 }<\/code> \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u043e\u0432\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c dynamic, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 Set-\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 trackEffect, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0434\u043b\u044f dynamic \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b:<\/p>\n<pre><code class=\"typescript\">function track(target: object, type: TrackOpTypes, key: unknown) {   \/\/ ...    let dep = depsMap.get(key)    \/\/ ...    trackEffects(dep) }<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a dynamic \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0442\u043e trackEffects \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0434\u043b\u044f dynamic \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442, \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \u0432 setupRenderEffect:<\/p>\n<pre><code class=\"typescript\">function trackEffects(dep: Dep) {   \/\/ fn \u2013 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e componentUpdateFn   dep.add(activeEffect!) }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 dynamic \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442, \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 data.dynamic, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 accessCache \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435, \u0432 data.dynamic \u0431\u044b\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 data.dynamic \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Composition API<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043d\u0430 \u043e\u0434\u0438\u043d \u043c\u0438\u0433 \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0441\u0442\u0438\u043b\u0435 Composition API:<\/p>\n<pre><code class=\"typescript\">Vue  .createApp({    setup() {      const dynamic = Vue.ref(1)      const dynamicSquare = Vue.computed(() => dynamic.value ** 2);       return {        dynamic,        dynamicSquare,      }    },    template: `      &lt;div>        &lt;div>foo&lt;\/div>        &lt;div>bar&lt;\/div>        &lt;div>{{ dynamic }}&lt;\/div>        &lt;div>{{ dynamicSquare }}&lt;\/div>        &lt;button @click=\"() => {          dynamic += 1        }\">increment&lt;\/button>      &lt;\/div>    `,  })  .mount('#app')<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, dynamic \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0432 ref, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0435 \u043e\u0442 dynamic \u2013 dynamicSquare, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e\u0435 \u0432 computed. \u0422\u043e \u0435\u0441\u0442\u044c dynamicSquare \u043f\u043e \u0441\u0443\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u0443 dynamic, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a dynamic.value.<\/p>\n<p>\u0421\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3a2\/16a\/677\/3a216a677145e6563a97b11349da9b4a.png\" alt=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 setup \u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043d\u0435\u043c\u0443 \u0432 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 setup \u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043d\u0435\u043c\u0443 \u0432 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438\" width=\"1530\" height=\"1600\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3a2\/16a\/677\/3a216a677145e6563a97b11349da9b4a.png\"\/><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 setup \u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043d\u0435\u043c\u0443 \u0432 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/figcaption><\/figure>\n<p>ref \u0438 computed \u0441\u043e\u0437\u0434\u0430\u0434\u0443\u0442 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 RefImpl \u0438 ComputedRefImpl \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0432\u043e\u0438 get- \u0438 set- \u043c\u0435\u0442\u043e\u0434\u044b. \u041e\u0434\u043d\u0430\u043a\u043e ComputedRefImpl \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 ReactiveEffect, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>dynamic.value ** 2<\/code> \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u0438:<\/p>\n<pre><code class=\"typescript\">class ComputedRefImpl&lt;T> {    constructor(     getter: ComputedGetter&lt;T>,   ) {     \/\/ getter \u0440\u0430\u0432\u043d\u044b\u0439 () => dynamic.value ** 2     this.effect = new ReactiveEffect(getter, () => {       \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c       triggerRefValue(this)     })   }    get value() {     \/\/ \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c getter \u0440\u0430\u0432\u043d\u044b\u0439 () => dynamic.value ** 2     self._value = self.effect.run()      return self._value   } }<\/code><\/pre>\n<p>Vue.ref \u0438 Vue.computed \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 setup. \u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 setup \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043d\u0435\u0442. \u042d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 data, \u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0443\u0436\u0435 \u0441\u0430\u043c\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 (RefImpl \u0438 ComputedRefImpl).<\/p>\n<p>setup \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 setupComponent:<\/p>\n<pre><code class=\"typescript\">const { setup } = Component  if (setup) {   \/\/ \u0432\u0435\u0440\u043d\u0435\u0442 { dynamic: RefImpl, dynamicSquare: ComputedRefImpl }   const setupResult = setup(); }  handleSetupResult(setupResult)<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f handleSetupResult \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0432 setupState \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 setup \u2013 setupResult:<\/p>\n<pre><code class=\"typescript\">instance.setupState = setupResult<\/code><\/pre>\n<p>\u0412 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e \u0442\u043e\u043c\u0443 \u0436\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0438 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a dynamic \u0438 \u043a dynamicSquare \u044d\u0442\u043e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u0437\u0430\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b1d\/f24\/379\/b1df243799bd7d465c4cf1fa410cd174.png\" alt=\"\u0417\u0430\u043f\u0438\u0441\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 dynamic\" title=\"\u0417\u0430\u043f\u0438\u0441\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 dynamic\" width=\"350\" height=\"321\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b1d\/f24\/379\/b1df243799bd7d465c4cf1fa410cd174.png\"\/><figcaption>\u0417\u0430\u043f\u0438\u0441\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 dynamic<\/figcaption><\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a dynamicSquare \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 <code>() => dynamic.value ** 2<\/code>. \u0418 \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u0442\u0435\u043b\u0435 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a dynamic.value, \u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0435\u0435 getter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 dynamic, \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 <code>() => dynamic.value **<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4f3\/407\/d88\/4f3407d889fd4953cea82d479e53f6ef.png\" alt=\"\u0417\u0430\u043f\u0438\u0441\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 dynamicSquare \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 dynamic\" title=\"\u0417\u0430\u043f\u0438\u0441\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 dynamicSquare \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 dynamic\" width=\"350\" height=\"198\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4f3\/407\/d88\/4f3407d889fd4953cea82d479e53f6ef.png\"\/><figcaption>\u0417\u0430\u043f\u0438\u0441\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 dynamicSquare \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 dynamic<\/figcaption><\/figure>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 dynamic \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442 <code>() => dynamic.value ** 2<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u044f\u0434\u0435\u043c \u0432 \u0414\u0435\u043b\u043e\u0440\u0438\u0430\u043d \u0438 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0441 data \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u043f\u0440\u0438\u0437\u044b\u0432\u0443 \u0433\u0440\u0443\u043f\u043f\u044b \u00ab\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u00bb \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 increment, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<h3>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/261\/b53\/499\/261b5349926e035afb62572abb73c988.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 dynamic \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 increment \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setter-\u043e\u0432\" title=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 dynamic \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 increment \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setter-\u043e\u0432\" width=\"1600\" height=\"1194\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/261\/b53\/499\/261b5349926e035afb62572abb73c988.png\"\/><figcaption>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 dynamic \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 increment \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setter-\u043e\u0432<\/figcaption><\/figure>\n<p>\u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u0432 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"typescript\">onClick: () => {   \/\/ \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a dynamic \u0432\u044b\u0437\u043e\u0432\u0435\u0442 getter-\u044b \u0438\u0437 proxy   \/\/ \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 setter-\u044b \u0438\u0437 proxy   dynamic += 1 }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a dynamic \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 (\u043f\u0435\u0440\u0432\u044b\u0439 \u0431\u044b\u043b \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435) \u0434\u043e\u0441\u0442\u0430\u043d\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0447\u0435\u0440\u0435\u0437 getter \u0443\u0436\u0435 \u043f\u043e accessCache.<\/p>\n<p>\u0410 \u0434\u0430\u043b\u0435\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u0430\u044f proxy-\u043b\u043e\u0432\u0443\u0448\u043a\u0430 \u043d\u0430 set \u0438\u0437 PublicInstanceProxyHandlers, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e, \u043a\u0443\u0434\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043b\u044e\u0447\u0430 dynamic: \u0432 setupState, data \u0438 \u0442.\u043f.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u0434\u0435\u0442 \u0447\u0435\u0440\u0435\u0434 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e set \u0438\u0437 mutableHandlers, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f dynamic \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u0444\u043b\u0435\u043a\u0441\u0438\u044e \u0438 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 trigger:<\/p>\n<pre><code class=\"typescript\">{   set(target: Target, key: string | symbol, value: unknown, receiver: Object) {     \/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043b\u044e\u0447\u0443 dynamic \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 { dynamic: 1 }      Reflect.set(target, key, value, receiver)      trigger(target, TriggerOpTypes.SET, key, value, oldValue)   } }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f trigger \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>{ dynamic: 2 }<\/code> \u0438\u0437 targetMap:<\/p>\n<pre><code class=\"typescript\">function trigger(   target: object,   key?: unknown, ) {   const depsMap = targetMap.get(target)    \/\/ \u2026  }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 deps \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u043b\u044e\u0447\u0430 dynamic \u0438\u0437 depsMap :<\/p>\n<pre><code class=\"typescript\">function trigger(   target: object,   key?: unknown, ) {    \/\/ \u2026    let deps: (Dep | undefined)[] = []    deps.push(depsMap.get(key)) }<\/code><\/pre>\n<p>\u041f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u0443 dynamic \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u2013 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u043d\u0430 deps[0]:<\/p>\n<pre><code class=\"typescript\">function trigger(\u00a0 target: object,\u00a0 key?: unknown,) {  \u00a0\u00a0\/\/ \u2026  \u00a0 let deps: (Dep | undefined)[] = []    \/\/ \u2026  \u00a0\u00a0triggerEffects(deps[0]) }<\/code><\/pre>\n<p>\u042d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 triggerEffects. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u043a\u043b\u0430 \u043d\u0430 effects, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0432 \u0446\u0438\u043a\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f triggerEffect:<\/p>\n<pre><code class=\"typescript\">function triggerEffects(dep: Dep | ReactiveEffect[]) {   \/\/ \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445   const effects = isArray(dep) ? dep : [...dep]    for (const effect of effects) {     triggerEffect(effect)   } }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f triggerEffect \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 sheduler <code>() => queueJob(update)<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u043d\u0435\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 setupRenderEffect \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430:<\/p>\n<pre><code class=\"typescript\">function triggerEffect(effect: ReactiveEffect) {   if (effect.scheduler) {     effect.scheduler()   } else {     effect.run()   } }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0435\u0442 sheduler, \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0441\u0440\u0430\u0437\u0443 \u0436\u0435.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 increment: \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 setter-\u044b \u0434\u043b\u044f dynamic, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u044b-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0443 dynamic\u2026 \u041d\u0443\u0443, \u0432\u0435\u0440\u043d\u0435\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 sheduler, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u0435\u0441\u0442\u044c.<\/p>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435\u043c \u043e\u0447\u0435\u0440\u0435\u0434\u0435\u0439 \u0440\u0430\u043d\u0435\u0435 \u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b: \u0447\u0442\u043e \u0436\u0435 \u0437\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u0438; \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0438 \u043a\u0430\u043a\u0443\u044e \u0440\u043e\u043b\u044c \u0438\u0433\u0440\u0430\u0435\u0442 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430? \u041d\u0430 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043c\u044b \u043e\u0442\u0432\u0435\u0442\u0438\u043c, \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0432 \u043e sheduler.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 sheduler<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u00ab\u0414\u043b\u044f \u0447\u0435\u0433\u043e?\u00bb.<\/p>\n<p>\u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 Composition API. \u0415\u0441\u0442\u044c dynamic \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0435 \u043e\u0442 \u043d\u0435\u0433\u043e dynamicSquare. \u0418 \u0443 \u043f\u0435\u0440\u0432\u043e\u0433\u043e, \u0438 \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 dynamic \u043f\u043e \u043b\u043e\u0433\u0438\u043a\u0435 \u0432\u0435\u0449\u0435\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440, \u0434\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043e dynamicSquare \u0438 \u043e\u043f\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u2026<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2b1\/aba\/b3f\/2b1abab3f4b5266b738d2e94003867e1.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 dynamic \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0432\u044b\u0437\u043e\u0432\u0430\u043c \u0434\u0432\u0443\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430\" title=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 dynamic \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0432\u044b\u0437\u043e\u0432\u0430\u043c \u0434\u0432\u0443\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430\" width=\"1260\" height=\"1013\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b1\/aba\/b3f\/2b1abab3f4b5266b738d2e94003867e1.png\"\/><figcaption>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 dynamic \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0432\u044b\u0437\u043e\u0432\u0430\u043c \u0434\u0432\u0443\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/figcaption><\/figure>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c? \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043f\u0443\u0442\u0435\u043c batch updates.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTML_DOM_API\/Microtask_guide\"><u>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0438<\/u><\/a> (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0440\u0430\u0437\u0434\u0435\u043b Batching operations), \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c <a href=\"https:\/\/www.how-to-vue.com\/vue\/reactivity\/batch-update.html\"><u>batch updates<\/u><\/a>.<\/p>\n<p>\u0417\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 dynamic \u0432\u044b\u0437\u043e\u0432\u0435\u0442 triggerEffect, \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0431\u0443\u0434\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 dynamicSquare.<\/p>\n<p>triggerEffect \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 <code>() => dynamic.value ** 2<\/code> \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e effect.sheduler, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 queueJob. queueJob \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0432 \u043d\u0435\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0439 job-\u044b \u0438, \u0435\u0441\u043b\u0438 job-\u044b \u043d\u0435\u0442, \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u043e\u0432\u0443\u044e job-\u0443 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0435\u0435 \u043d\u0430 batch update, \u0432\u044b\u0437\u0432\u0430\u0432 queueFlush:<\/p>\n<pre><code class=\"typescript\">function queueJob(job: SchedulerJob) {   if (     !queue.length || !queue.includes( job)   ) {     queue.push(job)     queueFlush()   } }<\/code><\/pre>\n<p>queueFlush \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043d\u0435\u0442 \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 flush updates \u0438\u043b\u0438 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e flush updates \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u043e\u0432 \u043d\u043e\u0432\u043e\u0435 batch-\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 queue:<\/p>\n<pre><code class=\"typescript\">function queueFlush() {   if (!isFlushing &amp;&amp; !isFlushPending) {     isFlushPending = true     currentFlushPromise = resolvedPromise.then(flushJobs)   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, Vue \u043f\u0440\u043e\u0439\u0434\u0435\u0442\u0441\u044f \u043f\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c \u0438\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 dynamic, \u0432\u0437\u044f\u0432 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u043e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u043d\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u0443\u0436\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 dynamicSquare.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 callstack-\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u0442 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043e\u043a, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438 \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f flushJobs:<\/p>\n<pre><code class=\"typescript\">function flushJobs() {   \/\/ currentFlushPromise \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 fulfill   isFlushPending = false   isFlushing = true    try {     for (flushIndex = 0; flushIndex &lt; queue.length; flushIndex++) {       const job = queue[flushIndex]        \/\/ \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0437 dynamicSquare \u2013 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430       callWithErrorHandling(job)     }   } finally {     \/\/ \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432     queue.length = 0      isFlushing = false     currentFlushPromise = null   } }<\/code><\/pre>\n<p>flushJobs \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0437 dynamicSquare \u2013 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0431\u0440\u043e\u0441 \u0432\u0441\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 batch updates.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u043e\u0441\u043a\u0438\u043c. \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 callstack \u0438\u0437 \u0442\u0430\u0441\u043e\u043a, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0442.\u0434.:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/506\/0aa\/bcf\/5060aabcf5b3db067af9708431e3d93c.png\" alt=\"\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 dynamic \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0432\u044b\u0437\u043e\u0432\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0430\u0445\" title=\"\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 dynamic \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0432\u044b\u0437\u043e\u0432\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0430\u0445\" width=\"1600\" height=\"987\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/506\/0aa\/bcf\/5060aabcf5b3db067af9708431e3d93c.png\"\/><figcaption>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 dynamic \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0432\u044b\u0437\u043e\u0432\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0430\u0445<\/figcaption><\/figure>\n<details class=\"spoiler\">\n<summary>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e nextTick<\/summary>\n<div class=\"spoiler__content\">\n<p><em>\u041a\u0441\u0442\u0430\u0442\u0438, \u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043e \u043c\u0435\u0442\u043e\u0434\u0435 nextTick? \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 DOM. \u0412 \u0441\u0432\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 nextTick \u043a\u0430\u043a \u0440\u0430\u0437 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a currentFlushPromise, \u0436\u0434\u0435\u0442 \u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u043c\u0438\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u0441\u0435 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0438 \u0432 flushJobs, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u044f\u0442 DOM:<\/em><\/p>\n<pre><code class=\"typescript\">function nextTick&lt;T = void>( this: T, fn?: (this: T) => void ): Promise&lt;void> {   const p = currentFlushPromise      \/\/ \u0435\u0441\u043b\u0438 \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u0434\u0430\u043d callback, \u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043c\u0438\u0441\u0430   \/\/ \u0438\u043d\u0430\u0447\u0435 \u0432\u0435\u0440\u043d\u0443\u0442\u044c currentFlushPromise \u0434\u043b\u044f \u0435\u0433\u043e \u0440\u0443\u0447\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438   return fn ? p.then(this ? fn.bind(this) : fn) : p }<\/code><\/pre>\n<p><em>\u0421\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4bc\/c3f\/9f6\/4bcc3f9f6727b17757ed83486897764d.png\" alt=\"nextTick \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043e\u043a\" title=\"nextTick \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043e\u043a\" width=\"1144\" height=\"825\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4bc\/c3f\/9f6\/4bcc3f9f6727b17757ed83486897764d.png\"\/><figcaption>nextTick \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043e\u043a<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<h2>\u0420\u0435\u0437\u044e\u043c\u0435<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 Vue \u0432 \u043e\u0431\u0449\u0438\u0445 \u0447\u0435\u0440\u0442\u0430\u0445:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 data \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 proxy, \u0434\u0430\u043b\u0435\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c data \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 getter-\u044b \u043d\u0430 proxy, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u0435\u0447\u0430\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u043a \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0436\u0434\u043e\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0438 \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u043e\u043d\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u2013 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u043b\u0438\u0431\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 setter \u043d\u0430 proxy \u0438 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/p>\n<\/li>\n<li>\n<p>\u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0432 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0430\u0445 \u0432 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 batch updates, \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u043e\u043c<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/nordclan\/blog\/706536\/\"> https:\/\/habr.com\/ru\/company\/nordclan\/blog\/706536\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u0430\u0440\u0430\u043c\u0443\u0448\u043a\u043e \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440. \u042f \u0440\u0430\u0431\u043e\u0442\u0430\u044e frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Nord Clan.<\/p>\n<p>\u0418\u0437 <a href=\"https:\/\/habr.com\/ru\/company\/nordclan\/blog\/699356\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a> \u043c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u0434\u0438\u043c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c: \u043a\u0430\u043a Vue \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442 \u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0438\u043d\u0430\u0447\u0435, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 Vue?<\/p>\n<p>\u0425\u043e\u0442\u044c \u0441\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Vue <a href=\"https:\/\/vuejs.org\/guide\/extras\/reactivity-in-depth.html\"><u>\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043f\u043e\u0434\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u0443\u0430\u043b\u044c<\/u><\/a>, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043a\u0440\u044b\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u043f\u0440\u0438\u043f\u043e\u0434\u043d\u044f\u0442\u0430 \u043e\u043d\u0430 \u043d\u0435 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e-\u0442\u0430\u043a\u0438 \u043e\u0431\u0448\u0438\u0440\u0435\u043d. \u0418 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a Vue \u00ab\u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0447\u0432\u0443\u00bb \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u0432\u043e Vue, \u0442\u0430\u043a \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0438 \u0444\u0440\u0435\u0439\u0432\u043e\u0440\u043a\u0430\u0445, \u043e\u0431\u0448\u0438\u0440\u043d\u0430, \u0438 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435\u0441\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u0437\u043e\u0440\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0443\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2013 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439:<\/p>\n<pre><code class=\"typescript\">Vue   .createApp({     data: () => ({       dynamic: 1     }),     template: `       &lt;div>         &lt;div>foo&lt;\/div>         &lt;div>bar&lt;\/div>         &lt;div>{{ dynamic }}&lt;\/div>         &lt;button @click=\"() => {          dynamic += 1         }\">increment&lt;\/button>       &lt;\/div>     `,   })   .mount('#app')<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Composition API \u0441 \u0446\u0435\u043b\u044c\u044e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 proxy-\u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 instance.ctx<\/h3>\n<p>\u0412\u0441\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 mountComponent.<\/p>\n<p>\u041a\u0430\u043a \u043f\u043e\u043c\u043d\u0438\u043c, \u0444\u0443\u043d\u043a\u0446\u0438\u044f mountComponent \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0440\u0438 \u0432\u0435\u0449\u0438: \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 instance \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0430 \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0432\u044b\u0437\u044b\u0432\u0430\u044f render-\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 patch \u043d\u0430 \u0435\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435:<\/p>\n<pre><code class=\"typescript\">const mountComponent: MountComponentFn = (   initialVNode,   container, ) => {   \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e instance \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430   const instance: ComponentInternalInstance = (     initialVNode.component = createComponentInstance(initialVNode)       )    \/\/ \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0437\u0434\u0435\u0441\u044c   setupComponent(instance)     \/\/ \u0430 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433   setupRenderEffect(     instance,     container,   ) }<\/code><\/pre>\n<p>setupComponent (\u043e\u0442\u043c\u0435\u0447\u0435\u043d \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u043a\u0430\u043a \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u043e\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432) \u043f\u043e\u043c\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 proxy-\u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 instance.ctx \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c data:<\/p>\n<figure class=\"\"><figcaption>\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 instance.ctx \u0438 $data \u0432 proxy \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupComponent<\/figcaption><\/figure>\n<p>proxy-\u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f data \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 reactive:<\/p>\n<pre><code class=\"typescript\">instance.data = reactive(data)<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f reactive \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 proxy-\u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 data, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430 \u043b\u043e\u0432\u0443\u0448\u043a\u0438 set, get, has, ownKeys, defineProperty:<\/p>\n<pre><code class=\"typescript\">const mutableHandlers: ProxyHandler&lt;object> = {   get,   set,   deleteProperty,   has,   ownKeys }  const proxy = new Proxy(   target,   mutableHandlers )<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 data.dynamic \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c proxy-\u043b\u043e\u0432\u0443\u0448\u043a\u0438 set \u0438 get \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 Vue 2<\/summary>\n<div class=\"spoiler__content\">\n<p><em>\u041a\u0441\u0442\u0430\u0442\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432 Vue 2 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435?<\/em><\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432 data \u0435\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 names \u0438 \u043c\u044b \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u0435 \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u00abthis.names[0] = \/\/ \u2026\u00bb, \u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/em><\/p>\n<p><em>Proxy \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 Object.defineProperty \u0441 get-\u00a0 \u0438 set- \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0432 Vue 2 \u043d\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043d\u0438\u0445.<\/em><\/p>\n<p><em>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 Vue 2 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c <\/em><a href=\"https:\/\/vuejsdevelopers.com\/2017\/03\/05\/vue-js-reactivity\/#vue-2-reactivity-caveats\"><em><u>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/u><\/em><\/a><em> \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u00ab\u0434\u0430\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u00bb \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 Object.defineProperty \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/em><\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a\u0436\u0435 setupComponent \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 instance.ctx \u0432 proxy \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 accessCache, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a data, props, setupState \u0438 \u0442.\u043f.:<\/p>\n<pre><code class=\"typescript\">\/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e\u0433\u043e dictionary \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \/\/ \u0438 \u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 AccessTypes instance.accessCache = Object.create(null)  const PublicInstanceProxyHandlers: ProxyHandler&lt;any> = {   get({ _: instance }: ComponentRenderContext, key: string) {      \/\/ \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043a key \u0432 accessCache    },    set(     { _: instance }: ComponentRenderContext,      key: string,      value: any    ): boolean {       \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 key \u0432 setupState, data, props, context     }, }  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 dynamic \u043f\u0440\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 accessCache \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d AccessTypes.DATA, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00ab2\u00bb.<\/p>\n<p>PublicInstanceProxyHandlers \u2013 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442-\u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435 \u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043b\u043e\u0432\u0443\u0448\u0435\u043a get, set \u0438 \u0442.\u0434., \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 dynamic \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f getter \u043d\u0430 PublicInstanceProxyHandlers, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 (\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 dynamic \u043f\u043e accessCache \u0438\u043b\u0438 \u0437\u0430\u043f\u0438\u0441\u044c dynamic \u0432 accessCache \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 setupState, data \u0438 \u0442.\u043f.), \u0430 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c getter \u0438\u0437 mutableHandlers \u043d\u0430 \u0441\u0430\u043c\u043e\u0439 data.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f getter-\u044b \u0438\u0437 PublicInstanceProxyHandlers \u0438 mutableHandlers, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043c\u0435\u0442\u044f\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e data.dynamic \u043a\u0430\u043a \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0435\u0435 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h3>\n<figure class=\"\"><figcaption>\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 dynamic \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0437\u043e\u0432\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setupRenderEffect<\/figcaption><\/figure>\n<p>setupRenderEffect \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, ReactiveEffect, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u00ab\u0440\u0430\u0437\u0440\u0443\u043b\u0438\u0432\u0430\u0442\u044c\u00bb \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">const effect = new ReactiveEffect(   componentUpdateFn,   () => queueJob(update),   instance.scope )<\/code><\/pre>\n<p>componentUpdateFn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 patch, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u0435\u0445 \u0438\u043b\u0438 \u0438\u043d\u044b\u0445 vnode \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0438\u0445 \u0442\u0438\u043f\u0430\u043c \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, processComponent, processElement, processText \u0438 \u0442.\u043f. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e <a href=\"https:\/\/habr.com\/ru\/company\/nordclan\/blog\/699356\/\"><u>\u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/u><\/a>.<\/p>\n<p><code>() => queueJob(update)<\/code> \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043e\u043a \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (\u0432\u044b\u0437\u043e\u0432 componentUpdateFn). \u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u044d\u0442\u043e \u043d\u0435\u043a\u0438\u0439 \u00ab\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u00bb \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<details class=\"spoiler\">\n<summary>watch<\/summary>\n<div class=\"spoiler__content\">\n<p><em>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e queueJob \u0435\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, queuePreFlushCb \u0438 queuePostFlushCb, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 <\/em><a href=\"https:\/\/vuejs.org\/guide\/essentials\/watchers.html#callback-flush-timing\"><em><u>watch<\/u><\/em><\/a><em>, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435 watch (\u043e\u043f\u0446\u0438\u044f flush) \u0434\u043e \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0435.<\/em><\/p>\n<\/div>\n<\/details>\n<p>instance.scope \u2013 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0438\u043c scope, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u043c \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p><code>new ReactiveEffect()<\/code> \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0432 scope \u043d\u043e\u0432\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u2013 componentUpdateFn:<\/p>\n<pre><code class=\"typescript\">class ReactiveEffect {  constructor(     public fn: () => T,     scope?: EffectScope   ) {     \/\/ fn \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 componentUpdateFn     scope.effects.push(fn)   } }<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, scope \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c watch.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u00ab\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u043e\u0440\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u0432 instance.update \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">const effect = new ReactiveEffect(    \/\/ \u2026  )  const update: SchedulerJob = () => effect.run()  update()<\/code><\/pre>\n<p>update \u0432\u044b\u0437\u043e\u0432\u0435\u0442 effect.run, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0430\u043a \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442, activeEffect:<\/p>\n<pre><code class=\"typescript\">let activeEffect: ReactiveEffect | undefined  class ReactiveEffect {   run() {     activeEffect = this      return this.fn()   } }<\/code><\/pre>\n<p>this.fn \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 componentUpdateFn, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u044b\u0437\u043e\u0432\u0435\u0442 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a dynamic:\u00a0<\/p>\n<pre><code class=\"typescript\">return function render(_ctx, _cache) {   with (_ctx) {      \/\/ ...      return (_openBlock(), _createElementBlock(\"div\", null, [          \/\/ ...          \/\/ \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a dynamic \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 get-\u043b\u043e\u0432\u0443\u0448\u0435\u043a \u043d\u0430  instance.ctx \u0438 $data        _createElementVNode(\"div\", null, _toDisplayString(dynamic), 1 \/* TEXT *\/),       ])     )   } }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0432\u0441\u0435<\/summary>\n<div class=\"spoiler__content\">\n<p><em>\u0414\u0430, \u043a\u0441\u0442\u0430\u0442\u0438, \u044f \u0437\u0430\u0431\u044b\u043b \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0432 <\/em><a href=\"https:\/\/habr.com\/ru\/company\/nordclan\/blog\/690522\/\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a><em>, \u0447\u0442\u043e dynamic \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 <\/em><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Statements\/with\"><em><u>with<\/u><\/em><\/a><em>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u00ab\u043d\u0430 \u043b\u0435\u0442\u0443\u00bb, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u0441\u0430\u043c\u0430 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u0435\u0447\u043d\u0443\u044e \u043d\u043e\u0442\u0430\u0446\u0438\u044e.<\/em><\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a dynamic \u0432\u044b\u0437\u043e\u0432\u0435\u0442 proxy-\u043b\u043e\u0432\u0443\u0448\u043a\u0443 get \u0438\u0437 instance.ctx, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a dynamic \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0435\u0433\u043e \u0432 accessCache, \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0432 \u0435\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 AccessType, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043b\u044e\u0447 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 O(n):<\/p>\n<pre><code class=\"typescript\">{   get(target: Target, key: string | symbol) {     \/\/ \u043f\u0435\u0440\u0432\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043a\u043b\u044e\u0447\u0443 \u0438\u0437 data \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 hasOwn     if (data !== EMPTY_OBJ &amp;&amp; hasOwn(data, key)) {       accessCache![key] = AccessTypes.DATA       return data[key]     }   } }<\/code><\/pre>\n<p>\u0410 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 dynamic \u0432\u043e\u0437\u044c\u043c\u0435\u0442\u0441\u044f \u0438\u0437 accessCache:<\/p>\n<pre><code class=\"typescript\">\/\/ \u0432\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043a\u043b\u044e\u0447\u0443 \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 accessCache const n = accessCache![key]  \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 hasOwn \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043b\u0438\u0441\u044c  \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u043a\u043b\u044e\u0447\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 if (n !== undefined) {   switch (n) {     case AccessTypes.SETUP:       return setupState[key]     case AccessTypes.DATA:       \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 data.dynamic \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0437\u0434\u0435\u0441\u044c       return data[key]     case AccessTypes.CONTEXT:       return ctx[key]     case AccessTypes.PROPS:       return props![key]   } }<\/code><\/pre>\n<p>\u041f\u043e\u043c\u043d\u0438\u043c, data \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u043b\u0430 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u0430 \u0432 proxy, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a data[key] \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043e \u0432 mutableHandlers \u043d\u0430 get-\u043b\u043e\u0432\u0443\u0448\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0441\u043b\u0435\u0436\u0435\u043d\u0438\u0435 \u0437\u0430 dynamic:<\/p>\n<pre><code class=\"typescript\">{   get(target: Target, key: string | symbol) {     \/\/ target \u0440\u0430\u0432\u043d\u044b\u0439 { dynamic: 1 }     \/\/ key \u0440\u0430\u0432\u043d\u044b\u0439 dynamic     track(target, TrackOpTypes.GET, key)   { }<\/code><\/pre>\n<p>\u0422\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u043b\u043e\u0432\u043a\u043e\u0441\u0442\u044c\u044e \u0440\u0443\u043a \u0431\u0435\u0437 \u043c\u043e\u0448\u0435\u043d\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f track \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f data \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445, \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0435\u0433\u043e \u0432 WeakMap.<\/p>\n<p>WeakMap \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0435 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-343053","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/343053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=343053"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/343053\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=343053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=343053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=343053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}