{"id":319636,"date":"2021-03-15T21:00:55","date_gmt":"2021-03-15T21:00:55","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=319636"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=319636","title":{"rendered":"\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0445\u0443\u0434\u0448\u0438\u0439 Vue.js \u0432 \u043c\u0438\u0440\u0435"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0437\u0430\u0434 \u044f \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u043f\u043e\u0445\u043e\u0436\u0443\u044e <a href=\"https:\/\/zserge.com\/posts\/worst-react-ever\/\">\u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e React<\/a>, \u0433\u0434\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0440\u044b \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 \u043a\u043b\u043e\u043d React.js \u0441 \u043d\u0443\u043b\u044f. \u041d\u043e React \u2014 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043c\u0438\u0440\u0435, Vue.js \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043b\u043e\u043d, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 Vue.js, \u0432 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n<h3>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>  \u041a\u0430\u043a \u0438 React.js, Vue \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 DOM. \u041d\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 React, Vue \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u00ab\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439\u00bb.<\/p>\n<p>  \u041a\u043b\u044e\u0447 \u043a \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Vue.js \u2014 \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434 <code>Object.defineProperty<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 getter \/ setter \u0434\u043b\u044f \u043f\u043e\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0435\u043c\u0443:<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<pre><code class=\"javascript\">const obj = {a: 1}; Object.defineProperty(obj, 'a', {   get() { return 42; },   set(val) { console.log('you want to set &quot;a&quot; to', val); } }); console.log(obj.a); \/\/ prints '42' obj.a = 100;        \/\/ prints 'you want to set &quot;a&quot; to 100'<\/code><\/pre>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443, \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<h3>\u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  Vue.js \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 JavaScript \u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u0443\u0437\u043b\u0430 DOM \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>&lt;div v-text=&quot;s.toUpperCase()&quot;&gt;&lt;\/div&gt;<\/code> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0442\u0435\u043a\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 div\u2019\u0430 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>s<\/code> \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435.<\/p>\n<p>  \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043e\u0446\u0435\u043d\u043a\u0435 \u0441\u0442\u0440\u043e\u043a, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>s.toUpperCase()<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>eval()<\/code>. \u0425\u043e\u0442\u044f eval \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u043b\u0441\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435, \u043e\u0431\u0435\u0440\u043d\u0443\u0432 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442:<\/p>\n<pre><code class=\"javascript\">const call = (expr, ctx) =&gt;   new Function(`with(this){${`return ${expr}`}}`).bind(ctx)();  call('2+3', null);                    \/\/ returns 5 call('a+1', {a:42});                  \/\/ returns 43 call('s.toUpperCase()', {s:'hello'}); \/\/ returns &quot;HELLO&quot;<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0435\u0435, \u0447\u0435\u043c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <code>eval<\/code>, \u0438 \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c. <\/p>\n<h3>\u041f\u0440\u043e\u043a\u0441\u0438<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Object.defineProperty<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0445; \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>call()<\/code> \u0434\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043a \u043a\u0430\u043a\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043f\u0440\u044f\u043c\u043e \u0438\u043b\u0438 \u043a\u043e\u0441\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0443\u043c\u0435\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c:<\/p>\n<pre><code class=\"javascript\">const data = {a: 1, b: 2, c: 3, d: 'foo'}; \/\/ Data model const vars = {}; \/\/ List of variables used by expression \/\/ Wrap data fields into a proxy that monitors all access for (const name in data) {   let prop = data[name];   Object.defineProperty(data, name, {     get() {       vars[name] = true; \/\/ variable has been accessed       return prop;     },     set(val) {       prop = val;       if (vars[name]) {         console.log('Re-evaluate:', name, 'changed');       }     }   }); } \/\/ Call our expression call('(a+c)*2', data); console.log(vars); \/\/ {&quot;a&quot;: true, &quot;c&quot;: true} -- these two variables have been accessed data.a = 5;  \/\/ Prints &quot;Re-evaluate: a changed&quot; data.b = 7;  \/\/ Prints nothing, this variable does not affect the expression data.c = 11; \/\/ Prints &quot;Re-evaluate: c changed&quot; data.d = 13; \/\/ Prints nothing.<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0443\u0437\u043b\u0430 DOM \u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  \u041a\u0430\u043a \u0438 \u0432 Vue.js, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>q-on:click<\/code> \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, <code>q-text<\/code> \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 textContent, <code>q-bind:style<\/code> \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441\u0442\u0438\u043b\u044f CSS \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441 \u00abq-\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u00abq\u00bb \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u00abvue\u00bb.<\/p>\n<p>  \u0412\u043e\u0442 \u043d\u0435\u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432:<\/p>\n<pre><code class=\"javascript\">const directives = {   \/\/ Bind innerText to an expression value   text: (el, _, val, ctx) =&gt; (el.innerText = call(val, ctx)),   \/\/ Bind event listener   on: (el, name, val, ctx) =&gt; (el[`on${name}`] = () =&gt; call(val, ctx)),   \/\/ Bind node attribute to an expression value   bind: (el, name, value, ctx) =&gt; el.setAttribute(name, call(value, ctx)), };<\/code><\/pre>\n<p>  \u041a\u0430\u0436\u0434\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0443\u0437\u0435\u043b DOM, \u0438\u043c\u044f \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u0430\u043a <code>q-on:click<\/code> (\u0438\u043c\u044f \u0431\u0443\u0434\u0435\u0442 \u00abclick\u00bb). \u0422\u0430\u043a\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f (<code>value<\/code>) \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, \u043f\u043e\u0440\u0430 \u0432\u0441\u0451 \u0441\u043a\u043b\u0435\u0438\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435!<\/p>\n<h3>\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const call = ....       \/\/ Our &quot;safe&quot; expression evaluator const directives = .... \/\/ Our supported directives  \/\/ Currently evaluated directive, proxy uses it as a dependency \/\/ of the individual variables accessed during directive evaluation let $dep;  \/\/ A function to iterate over DOM node and its child nodes, scanning all \/\/ attributes and binding them as directives if needed const walk = (node, q) =&gt; {   \/\/ Iterate node attributes   for (const {name, value} of node.attributes) {     if (name.startsWith('q-')) {       const [directive, event] = name.substring(2).split(':');       const d = directives[directive];       \/\/ Set $dep to re-evaluate this directive       $dep = () =&gt; d(node, event, value, q);       \/\/ Evaluate directive for the first time       $dep();       \/\/ And clear $dep after we are done       $dep = undefined;     }   }   \/\/ Walk through child nodes   for (const child of node.children) {     walk(child, q);   } };  \/\/ Proxy uses Object.defineProperty to intercept access to \/\/ all `q` data object properties. const proxy = q =&gt; {   const deps = {}; \/\/ Dependent directives of the given data object   for (const name in q) {     deps[name] = []; \/\/ Dependent directives of the given property     let prop = q[name];     Object.defineProperty(q, name, {       get() {         if ($dep) {           \/\/ Property has been accessed.           \/\/ Add current directive to the dependency list.           deps[name].push($dep);         }         return prop;       },       set(value) { prop = value; },     });   }   return q; };  \/\/ Main entry point: apply data object &quot;q&quot; to the DOM tree at root &quot;el&quot;. const Q = (el, q) =&gt; walk(el, proxy(q)); <\/code><\/pre>\n<p>  \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439, \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 Vue.js \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u043e \u0432\u0441\u0435\u0439 \u043a\u0440\u0430\u0441\u0435. \u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d \u043f\u043e\u043b\u0435\u0437\u0435\u043d? \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">&lt;div id=&quot;counter&quot;&gt;   &lt;button q-on:click=&quot;clicks++&quot;&gt;Click me&lt;\/button&gt;   &lt;button q-on:click=&quot;clicks=0&quot;&gt;Reset&lt;\/button&gt;   &lt;p q-text=&quot;`Clicked ${clicks} times`&quot;&gt;&lt;\/p&gt; &lt;\/div&gt;  Q(counter, {clicks: 0});<\/code><\/pre>\n<p>  \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043e\u0434\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 <code>&lt;p&gt;<\/code>. \u0429\u0435\u043b\u0447\u043e\u043a \u043f\u043e \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043d\u0430 \u043d\u043e\u043b\u044c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, Vue.js, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043c\u0430\u0433\u0438\u0435\u0439, \u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442, \u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u0441\u0435\u0433\u043e \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u043a\u043e\u0434\u0430.<\/p>\n<h3>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0448\u0430\u0433\u0438<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043e Vue.js \u0431\u043e\u043b\u044c\u0448\u0435 \u2014 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u00abq-if\u00bb \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u00abq-each\u00bb \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435\u043c).<\/p>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430\u043d\u043e\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Q \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 <a href=\"https:\/\/github.com\/zserge\/q\">Github<\/a>. \u041d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435!<\/p>\n<p>  \u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e <code>Object.defineProperty<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0432 Vue 2, \u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Vue 3 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 ES6, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e <code>Proxy<\/code> \u0438 <code>Reflect<\/code>. \u041f\u0440\u043e\u043a\u0441\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u0430\u043a \u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a Reflect \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0437\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u043a\u0441\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c <code>this<\/code> \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0435\u0442\u0440\u043e\u043d\u0443\u0442\u044b\u043c (\u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441 defineProperty).<\/p>\n<p>  \u042f \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u043e\u0431\u0430 Proxy \/ Reflect \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f, \u0442\u0430\u043a \u0447\u0442\u043e, \u043a\u0442\u043e \u0431\u044b \u043d\u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0443\u043b\u043b-\u0440\u0435\u043a\u0432\u0435\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0445 \u0432 <a href=\"https:\/\/github.com\/zserge\/q\">Q<\/a> \u2014 \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e. \u0423\u0434\u0430\u0447\u0438!<\/p>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 <a href=\"https:\/\/github.com\/zserge\">Github<\/a>, <a href=\"https:\/\/twitter.com\/zsergo\">Twitter<\/a> \u0438\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/zserge.com\/rss.xml\">rss<\/a>.<\/div>\n<p> \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\/timeweb\/blog\/547188\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/547188\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0437\u0430\u0434 \u044f \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u043f\u043e\u0445\u043e\u0436\u0443\u044e <a href=\"https:\/\/zserge.com\/posts\/worst-react-ever\/\">\u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e React<\/a>, \u0433\u0434\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0440\u044b \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 \u043a\u043b\u043e\u043d React.js \u0441 \u043d\u0443\u043b\u044f. \u041d\u043e React \u2014 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043c\u0438\u0440\u0435, Vue.js \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043b\u043e\u043d, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 Vue.js, \u0432 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n<h3>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>  \u041a\u0430\u043a \u0438 React.js, Vue \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 DOM. \u041d\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 React, Vue \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u00ab\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439\u00bb.<\/p>\n<p>  \u041a\u043b\u044e\u0447 \u043a \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Vue.js \u2014 \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434 <code>Object.defineProperty<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 getter \/ setter \u0434\u043b\u044f \u043f\u043e\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0435\u043c\u0443:  <\/p>\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-319636","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319636","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=319636"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319636\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=319636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=319636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}