{"id":325312,"date":"2021-06-22T15:01:08","date_gmt":"2021-06-22T15:01:08","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=325312"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=325312","title":{"rendered":"Vue 3: CompositionAPI + Typescript \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b"},"content":{"rendered":"\n
\n

\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u0435\u043d\u044f \u0443\u043f\u0440\u0435\u043a\u043d\u0443\u043b\u0438, \u0447\u0442\u043e \u044f \u043f\u0440\u0438 \u0436\u0438\u0432\u043e\u043c Vue 3 \u043f\u0438\u0448\u0443 \u043f\u0440\u043e «\u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439» Vue 2. \u041e\u0442\u0433\u043e\u0432\u043e\u0440\u0438\u0432\u0448\u0438\u0441\u044c \u0442\u0435\u043c, \u0447\u0442\u043e Vue 3 \u0435\u0449\u0435 \u043d\u0435 production-ready, \u044f \u043f\u043e\u043d\u0435\u043c\u043d\u043e\u0433\u0443 \u043d\u0430\u0447\u0430\u043b \u0435\u0433\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c. \u0418 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u0437\u0430\u044f\u0434\u043b\u044b\u0439 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u0438\u0447\u0435\u0439 \u0441 \u0441\u0430\u0445\u0430\u0440\u043a\u043e\u043c, \u0442\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c Vue 3 \u0441 \u0435\u0433\u043e \u043d\u043e\u0432\u0435\u043d\u044c\u043a\u0438\u043c CompositionAPI \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f. \u0410 \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 store, \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u0442\u0438\u043b\u0435 <script setup><\/code> \u0438 \u043f\u043e\u0434\u0440\u0443\u0436\u0438\u0442\u044c \u0435\u0433\u043e \u0441 typescript \u0438 eslint, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 TSX<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430. \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a>.<\/p>\n

<\/figcaption><\/figure>\n
\n\u0420\u0435\u043c\u0430\u0440\u043a\u0430<\/summary>\n
\n

\u0410\u0432\u0442\u043e\u0440 \u043f\u0438\u0448\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0441\u0442, \u0444\u0438\u0434\u0431\u0435\u043a \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438\u043b\u0438 \u041b\u0421 — \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f! \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0441\u0442 \u043f\u0440\u043e Vue 2 \u0438 \u0435\u0433\u043e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 Typescript \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>, \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u044d\u0442\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e.<\/p>\n<\/div>\n<\/details>\n

\u0427\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0432\u043e Vue 3?<\/h2>\n

\u0412 \u043e\u0431\u0449\u0435\u043c \u0438 \u0446\u0435\u043b\u043e\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u043b\u0438\u0437\u0435 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0430\u0441\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e, \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0438 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u0430 \u0431\u0443\u0441\u0442 \u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u044f \u0431\u0443\u0434\u0443 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437).<\/p>\n

\u041a\u0430\u043a Vue 3 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438?<\/h2>\n

CompositionAPI \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0439\u0442\u0438 \u043e\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u043c Vuex, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c (\u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c — \u0438 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b). \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0438 actions Vuex — \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 Vuex \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 \u043d\u0438\u0445. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 Vuex \u0434\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c — \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0441\u0435\u0431\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0435\u0433\u043e \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0435 \u0432\u0441\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438, \u0431\u0435\u0437 \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0433\u043e-\u043b\u0438\u0431\u043e \u043d\u0430 Vue \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u0430\u043c\u0435\u043d\u0443 Vuex.<\/p>\n

\u0422\u0430\u043a\u0436\u0435 \u0432\u043e vue 3 \u043c\u043e\u0436\u043d\u043e \u0443\u0439\u0442\u0438 \u043e\u0442 class-components, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u043b\u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u043e vue 2, \u0430 \u0432\u0441\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 <script lang=\"ts\" setup><\/code> \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043c\u0435\u0442\u043e\u0434\u044b, \u0445\u0443\u043a\u0438 \u0438 \u0442\u043f, \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 setup \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u044b Emit \u0438\u0432\u0435\u043d\u0442\u043e\u0432 (\u043f\u0440\u0430\u0432\u0434\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b «\u0434\u0435\u0442\u0435\u0439»).<\/p>\n

\u041a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c?<\/h2>\n

\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430\u0445 — \u0433\u043e\u043b\u043e\u0432\u043d\u0430\u044f \u0431\u043e\u043b\u044c Vue, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u0442 \u0432 \u043d\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u043c \u043c\u043d\u043e\u0439 \u0440\u0435\u0430\u043a\u0442\u0435. \u042d\u0442\u0430 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0446\u0438\u043a\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0442\u043e\u0432, \u0442\u0430\u043a \u0438 props, eventHandlers \u043d\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438\u0445 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u0434\u0435\u0442\u0435\u0439. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e TSX \u0438 \u043d\u043e\u0432\u044b\u043c setup’\u043e\u043c.<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n

\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b vite<\/a> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 — typescript (vite template vue-ts<\/code>), \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b eslint<\/em> \u0441 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 Vue \u043f\u0440\u0435\u0441\u0435\u0442\u0430\u043c\u0438, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0430\u0432\u0438\u043b\u043e\u043c, \u043f\u043e\u0437\u0436\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u0442\u044c:<\/p>\n

'@typescript-eslint\/no-unused-vars': 'off', \/\/ uses in new <script setup><\/code><\/pre>\n
\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Vue 3 \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e, \u0432\u0430\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0435\u0433\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438 typescript.<\/p>\n
\u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 (store)<\/h2>\n
\u042f \u0434\u0430\u0432\u043d\u043e \u0445\u043e\u0442\u0435\u043b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e Vuex \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043d\u0430 \u043d\u043e\u0432\u044b\u0445 Ref \u0438 Reactive \u0430\u043f\u0438. \u0412 \u0445\u043e\u0434\u0435 \u0440\u0430\u0437\u0434\u0443\u043c\u0438\u0439 \u043f\u0440\u0438\u043d\u044f\u043b \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0438\u0434 «\u043a\u0430\u043a Vuex», \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432:<\/p>\n
    \n
  1. \n
    \u041c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c (\u043a\u0443\u0434\u0430 \u0436\u0435 \u0431\u0435\u0437 \u043d\u0435\u0435)<\/p>\n<\/li>\n
  2. \n
    \u0420\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043d\u0430 \u0442\u0435 \u0436\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438<\/p>\n<\/li>\n<\/ol>\n
    \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0442\u0435 \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0447\u0442\u043e \u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0432 Vuex:<\/p>\n
      \n
    1. \n
      State — \u043a\u043b\u0430\u0441\u0441 \u0441 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438, \u043a\u0430\u0436\u0434\u043e\u0435 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0438\u043f\u043e\u043c \u0432 Ref (\u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432)  \u0438\u043b\u0438 Reactive (\u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \u0438 \u0442.\u043f.)<\/p>\n<\/li>\n
    2. \n
      Mutations — \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e State, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0443\u0442\u0430\u0446\u0438\u0439, \u043e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0430\u043f\u0438 \u043c\u043e\u0434\u0443\u043b\u044f (\u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0434\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 actions)<\/p>\n<\/li>\n
    3. \n
      Actions — \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043f\u043e\u0434 \u0441\u043e\u0431\u043e\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n
    4. \n
      Getters — \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 — \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0446\u0435\u043b\u0438\u043a\u043e\u043c — \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u0441\u0440\u0430\u0437\u0443 \u0438\u0437 \u0441\u0442\u0435\u0439\u0442\u0430)<\/p>\n<\/li>\n<\/ol>\n
      \u041c\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u043a\u0430\u0441\u0430\u043b\u0438\u0441\u044c \u0438\u0434\u0435\u0438 \u043f\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044e \u043b\u043e\u0433\u0438\u043a\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c — \u0443\u0431\u0440\u0430\u0442\u044c \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e, \u043d\u043e \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0442\u043a\u0430\u0437 \u043e\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 Vue \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0442\u043e\u0434\u0432\u0438\u043d\u0443\u043b \u044d\u0442\u0443 \u0438\u0434\u0435\u044e. \u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0443\u0436\u0435 \u043d\u0435 \u0432 \u0441\u0442\u043e\u0440\u0435) — \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c (\u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e — \u043a\u0430\u043a \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435), \u043d\u043e \u044f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u0432 \u0441\u0442\u043e\u0440\u0435 \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0430\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u043e\u043d \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439.<\/p>\n
      \n\u041a\u043e\u0434 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (store)<\/summary>\n
      \n
      \/**  * @file src\/store\/index.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Entry point of store  *\/  import habrModule from '.\/modules\/habrModule'  export { habrModule } <\/code><\/pre>\n
      \/**  * @file src\/store\/modules\/habrModule\/index.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Entry of store module  *\/  import state from '.\/state' import getters from '.\/getters' import actions from '.\/actions'  export default {     state,     getters,     actions }<\/code><\/pre>\n
      \/**  * @file src\/store\/modules\/habrModule\/state.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview State for store example with new Ref and Reactive Vue3  *\/  import { ref, reactive } from 'vue'  export default class State {   \/**    * Example string ref (reactive)    *\/   static strExample = ref('string example')    \/**    * Example number ref (reactive)    *\/   static numberExample = ref(0)    \/**    * Example string reactive    *\/   static objExample = reactive({     property: 'property string',   }) } <\/code><\/pre>\n
      \/**  * @file src\/store\/modules\/habrModule\/mutations.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Mutations for store example with new Ref and Reactive Vue3  *\/  import State from '.\/state'  export default class Mutations {   \/**    * Set to state new string    * @param value     *\/   static setString (value: string): void {     State.strExample.value = value   }    \/**    * Increate the number in state    *\/   static increaseNumber (): void {     State.numberExample.value++   } } <\/code><\/pre>\n
      \/**  * @file src\/store\/modules\/habrModule\/getters.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Getters for store example with new Ref and Reactive Vue3  *\/  import type { Ref } from 'vue' import State from '.\/state'  export default class Getters {   \/**    * Test getter with cache    * @deprecated must use readonly and state proxy if not need any business logic    *\/   static get strExample(): Ref<string> {     return State.strExample   } } <\/code><\/pre>\n<\/div>\n<\/details>\n
      \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u043e\u0432\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 setup<\/h2>\n
      \u0413\u043b\u0430\u0432\u043d\u043e\u0439 «\u0444\u0438\u0447\u043e\u0439» \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c \u0432\u043e Vue 3 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438 \u043e \u043d\u043e\u0432\u043e\u043c defineComponent<\/code> — \u0442\u043e \u0432\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0448\u0438\u0431\u043b\u0438\u0441\u044c. \u0412 3 \u043c\u0430\u0436\u043e\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u043a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0432\u0432\u0435\u0434\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 — \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setup<\/code>. \u0427\u0442\u043e-\u0442\u043e \u0442\u0438\u043f\u043e \u0442\u0430\u043a\u043e\u0433\u043e<\/a>.<\/p>\n
      <script> export default {   props: {     title: String   },   setup(props) {     console.log(props.title)   } } <\/script><\/code><\/pre>\n
      \u041d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u044f \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u0431\u043e\u043b\u0435\u0435 «\u0441\u0430\u0445\u0430\u0440\u043d\u043e\u0433\u043e» \u043f\u0440\u0438\u0435\u043c\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: <\/p>\n
      <script setup> \/\/ all from SETUP here <\/script><\/code><\/pre>\n
      \u0427\u0442\u043e \u044d\u0442\u043e \u0434\u0430\u0435\u0442? \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 \u0438 \u044d\u0442\u0438\u043c \u0432\u0441\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e! \u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c Composition API \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0439 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438, \u043d\u0443 \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043f\u0440\u043e\u0449\u0435. \u0414\u043b\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0434 Vue 3 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0435\u0433\u043e \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043d\u0438\u0436\u0435 \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 TSX. <\/p>\n
      \u0427\u0442\u043e \u0438\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432? \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043a\u043e\u0434\u0430 (\u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u0438 eslint) \u043d\u0435 \u0432\u0438\u0434\u044f\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435 — \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c. \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u043c\u0438 \u0441 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. Vue \u043d\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u043a \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0445 \u043f\u0438\u0441\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435\/\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f. \u0410 \u0435\u0449\u0435 \u044d\u0442\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0438\u0447\u0430<\/a>, \u0438 \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c (\u043a\u0430\u043a \u0438 \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435 — \u0440\u0443\u0431\u0440\u0438\u043a\u0430 — \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b!)<\/p>\n
      \u041d\u0438\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043c\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043d\u043e \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u044d\u0442\u043e \u0438\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0433\u043e\u043b\u043e\u0432\u044b, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0434\u0438\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u043e Vue 2 \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 Reactive — \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0436\u0438\u0437\u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u043c\u043e\u0435\u0433\u043e), \u043d\u0435 \u043f\u043e\u043b\u0435\u043d\u0438\u0442\u0435\u0441\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043d\u0435\u0439 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430!<\/p>\n
      \u041d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0436\u0438\u0437\u043d\u044c \u0438 \u043c\u043d\u0435 \u043b\u0438\u0447\u043d\u043e \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442, \u0430 \u044f \u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0443 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432 \u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n
      \n\u041a\u043e\u0434 — App.vue<\/summary>\n
      \n
      <template>   <div>     <!-- Main body -->     <div class=\"main\">       <h5>App.vue<\/h5>        String from store: {{ readonlyStringFromStore }}        <div>         <button @click=\"increaseCounter\">Counter: {{ counter }}<\/button>       <\/div>     <\/div>     <!-- \/Main body -->      <TheHelloWorldComponent :counter=\"counter\" @customEvent=\"increaseCounter\" \/>      <TheTestComponent :counter=\"counter\" @click=\"increaseCounter\" \/>   <\/div> <\/template>  <script lang=\"ts\" setup> \/**  * @file src\/App.vue  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Entry Vue example file for it's project  *\/  import { ref, onMounted, readonly, defineAsyncComponent } from 'vue' import { habrModule } from '.\/store'  \/* Components *\/  \/\/ Vue + new setup script example component const TheHelloWorldComponent = defineAsyncComponent(   () => import('.\/components\/TheHelloWorldComponent.vue') )  \/\/ Vue + new setup and TSX render example const TheTestComponent = defineAsyncComponent(   () => import('.\/components\/TheTestComponent\/index') )  \/* Data *\/  \/\/ must be readonly cause of state proxying const readonlyStringFromStore = readonly(habrModule.state.strExample)  \/\/ simple reactive variable const counter = ref(0)  \/* Hooks *\/ onMounted(() => {   habrModule.actions.setString('changed from App.vue string') })  \/* Methods *\/  \/**  * Increase local reactive counter  *\/ const increaseCounter = () => {   counter.value++ } <\/script>\u00ac  <style lang=\"css\"> @import 'styles.css'; <\/style>  <style lang=\"css\" scoped> .main {   background-color: aquamarine;   padding: 5vh; } <\/style> <\/code><\/pre>\n
      \u042f \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0435\u0442\u0435\u043b\u043e \u043a \u0447\u0435\u0440\u0442\u044f\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0438\u0437\u0432\u0438\u043d\u044f\u044e\u0441\u044c, \u0432\u043e\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431<\/a><\/p>\n<\/div>\n<\/details>\n
      \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0434\u0435\u0442\u0435\u0439 \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u043c\u0438<\/h2>\n
      \u0412\u044b\u0448\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430 \u0434\u0435\u0442\u0435\u0439, \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 (\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043e\u0431 \u044d\u0442\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438) \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c props, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
      \u0418\u0437 \u043d\u043e\u0432\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0442\u0443\u0442 — \u043c\u043e\u0436\u043d\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c emit \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439, \u043b\u0443\u0447\u0448\u0435 \u0447\u0435\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 class-components \u0432\u043e Vue 2.<\/p>\n
      \"\u041d\u0435\u0432\u0435\u0440\u043d\u044b\u0439
      \u041d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u0442\u0438\u043f payload, \u044d\u0442\u043e \u043b\u0438 \u043d\u0435 \u0447\u0443\u0434\u043e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438?<\/figcaption><\/figure>\n
      \n\u041a\u043e\u0434 TheHelloWorldComponent<\/summary>\n
      \n
      <template>   <div class=\"hello\">     <h5>TheHelloWorldComponent<\/h5>      Now counter is {{ props.counter }}     <div>       <button @click=\"emitCustomEvent\">         Emit custom event (increase counter)       <\/button>       <button @click=\"changeString\">Change string in store<\/button>     <\/div>   <\/div> <\/template>  <script lang=\"ts\" setup> \/**  * @file \/src\/components\/TheHelloWorldComponent.vue  * @fileoverview Child component example with using new setup, emits, store etc  * @author Artem Shuvaev  * @version 1.0.0  *\/  import { defineEmit, defineProps } from 'vue' import { habrModule } from '..\/store'  \/* Props *\/ const props = defineProps({   counter: {     type: Number,     required: true,   }, })  \/* Emits *\/  \/\/ Define emits signatures,  \/\/ I don't know but signatures works only with null as output type (instead VOID or UNDEFINED) const emit = defineEmit({   customEvent: null,   customEvent2: (payload: { test: string }) => null, })  \/* Methods *\/  \/**  * Call dispatch of store module  *\/ const changeString = () =>   habrModule.actions.setString('changed from HelloWorld.vue')  \/**  * @emits customEvent  *\/ const emitCustomEvent = () => emit('customEvent')  \/\/ it's typed payload! const emitCustomEvent2 = () =>   emit('customEvent2', {     test: 'string',   }) <\/script>  <style lang=\"css\" scoped> .hello {   background-color: lightsteelblue;   padding: 5vh;   margin-top: 5vh; } <\/style><\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0417\u0430\u043a\u0443\u0441\u043a\u0430 — TSX \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h2>\n
      \u0414\u0430, \u044f \u043b\u044e\u0431\u043b\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e, \u0430 \u0447\u0442\u043e \u043c\u0435\u0448\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043e Vue? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e — template, \u044d\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0438 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u043d\u043e\u0442\u0430\u0446\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 as html, \u043d\u043e \u044f \u0445\u043e\u0447\u0443 \u0442\u0443\u0434\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443, \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0430 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430. \u0415\u0441\u0442\u044c \u043b\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435? \u0414\u0430, \u043f\u043e\u0439\u0442\u0438 \u043a React \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 tsx. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0432\u043e Vue 3? \u0414\u0430, \u0438 \u0435\u0449\u0435 \u043b\u0443\u0447\u0448\u0435 \u0447\u0435\u043c \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c! \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0441 \u0441\u0430\u0445\u0430\u0440\u043d\u044b\u043c \u0441\u0435\u0442\u0430\u043f\u043e\u043c, \u043a\u0430\u043a \u0432\u044b\u0448\u0435? \u041d\u0435\u0442, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044f \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0435\u0433\u043e \u0433\u043e\u0442\u043e\u0432\u0438\u043b, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 — \u0431\u0443\u0434\u0443 \u043e\u0447\u0435\u043d\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u0435\u043d. <\/p>\n
      \u0418\u0437 \u0432\u043e\u0434\u044b \u0432\u044b\u0448\u0435 — \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e «\u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e», \u0447\u0435\u0440\u0435\u0437 defineComponent, \u043d\u043e \u0432 setup \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435, \u0430 \u0441\u0430\u043c \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u0432 \u0441\u0442\u0438\u043b\u0435 tsx. \u0418 \u0432\u043e\u0442 \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n
      \/**  * @file \/src\/components\/TheTestComponents\/index.tsx  * @fileoverview Test component with using TSX rendering in setup function  * @author Artem Shuvaev  * @version 1.0.0  *\/  import { defineComponent } from 'vue' import styles from '.\/styles.module.css'  export default defineComponent({   name: 'TheTestComponent',   props: {     counter: {       type: Number,       default: 0,     },   },   emits: {     click: null,   },   setup(props, { emit }) {     \/** Methods *\/      \/**      * Simple click handler      * @emits click      *\/     const onClickHandler = () => emit('click')      \/** Rendering *\/     return () => (       <div class={styles.test}>         <h5>TheTestComponent<\/h5>         <div>Now counter is: {props.counter}<\/div>         <button onClick={onClickHandler}>Emit click (increase counter)<\/button>       <\/div>     )   }, }) <\/code><\/pre>\n
      \u042d\u0442\u043e \u0443\u0436\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f => \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0443 (\u0432 \u043d\u043e\u0433\u0443 \u0441 \u0441\u0430\u043c\u0438\u043c Vue 3). \u0423\u0434\u043e\u0431\u043d\u043e \u043b\u0438 \u044d\u0442\u043e? \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 — \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u0440\u0430\u0439 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 template. \u041f\u043e-vue’\u0448\u043d\u043e\u043c\u0443 \u043b\u0438 \u044d\u0442\u043e? \u041d\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u043d\u043e \u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0448\u044c \u0440\u0430\u0434\u0438 100% \u0430\u0432\u0442\u043e\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043e\u043a \u0432 \u043a\u043e\u0434\u0435.<\/p>\n
      \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n
      \u042f \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u043b \u0432\u0435\u0441\u044c \u0442\u0435\u043a\u0441\u0442 \u0432\u044b\u0448\u0435 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437, \u043d\u043e \u043c\u043e\u0440\u0430\u043b\u0438 \u0432 \u043d\u0435\u043c \u043d\u0435\u0442 \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u042f \u0438\u0437\u0443\u0447\u0430\u043b \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430\u0434 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0441\u0432\u043e\u0435\u0433\u043e \u043b\u044e\u0431\u0438\u043c\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u0431\u0443\u0434\u0443 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u0435, \u0447\u0435\u0433\u043e \u0438 \u0432\u0430\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e. \u041d\u043e \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u043c\u043e\u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u043c\u0443-\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0443\u0442! \u041a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a>.<\/p>\n
      \u041d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043b\u0438 \u043c\u043d\u0435 Vue 3? \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u044d\u0442\u043e \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435, \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435. \u0427\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f — \u043c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u044d\u0442\u043e React, \u0430 \u0432\u0435\u0434\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0442 \u044d\u0442\u043e\u0439 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u044b «\u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 — \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e» Vue \u0438 \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u043e\u0442\u043e\u0439\u0442\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u0440\u043e\u0443\u0442\u0435\u0440, \u0441\u0442\u043e\u0440 \u0438 \u0442\u043e\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435). \u042d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0441\u0442\u0440\u043e\u0433\u0438\u0439 Golang \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435, \u0435\u0433\u043e \u043a\u043e\u0434, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0432 \u0434\u0430\u043b\u0435\u043a\u043e\u0439 \u0438 \u0436\u0430\u0440\u043a\u043e\u0439 \u0418\u043d\u0434\u0438\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u0442\u0430\u0439\u043b-\u0433\u0430\u0439\u0434\u0430\u043c\u0438 \u0438 \u043b\u0438\u043d\u0442\u0435\u0440\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u0435\u043d \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u0435\u0440\u0443 \u0432 \u0414\u043e\u043b\u0438\u043d\u0435, \u0430 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438\u043c\u0435\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c — \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0448\u0438\u0442\u0435 \u043a\u043e\u0434! \u0418 \u044f \u0431\u043e\u044e\u0441\u044c, \u0447\u0442\u043e \u0441 \u043d\u043e\u0432\u044b\u043c \u0440\u0435\u043b\u0438\u0437\u043e\u043c \u043c\u044b \u043e\u0442\u0434\u0430\u043b\u0438\u043c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e. \u041f\u043b\u043e\u0445\u043e \u043b\u0438 \u044d\u0442\u043e — \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0438 \u043f\u0443\u0442\u044c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0430\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n
      \u0410 \u0432\u0430\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f Vue 3?<\/strong> \u041f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0441\u043a\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u043d\u0435\u0433\u043e \u0432 \u043f\u0440\u043e\u0434\u0435, \u0438\u043b\u0438 \u0435\u0449\u0435 \u0433\u043e\u0434\u0438\u043a \u043f\u0443\u0441\u0442\u044c \u043f\u043e\u0432\u0430\u0440\u0438\u0442\u0441\u044f \u0432 \u0434\u043e\u043c\u0430\u0448\u043d\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435?<\/p>\n
      P.S.<\/h2>\n
      \u0415\u0441\u043b\u0438 \u0447\u0442\u043e — \u0438\u0437\u0432\u0438\u043d\u044f\u044e\u0441\u044c \u0437\u0430 \u043a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u044f \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b, \u043a\u0430\u043a \u0435\u0433\u043e \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435, \u0430 \u044d\u0442\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u043c\u0435\u043d\u044f \u0434\u043e\u0431\u0438\u043b\u0438, \u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u0437\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0438 \u0435\u0433\u043e \u043f\u043e\u0434\u0430\u0447\u0443, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u0443\u043c\u0431\u0443\u0440\u043d\u043e, \u043d\u043e \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u043c\u0441\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e.<\/strong>
      \u041e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u0435 \u043c\u043d\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u043e\u0434<\/code> \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0438\u043c\u0435\u0435\u0442 \u0440\u0430\u0437\u043d\u0443\u044e \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438, \u0432 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430\u0445 \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438? \u042d\u0442\u043e \u0444\u0438\u0448\u043a\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438\u043b\u0438 \u044f \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e? \u041f\u0440\u0438\u0447\u0435\u043c \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f. \u042f \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u0447\u0442\u043e \u044f \u0441\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u044e \u043d\u0435 JS, \u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 Vue \u0444\u0430\u0439\u043b, \u043d\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432 \u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432, \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043d\u043e\u0432\u044b\u0439 \u0438 \u043c\u043e\u0434\u043d\u044b\u0439, \u0430 \u0432 \u0441\u0430\u043c\u0438\u0445 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f\u0445 \u0441\u0442\u0430\u0440\u044b\u0439 \u0438 \u0433\u043b\u0443\u043f\u0435\u043d\u044c\u043a\u0438\u0439 \u043f\u0430\u0440\u0441\u0435\u0440?<\/p>\n
      \n\u0421\u043a\u0440\u0438\u043d\u044b<\/summary>\n
      \n
      \"\u0427\u0435\u0440\u043d\u043e\u0432\u0438\u043a
      \u0427\u0435\u0440\u043d\u043e\u0432\u0438\u043a \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438<\/figcaption><\/figure>\n
      \"\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440
      \u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0441\u0442\u0430\u0442\u044c\u0438<\/figcaption><\/figure>\n<\/div>\n<\/details>\n<\/div>\n
       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/557928\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
      \n
      \u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u0435\u043d\u044f \u0443\u043f\u0440\u0435\u043a\u043d\u0443\u043b\u0438, \u0447\u0442\u043e \u044f \u043f\u0440\u0438 \u0436\u0438\u0432\u043e\u043c Vue 3 \u043f\u0438\u0448\u0443 \u043f\u0440\u043e «\u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439» Vue 2. \u041e\u0442\u0433\u043e\u0432\u043e\u0440\u0438\u0432\u0448\u0438\u0441\u044c \u0442\u0435\u043c, \u0447\u0442\u043e Vue 3 \u0435\u0449\u0435 \u043d\u0435 production-ready, \u044f \u043f\u043e\u043d\u0435\u043c\u043d\u043e\u0433\u0443 \u043d\u0430\u0447\u0430\u043b \u0435\u0433\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c. \u0418 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u0437\u0430\u044f\u0434\u043b\u044b\u0439 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u0438\u0447\u0435\u0439 \u0441 \u0441\u0430\u0445\u0430\u0440\u043a\u043e\u043c, \u0442\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c Vue 3 \u0441 \u0435\u0433\u043e \u043d\u043e\u0432\u0435\u043d\u044c\u043a\u0438\u043c CompositionAPI \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f. \u0410 \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 store, \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u0442\u0438\u043b\u0435 <script setup><\/code> \u0438 \u043f\u043e\u0434\u0440\u0443\u0436\u0438\u0442\u044c \u0435\u0433\u043e \u0441 typescript \u0438 eslint, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 TSX<\/code>  \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430. \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a>.<\/p>\n
      <\/figcaption><\/figure>\n
      \n\u0420\u0435\u043c\u0430\u0440\u043a\u0430<\/summary>\n
      \n
      \u0410\u0432\u0442\u043e\u0440 \u043f\u0438\u0448\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0441\u0442, \u0444\u0438\u0434\u0431\u0435\u043a \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438\u043b\u0438 \u041b\u0421 — \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f! \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0441\u0442 \u043f\u0440\u043e Vue 2 \u0438 \u0435\u0433\u043e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 Typescript \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>, \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u044d\u0442\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e.<\/p>\n<\/div>\n<\/details>\n
      \u0427\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0432\u043e Vue 3?<\/h2>\n
      \u0412 \u043e\u0431\u0449\u0435\u043c \u0438 \u0446\u0435\u043b\u043e\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u043b\u0438\u0437\u0435 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0430\u0441\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e, \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0438 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u0430 \u0431\u0443\u0441\u0442 \u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u044f \u0431\u0443\u0434\u0443 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437).<\/p>\n
      \u041a\u0430\u043a Vue 3 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438?<\/h2>\n
      CompositionAPI \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0439\u0442\u0438 \u043e\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u043c Vuex, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c (\u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c — \u0438 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b). \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0438 actions Vuex — \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 Vuex \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 \u043d\u0438\u0445. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 Vuex \u0434\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c — \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0441\u0435\u0431\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0435\u0433\u043e \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0435 \u0432\u0441\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438, \u0431\u0435\u0437 \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0433\u043e-\u043b\u0438\u0431\u043e \u043d\u0430 Vue \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u0430\u043c\u0435\u043d\u0443 Vuex.<\/p>\n
      \u0422\u0430\u043a\u0436\u0435 \u0432\u043e vue 3 \u043c\u043e\u0436\u043d\u043e \u0443\u0439\u0442\u0438 \u043e\u0442 class-components, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u043b\u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u043e vue 2, \u0430 \u0432\u0441\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 <script lang=\"ts\" setup><\/code> \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043c\u0435\u0442\u043e\u0434\u044b, \u0445\u0443\u043a\u0438 \u0438 \u0442\u043f, \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 setup \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u044b Emit \u0438\u0432\u0435\u043d\u0442\u043e\u0432 (\u043f\u0440\u0430\u0432\u0434\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b «\u0434\u0435\u0442\u0435\u0439»).<\/p>\n
      \u041a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c?<\/h2>\n
      \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430\u0445 — \u0433\u043e\u043b\u043e\u0432\u043d\u0430\u044f \u0431\u043e\u043b\u044c Vue, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u0442 \u0432 \u043d\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u043c \u043c\u043d\u043e\u0439 \u0440\u0435\u0430\u043a\u0442\u0435. \u042d\u0442\u0430 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0446\u0438\u043a\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0442\u043e\u0432, \u0442\u0430\u043a \u0438 props, eventHandlers \u043d\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438\u0445 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u0434\u0435\u0442\u0435\u0439. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e TSX \u0438 \u043d\u043e\u0432\u044b\u043c setup’\u043e\u043c.<\/p>\n
      \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n
      \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b vite<\/a> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 — typescript (vite template vue-ts<\/code>), \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b eslint<\/em> \u0441 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 Vue \u043f\u0440\u0435\u0441\u0435\u0442\u0430\u043c\u0438, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0430\u0432\u0438\u043b\u043e\u043c, \u043f\u043e\u0437\u0436\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u0442\u044c:<\/p>\n
      '@typescript-eslint\/no-unused-vars': 'off', \/\/ uses in new <script setup><\/code><\/pre>\n
      \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Vue 3 \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e, \u0432\u0430\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0435\u0433\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438 typescript.<\/p>\n
      \u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 (store)<\/h2>\n
      \u042f \u0434\u0430\u0432\u043d\u043e \u0445\u043e\u0442\u0435\u043b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e Vuex \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043d\u0430 \u043d\u043e\u0432\u044b\u0445 Ref \u0438 Reactive \u0430\u043f\u0438. \u0412 \u0445\u043e\u0434\u0435 \u0440\u0430\u0437\u0434\u0443\u043c\u0438\u0439 \u043f\u0440\u0438\u043d\u044f\u043b \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0438\u0434 «\u043a\u0430\u043a Vuex», \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432:<\/p>\n
        \n
      1. \n
        \u041c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c (\u043a\u0443\u0434\u0430 \u0436\u0435 \u0431\u0435\u0437 \u043d\u0435\u0435)<\/p>\n<\/li>\n
      2. \n
        \u0420\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043d\u0430 \u0442\u0435 \u0436\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438<\/p>\n<\/li>\n<\/ol>\n
        \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0442\u0435 \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0447\u0442\u043e \u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0432 Vuex:<\/p>\n
          \n
        1. \n
          State — \u043a\u043b\u0430\u0441\u0441 \u0441 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438, \u043a\u0430\u0436\u0434\u043e\u0435 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0438\u043f\u043e\u043c \u0432 Ref (\u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432)  \u0438\u043b\u0438 Reactive (\u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \u0438 \u0442.\u043f.)<\/p>\n<\/li>\n
        2. \n
          Mutations — \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e State, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0443\u0442\u0430\u0446\u0438\u0439, \u043e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0430\u043f\u0438 \u043c\u043e\u0434\u0443\u043b\u044f (\u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0434\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 actions)<\/p>\n<\/li>\n
        3. \n
          Actions — \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043f\u043e\u0434 \u0441\u043e\u0431\u043e\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n
        4. \n
          Getters — \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 — \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0446\u0435\u043b\u0438\u043a\u043e\u043c — \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u0441\u0440\u0430\u0437\u0443 \u0438\u0437 \u0441\u0442\u0435\u0439\u0442\u0430)<\/p>\n<\/li>\n<\/ol>\n
          \u041c\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u043a\u0430\u0441\u0430\u043b\u0438\u0441\u044c \u0438\u0434\u0435\u0438 \u043f\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044e \u043b\u043e\u0433\u0438\u043a\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c — \u0443\u0431\u0440\u0430\u0442\u044c \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e, \u043d\u043e \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0442\u043a\u0430\u0437 \u043e\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 Vue \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0442\u043e\u0434\u0432\u0438\u043d\u0443\u043b \u044d\u0442\u0443 \u0438\u0434\u0435\u044e. \u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0443\u0436\u0435 \u043d\u0435 \u0432 \u0441\u0442\u043e\u0440\u0435) — \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c (\u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e — \u043a\u0430\u043a \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435), \u043d\u043e \u044f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u0432 \u0441\u0442\u043e\u0440\u0435 \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0430\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u043e\u043d \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439.<\/p>\n
          \n\u041a\u043e\u0434 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (store)<\/summary>\n
          \n
          \/**  * @file src\/store\/index.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Entry point of store  *\/  import habrModule from '.\/modules\/habrModule'  export { habrModule } <\/code><\/pre>\n
          \/**  * @file src\/store\/modules\/habrModule\/index.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Entry of store module  *\/  import state from '.\/state' import getters from '.\/getters' import actions from '.\/actions'  export default {     state,     getters,     actions }<\/code><\/pre>\n
          \/**  * @file src\/store\/modules\/habrModule\/state.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview State for store example with new Ref and Reactive Vue3  *\/  import { ref, reactive } from 'vue'  export default class State {   \/**    * Example string ref (reactive)    *\/   static strExample = ref('string example')    \/**    * Example number ref (reactive)    *\/   static numberExample = ref(0)    \/**    * Example string reactive    *\/   static objExample = reactive({     property: 'property string',   }) } <\/code><\/pre>\n
          \/**  * @file src\/store\/modules\/habrModule\/mutations.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Mutations for store example with new Ref and Reactive Vue3  *\/  import State from '.\/state'  export default class Mutations {   \/**    * Set to state new string    * @param value     *\/   static setString (value: string): void {     State.strExample.value = value   }    \/**    * Increate the number in state    *\/   static increaseNumber (): void {     State.numberExample.value++   } } <\/code><\/pre>\n
          \/**  * @file src\/store\/modules\/habrModule\/getters.ts  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Getters for store example with new Ref and Reactive Vue3  *\/  import type { Ref } from 'vue' import State from '.\/state'  export default class Getters {   \/**    * Test getter with cache    * @deprecated must use readonly and state proxy if not need any business logic    *\/   static get strExample(): Ref<string> {     return State.strExample   } } <\/code><\/pre>\n<\/div>\n<\/details>\n
          \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u043e\u0432\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 setup<\/h2>\n
          \u0413\u043b\u0430\u0432\u043d\u043e\u0439 «\u0444\u0438\u0447\u043e\u0439» \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c \u0432\u043e Vue 3 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438 \u043e \u043d\u043e\u0432\u043e\u043c defineComponent<\/code> — \u0442\u043e \u0432\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0448\u0438\u0431\u043b\u0438\u0441\u044c. \u0412 3 \u043c\u0430\u0436\u043e\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u043a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0432\u0432\u0435\u0434\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 — \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setup<\/code>. \u0427\u0442\u043e-\u0442\u043e \u0442\u0438\u043f\u043e \u0442\u0430\u043a\u043e\u0433\u043e<\/a>.<\/p>\n
          <script> export default {   props: {     title: String   },   setup(props) {     console.log(props.title)   } } <\/script><\/code><\/pre>\n
          \u041d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u044f \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u0431\u043e\u043b\u0435\u0435 «\u0441\u0430\u0445\u0430\u0440\u043d\u043e\u0433\u043e» \u043f\u0440\u0438\u0435\u043c\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: <\/p>\n
          <script setup> \/\/ all from SETUP here <\/script><\/code><\/pre>\n
          \u0427\u0442\u043e \u044d\u0442\u043e \u0434\u0430\u0435\u0442? \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 \u0438 \u044d\u0442\u0438\u043c \u0432\u0441\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e! \u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c Composition API \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0439 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438, \u043d\u0443 \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043f\u0440\u043e\u0449\u0435. \u0414\u043b\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0434 Vue 3 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0435\u0433\u043e \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043d\u0438\u0436\u0435 \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 TSX. <\/p>\n
          \u0427\u0442\u043e \u0438\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432? \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043a\u043e\u0434\u0430 (\u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u0438 eslint) \u043d\u0435 \u0432\u0438\u0434\u044f\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435 — \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c. \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u043c\u0438 \u0441 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. Vue \u043d\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u043a \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0445 \u043f\u0438\u0441\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435\/\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f. \u0410 \u0435\u0449\u0435 \u044d\u0442\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0438\u0447\u0430<\/a>, \u0438 \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c (\u043a\u0430\u043a \u0438 \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435 — \u0440\u0443\u0431\u0440\u0438\u043a\u0430 — \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b!)<\/p>\n
          \u041d\u0438\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043c\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043d\u043e \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u044d\u0442\u043e \u0438\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0433\u043e\u043b\u043e\u0432\u044b, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0434\u0438\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u043e Vue 2 \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 Reactive — \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0436\u0438\u0437\u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u043c\u043e\u0435\u0433\u043e), \u043d\u0435 \u043f\u043e\u043b\u0435\u043d\u0438\u0442\u0435\u0441\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043d\u0435\u0439 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430!<\/p>\n
          \u041d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0436\u0438\u0437\u043d\u044c \u0438 \u043c\u043d\u0435 \u043b\u0438\u0447\u043d\u043e \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442, \u0430 \u044f \u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0443 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432 \u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n
          \n\u041a\u043e\u0434 — App.vue<\/summary>\n
          \n
          <template>   <div>     <!-- Main body -->     <div class=\"main\">       <h5>App.vue<\/h5>        String from store: {{ readonlyStringFromStore }}        <div>         <button @click=\"increaseCounter\">Counter: {{ counter }}<\/button>       <\/div>     <\/div>     <!-- \/Main body -->      <TheHelloWorldComponent :counter=\"counter\" @customEvent=\"increaseCounter\" \/>      <TheTestComponent :counter=\"counter\" @click=\"increaseCounter\" \/>   <\/div> <\/template>  <script lang=\"ts\" setup> \/**  * @file src\/App.vue  * @author Artem Shuvaev  * @version 1.0.0  * @fileoverview Entry Vue example file for it's project  *\/  import { ref, onMounted, readonly, defineAsyncComponent } from 'vue' import { habrModule } from '.\/store'  \/* Components *\/  \/\/ Vue + new setup script example component const TheHelloWorldComponent = defineAsyncComponent(   () => import('.\/components\/TheHelloWorldComponent.vue') )  \/\/ Vue + new setup and TSX render example const TheTestComponent = defineAsyncComponent(   () => import('.\/components\/TheTestComponent\/index') )  \/* Data *\/  \/\/ must be readonly cause of state proxying const readonlyStringFromStore = readonly(habrModule.state.strExample)  \/\/ simple reactive variable const counter = ref(0)  \/* Hooks *\/ onMounted(() => {   habrModule.actions.setString('changed from App.vue string') })  \/* Methods *\/  \/**  * Increase local reactive counter  *\/ const increaseCounter = () => {   counter.value++ } <\/script>\u00ac  <style lang=\"css\"> @import 'styles.css'; <\/style>  <style lang=\"css\" scoped> .main {   background-color: aquamarine;   padding: 5vh; } <\/style> <\/code><\/pre>\n
          \u042f \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435<\/p>\n<\/div>\n<\/details>\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-325312","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325312","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=325312"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325312\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=325312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=325312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=325312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}