{"id":465873,"date":"2025-07-03T09:39:05","date_gmt":"2025-07-03T09:39:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=465873"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=465873","title":{"rendered":"<span>\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0445\u0443\u043a\u0438 \u0432\u043e Vue 3: \u043a\u043e\u0440\u043e\u0442\u043a\u043e<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0445\u0443\u043a\u0438 \u0432\u043e Vue 3, \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<h3>\u0427\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430 \u0445\u0443\u043a\u0438 \u0432\u043e Vue 3?<\/h3>\n<p>\u0425\u0443\u043a (composable) \u0432\u043e Vue 3 \u2014 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0436\u0438\u0432\u0451\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 <code>setup()<\/code> \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Composition API: <code>ref<\/code>, <code>reactive<\/code>, <code>computed<\/code>, <code>watch<\/code>, \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b, provide\/inject.<\/p>\n<p>\u041d\u043e \u043d\u0435 \u043e\u0431\u043c\u0430\u043d\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439. \u042d\u0442\u043e \u0446\u0435\u043b\u044b\u0439 <strong>\u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/strong>, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u043e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0442 \u0435\u0433\u043e UI-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b.<\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c:<\/p>\n<blockquote>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0445\u0443\u043a \u2014<\/strong> \u044d\u0442\u043e \u0447\u0438\u0441\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0441 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/blockquote>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0445\u0443\u043a\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 <\/strong><code><strong>setup()<\/strong><\/code>: \u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0416\u0438\u0432\u0443\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong> \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0435 <code>ref<\/code> \u0438 <code>reactive<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0438\u0445 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b (<\/strong><code><strong>onMounted<\/strong><\/code><strong>, <\/strong><code><strong>onUnmounted<\/strong><\/code><strong> \u0438 \u0434\u0440.)<\/strong>.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437<\/strong>: \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u2014 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u044f\u0437\u0430\u043d\u044b \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0437\u0430 \u0441\u043e\u0431\u043e\u0439<\/strong>, \u0435\u0441\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438\u043b\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u044b).<\/p>\n<\/li>\n<\/ul>\n<h3>\u0410\u043d\u0430\u0442\u043e\u043c\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0445\u0443\u043a\u0430<\/h3>\n<p>\u0412\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u0435\u0436\u0438\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0445\u0443\u043a\u0430:<\/p>\n<pre><code class=\"java\">import { ref, onMounted, onUnmounted } from 'vue'  export function useMouse() {   \/\/ 1. \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435   const x = ref(0)   const y = ref(0)    \/\/ 2. \u0411\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0430, \u043e\u0442\u0434\u0435\u043b\u0451\u043d\u043d\u0430\u044f \u043e\u0442 UI   const update = (e: MouseEvent) =&gt; {     x.value = e.pageX     y.value = e.pageY   }    \/\/ 3. \u0421\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b   onMounted(() =&gt; window.addEventListener('mousemove', update))   onUnmounted(() =&gt; window.removeEventListener('mousemove', update))    \/\/ 4. \u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 (API \u043d\u0430\u0440\u0443\u0436\u0443)   return { x, y } }<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u0437\u0434\u0435\u0441\u044c \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">\n<\/th>\n<th data-colwidth=\"248\" width=\"248\">\n<p align=\"left\">\u0421\u043b\u043e\u0439<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0417\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">1<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\"><code>ref<\/code>\/<code>reactive<\/code><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 state \u2014 \u0441\u0442\u0440\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0435 \u0441\u043d\u0430\u0440\u0443\u0436\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">2<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\">\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b (<code>update<\/code>)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041b\u043e\u0433\u0438\u043a\u0430 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0430, \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">3<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\"><code>onMounted<\/code>\/<code>onUnmounted<\/code><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0412\u0435\u0448\u0430\u0435\u043c \u0438 \u0441\u043d\u0438\u043c\u0430\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">4<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\"><code>return {}<\/code><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e\u0435 \u043d\u0430\u0440\u0443\u0436\u0443. <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e: <strong>\u0445\u0443\u043a = \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 Vue \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 \u0438\u0437 <\/strong><code><strong>setup()<\/strong><\/code>. \u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0445\u0443\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0435\u0451 \u043f\u0440\u044f\u043c\u043e \u0432 <code>setup()<\/code>. \u041d\u043e \u2014 \u0447\u0438\u0449\u0435, \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0435\u0435 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e.<\/p>\n<p>\u0418 \u044d\u0442\u043e \u0432\u0435\u0441\u044c \u0441\u043c\u044b\u0441\u043b \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e API: <strong>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443<\/strong>.<\/p>\n<h3>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 useFetch: \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c, \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u043c, \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c<\/h3>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u0441\u0430\u043c\u044b\u0439 \u0447\u0430\u0441\u0442\u044b\u0439 use case \u0434\u043b\u044f \u0445\u0443\u043a\u043e\u0432 \u2014 \u044d\u0442\u043e \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u0441\u0451, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0441\u0435\u0442\u0438 \u2014 API-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439, \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u2014 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439. <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c <code><strong>useFetch()<\/strong><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0438 <code>unmounted<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 <code>try\/catch\/finally<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0442\u0435\u0441\u0442\u044b \u0438 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 <code>fetcher<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>T<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0438\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u044b,<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0421\u043a\u0435\u043b\u0435\u0442 useFetch()<\/h4>\n<pre><code class=\"java\">\/\/ useFetch.ts import { ref, shallowRef, onUnmounted } from 'vue'  interface Options&lt;T&gt; {   cacheKey?: string   fetcher?: (url: string) =&gt; Promise&lt;T&gt;   \/\/ \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0442\u0435\u0441\u0442\u0430\u0445   immediate?: boolean   timeout?: number }  export function useFetch&lt;T = unknown&gt;(url: string, opts: Options&lt;T&gt; = {}) {   const data     = shallowRef&lt;T | null&gt;(null)   const error    = ref&lt;Error | null&gt;(null)   const loading  = ref(false)   const controller = new AbortController()   let timer: number | undefined<\/code><\/pre>\n<p><code>ref<\/code> \u0434\u043b\u044f <code>loading<\/code> \u0438 <code>error<\/code>, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e. <code>shallowRef<\/code> \u0434\u043b\u044f <code>data<\/code> \u2014 \u0447\u0442\u043e\u0431\u044b Vue \u043d\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u043b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0441 10K \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432).  <code>AbortController<\/code> \u2014 \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e <strong>\u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441<\/strong>, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0430\u043d\u043c\u0430\u0443\u043d\u0442\u0438\u0442\u0441\u044f \u0438\u043b\u0438 timeout \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u0435\u0442. <code>Options<\/code> \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 API: \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>fetcher<\/code>, \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c <code>immediate<\/code>, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c <code>timeout<\/code>.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<pre><code class=\"java\">  const fetcher = opts.fetcher ?? (u =&gt; fetch(u, { signal: controller.signal }).then(r =&gt; {     if (!r.ok) throw new Error(`HTTP ${r.status}`)     return r.json() as Promise&lt;T&gt;   }))<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 <code>fetcher<\/code> \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>fetch<\/code>, \u043d\u043e <strong>\u0443\u0436\u0435 \u0441 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u043c \u0434\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b<\/strong>. <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<pre><code class=\"java\">  const exec = async () =&gt; {     loading.value = true     error.value = null     try {       if (opts.timeout)         timer = window.setTimeout(() =&gt; controller.abort(), opts.timeout)        data.value = await fetcher(url)     } catch (e) {       if ((e as DOMException).name !== 'AbortError')         error.value = e as Error     } finally {       loading.value = false       clearTimeout(timer)     }   }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u2014 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c <code>error<\/code>, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c <code>loading<\/code>, \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u043d <code>timeout<\/code>, \u0432\u0435\u0448\u0430\u0435\u043c <code>setTimeout<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 N \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 <code>abort()<\/code> (\u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0435\u0442 <code>fetch<\/code>).<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 <code>AbortError<\/code> \u043b\u0438 \u044d\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c <code>error<\/code> \u043b\u0438\u0448\u043d\u0438\u043c, \u0430 \u0432 <code>finally<\/code> \u2014 \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u043c <code>loading<\/code>, \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0430\u0439\u043c\u0435\u0440.<\/p>\n<p>\u042d\u0442\u043e \u043a\u043e\u0441\u0442\u044f\u043a \u0434\u043b\u044f 99% \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 UI: <strong>fetch + abort + timeout + loading\/error guard<\/strong>.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0445\u0443\u043a\u0443 \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443:<\/p>\n<pre><code class=\"java\">  if (opts.immediate !== false) exec()   onUnmounted(() =&gt; controller.abort())<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 <code>immediate !== false<\/code>, \u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430\u0447\u043d\u0451\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u0432\u044b\u0437\u043e\u0432\u0435\u0442 <code>refetch()<\/code> \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p><code>onUnmounted(() =&gt; controller.abort())<\/code> \u2014 \u044d\u0442\u043e \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u043a\u0430: <strong>\u0443\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0443\u0445\u043e\u0434\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441<\/strong>. \u0418\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u043e\u0432\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f <code>state<\/code> \u043d\u0430 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 race condition.<\/p>\n<p>\u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c API:<\/p>\n<pre><code class=\"java\">  return {     data,     error,     loading,     refetch: exec,     abort: () =&gt; controller.abort(),     canAbort: () =&gt; !controller.signal.aborted   } }<\/code><\/pre>\n<p><code>refetch()<\/code> \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e; <code>abort()<\/code> \u2014 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b &#171;\u041e\u0442\u043c\u0435\u043d\u0430&#187;); <code>canAbort()<\/code> \u2014 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432 UI (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0435\u0440\u044b\u0439 vs \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 &#171;\u041e\u0442\u043c\u0435\u043d\u0430&#187;).<\/p>\n<h4>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u0435\u0448<\/h4>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e <code>cacheKey<\/code> \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0439, \u043d\u043e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d.<\/p>\n<pre><code class=\"java\">const cached = new Map&lt;string, unknown&gt;()  if (opts.cacheKey &amp;&amp; cached.has(opts.cacheKey)) {   data.value = cached.get(opts.cacheKey) as T } else {   \/\/ \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430:   if (opts.cacheKey) cached.set(opts.cacheKey, data.value) }<\/code><\/pre>\n<p>\u0417\u0430\u0447\u0435\u043c \u044d\u0442\u043e? 80% \u0444\u0440\u043e\u043d\u0442\u043e\u0432 \u0436\u0438\u0432\u0451\u0442 \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0451\u0440\u0433\u0430\u0442\u044c API \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043d\u0435 \u0431\u044b\u043b\u043e &#171;\u043c\u043e\u0440\u0433\u0430\u043d\u0438\u044f&#187; \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>TTL \u0447\u0435\u0440\u0435\u0437 <code>Map&lt;string, { data, timestamp }&gt;<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>LRU<\/code> \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0431\u0440\u043e\u0441 <code>cachePolicy: 'cache-first' | 'network-only'<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u043e \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 <code>Map<\/code> \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 90% \u0437\u0430\u0434\u0430\u0447.<\/p>\n<h3>\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c \u0445\u0443\u043a\u0438, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043a\u043e\u0443\u043f\u043e\u043c \u0438 \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b setup()<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0436\u0435 \u043d\u0430\u043b\u043e\u0432\u0447\u0438\u043b\u0438\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438 <code>useFetch<\/code>, <code>useCounter<\/code> \u0438 <code>useMouse<\/code>, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0440\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0425\u0443\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435: \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 WebSocket&#8217;\u0430\u043c\u0438, \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0448\u0430\u0440\u044f\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 <code>auth<\/code>, \u0438\u043b\u0438 \u043b\u0435\u0437\u0443\u0442 \u0432\u0433\u043b\u0443\u0431\u044c Vue-\u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430.<\/p>\n<h4>\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 effectScope<\/h4>\n<p>\u041f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0432\u0441\u0435 <code>ref<\/code>, <code>computed<\/code>, <code>watchEffect<\/code> \u0438 \u0434\u0430\u0436\u0435 <code>onUnmounted<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0445\u0443\u043a\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043e <strong>\u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0441\u043a\u043e\u0443\u043f\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong>. \u0418 \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043f\u043e\u043a\u0430 \u0432\u044b \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e <strong>\u0443\u0431\u0438\u0442\u044c \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/strong>.<\/p>\n<p>\u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0443\u0436\u0435\u043d <code><strong>effectScope<\/strong><\/code> \u2014 \u0432\u0441\u0442\u0440\u043e\u0430\u043d\u043d\u044b\u0439 \u0432 Vue \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443 \u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u0435\u0451 \u0432\u044b\u0437\u043e\u0432\u043e\u043c <code>scope.stop()<\/code>.<\/p>\n<h4>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f useWebSocket \u0441 effectScope \u0438 \u0430\u0432\u0442\u043e-reconnect<\/h4>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0445\u0443\u043a\u0430 \u0434\u043b\u044f WebSocket. \u041e\u043d:<\/p>\n<ul>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435,<\/p>\n<\/li>\n<li>\n<p>\u043b\u043e\u0432\u0438\u0442 <code>message<\/code> \u0438 \u043f\u0443\u0448\u0438\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 <code>messages<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043e\u0431\u0440\u044b\u0432\u0435,<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>effectScope<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u043e\u0442\u0435\u043a\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"java\">\/\/ useWebSocket.ts import { ref, effectScope, onUnmounted } from 'vue'  export function useWebSocket(url: string) {   const scope = effectScope()   const messages = ref&lt;string[]&gt;([])   const status   = ref&lt;'OPEN' | 'CLOSED' | 'ERROR'&gt;('CLOSED')   let ws: WebSocket | null = null   let retry = 0   const MAX_RETRY = 5    const init = () =&gt; {     ws = new WebSocket(url)     status.value = 'OPEN'      ws.addEventListener('message', e =&gt; messages.value.push(e.data))     ws.addEventListener('close', handleClose)     ws.addEventListener('error', handleError)   }    const handleClose = () =&gt; reconnect()   const handleError = () =&gt; reconnect()    const reconnect = () =&gt; {     status.value = 'ERROR'     if (retry++ &lt; MAX_RETRY) {       setTimeout(init, 1000 * retry) \/\/ exponential back-off     } else {       console.warn('Max WS retries reached')     }   }    scope.run(() =&gt; init()) \/\/ \u0432\u0441\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u043e\u0439\u0434\u0443\u0442 \u0432\u043d\u0443\u0442\u0440\u044c scope    const send = (msg: string) =&gt; ws?.readyState === WebSocket.OPEN &amp;&amp; ws.send(msg)    const stop = () =&gt; {     ws?.close()     scope.stop() \/\/ \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, listeners \u0438 reactivity   }    onUnmounted(stop)    return { messages, status, send, stop } }<\/code><\/pre>\n<p><code>effectScope<\/code><strong> <\/strong>\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0432\u0441\u0435 <code>ref<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0438\u0441\u044c,<\/p>\n<\/li>\n<li>\n<p>\u0432\u0441\u0435 <code>watchEffect<\/code>, \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438,<\/p>\n<\/li>\n<li>\n<p>\u0432\u0441\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u2014 \u0438 \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0445 <strong>\u043e\u0434\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c <\/strong><code><strong>scope.stop()<\/strong><\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e, \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 <code>onUnmounted<\/code>, \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u0436\u0438\u0432\u044b\u0435 <code>WebSocket<\/code>-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. <\/p>\n<h4>\u0414\u0435\u043b\u0438\u043c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e: provide \/ inject<\/h4>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0445\u0443\u043a, \u0430 <strong>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/strong>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u043e\u0433\u0438\u043d, \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n<p>Vue \u0438\u043c\u0435\u0435\u0442 \u0447\u0438\u0441\u0442\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u2014 <code>provide()<\/code> \u0438 <code>inject()<\/code>.<\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 <code>useAuth()<\/code>:<\/p>\n<pre><code class=\"java\">\/\/ authProvider.ts import { provide, inject } from 'vue' import { currentUser } from '@\/stores\/user' \/\/ \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 ref  const key = Symbol('auth')  export function provideAuth() {   provide(key, {     user: currentUser,     login: () =&gt; { \/* ... *\/ },     logout: () =&gt; { \/* ... *\/ }   }) }  export function useAuth() {   const ctx = inject&lt;ReturnType&lt;typeof provideAuth&gt;&gt;(key)   if (!ctx) throw new Error('Auth not provided')   return ctx }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f:<\/p>\n<ul>\n<li>\n<p>\u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>App.vue<\/code> \u0438\u043b\u0438 <code>Layout<\/code>) \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>provideAuth()<\/code> \u043e\u0434\u0438\u043d \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u2014 <code>useAuth()<\/code>, \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u0422\u043e, \u0447\u0442\u043e \u0442\u044b <code>provide<\/code>&#8216;\u043d\u0443\u043b, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u2014 Vue \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 context tree.<\/p>\n<h4>getCurrentInstance()<\/h4>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f \u043a <code>emit<\/code>, <code>proxy<\/code>, <code>appContext<\/code>, <code>attrs<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0445\u0443\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439:<\/p>\n<ul>\n<li>\n<p>\u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442 <code>emit()<\/code> \u0438\u0437\u043d\u0443\u0442\u0440\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 <code>attrs<\/code> \u0438\u043b\u0438 <code>slots<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043b\u0435\u0437\u0435\u0442 \u0432 <code>appContext.config<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c <code>getCurrentInstance()<\/code>:<\/p>\n<pre><code class=\"java\">import { getCurrentInstance } from 'vue'  export function useEmitter() {   const inst = getCurrentInstance()   if (!inst) throw new Error('useEmitter must be called in setup')   const emit = inst.emit   return { emit } }<\/code><\/pre>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c <strong>\u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 <\/strong><code><strong>setup()<\/strong><\/code><strong> \u0438\u043b\u0438 \u0445\u0443\u043a\u043e\u0432<\/strong>, \u0438\u043d\u0430\u0447\u0435 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 <strong>\u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 <\/strong><code><strong>computed<\/strong><\/code><strong> \u0438\u043b\u0438 <\/strong><code><strong>watch<\/strong><\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u2014 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0443\u0436\u0435 \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d (\u0447\u0430\u0441\u0442\u044b\u0439 \u0431\u0430\u0433, \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u043c\u044b\u0439 \u043d\u0430 GitHub).<\/p>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c composable<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0445\u0443\u043a\u0438 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u0442\u0430\u0439\u043c\u0435\u0440\u0430\u043c\u0438, \u0441\u0435\u0442\u0435\u0432\u044b\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0438\u043b\u0438 shared state \u2014 <strong>\u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445<\/strong>.<\/p>\n<p>Vue 3 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043f\u043e\u043c\u043d\u0438\u0442\u044c: <strong>\u0445\u0443\u043a \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0430\u0443\u043d\u0442\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <code>setup()<\/code> \u0432 \u043c\u043e\u043a-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043f\u043e\u0442\u0435\u0441\u0442\u0438\u0442\u044c.<\/p>\n<h4> Vitest + @vue\/test-utils: \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430<\/h4>\n<pre><code class=\"java\">import { describe, it, expect, vi } from 'vitest' import { mount } from '@vue\/test-utils' import { defineComponent } from 'vue' import { useFetch } from '@\/composables\/useFetch'  describe('useFetch', () =&gt; {   it('fetches data and exposes it', async () =&gt; {     vi.stubGlobal('fetch', vi.fn(() =&gt;       Promise.resolve({ ok: true, json: () =&gt; Promise.resolve({ ok: 1 }) })     ))      const Comp = defineComponent({       setup () {         return useFetch&lt;{ ok: number }&gt;('\/api', { immediate: false })       },       template: '&lt;div&gt;&lt;\/div&gt;'     })      const wrapper = mount(Comp)      await wrapper.vm.refetch()     expect(wrapper.vm.data.ok).toBe(1)   }) })<\/code><\/pre>\n<p>\u0417\u0430\u0433\u043b\u0443\u0448\u0430\u0435\u043c <code>fetch<\/code> \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0447\u0435\u0440\u0435\u0437 <code>vi.stubGlobal<\/code>. \u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043c\u043e\u043a-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>useFetch<\/code> \u0432 <code>setup()<\/code> \u2014 <strong>\u0432 \u044d\u0442\u043e\u043c \u0432\u0441\u044f \u0444\u0438\u0447\u0430<\/strong>: \u0445\u0443\u043a \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0434\u043e\u0441\u0442\u0443\u043f \u0447\u0435\u0440\u0435\u0437 <code>wrapper.vm<\/code>.<\/p>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>refetch()<\/code>, \u0436\u0434\u0451\u043c \u043f\u0440\u043e\u043c\u0438\u0441, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<h4>flushPromises(): \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e microtasks<\/h4>\n<p>\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0445\u0443\u043a\u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 <code>flushPromises()<\/code>:<\/p>\n<pre><code class=\"java\">import flushPromises from 'flush-promises'  await wrapper.vm.refetch() await flushPromises() expect(wrapper.vm.data).toEqual(...)<\/code><\/pre>\n<p><code>await<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0436\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u043c\u0438\u0441\u0430 \u2014 \u043d\u043e Vue <strong>\u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0442\u0438\u043a\u0435<\/strong>. \u0411\u0435\u0437 <code>flushPromises()<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c <code>ref<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0451 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0441\u044f. <\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u0438\u0448\u0435\u0442\u0435 \u0441\u0432\u043e\u0438 \u0445\u0443\u043a\u0438 \u2014 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0443 \u0432\u0430\u0441 \u043f\u0440\u0438\u0436\u0438\u043b\u0438\u0441\u044c. \u0427\u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c, \u0447\u0442\u043e \u2014 \u043d\u0435\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043b\u0438 <code>effectScope<\/code>, \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043b\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 <code>provide<\/code>-\u0445\u0443\u043a\u0438, \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0443? \u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c.<\/p>\n<hr\/>\n<p>\u041f\u043e\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435\u0441\u044c \u0432\u00a0Vue 3\u00a0\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435?<\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0438\u0442\u0435\u0441\u044c \u0441\u00a0\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u0445\u0443\u043a\u0430\u043c\u0438\u00a0\u2014 \u043e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0435, \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u00a0\u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u0410\u00a0\u0447\u0442\u043e\u0431\u044b \u043d\u0435\u00a0\u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u044c, \u0430\u00a0\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u00a0\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u043e\u0432\u00a0\u2014 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0435 \u043d\u0430\u00a0\u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u0443\u0440\u043e\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/otus.pw\/WEfo\/\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a\u00a0\u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0441\u0432\u043e\u0438\u0442\u044c Vue, \u0435\u0441\u043b\u0438 \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0448\u044c JavaScript<\/a>\u00a0\u2014 <em>8\u00a0\u0438\u044e\u043b\u044f \u0432 20:00 <\/em> <\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/otus.pw\/je83\/\" rel=\"noopener noreferrer nofollow\">Vue \u0443\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0449\u0435: \u043f\u0438\u0448\u0435\u043c \u0438\u0433\u0440\u0443, \u043f\u043e\u043a\u0430 React \u0433\u0440\u0443\u0437\u0438\u0442 \u0441\u0442\u0435\u0439\u0442<\/a>\u00a0\u2014 <em>16\u00a0\u0438\u044e\u043b\u044f \u0432 20:00 <\/em> <\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/otus.pw\/vy7q\/\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0447\u0430\u0442 \u043d\u0430\u00a0Vue \u0441\u00a0WebSocket: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432 \u0432\u00a0\u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 <\/a>\u00a0\u2014 <em>21\u00a0\u0438\u044e\u043b\u044f \u0432 20:00<\/em> <\/p>\n<\/li>\n<\/ul>\n<p>\u0410\u00a0\u0435\u0449\u0451 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u043f\u0440\u043e\u0439\u0442\u0438<a href=\"https:\/\/otus.pw\/gDwB\/\" rel=\"noopener noreferrer nofollow\"> <strong>\u0432\u0441\u0442\u0443\u043f\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/a>\u00a0\u2014 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u0432\u00a0\u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u043a\u00a0\u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044e. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/922582\/\"> https:\/\/habr.com\/ru\/articles\/922582\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0445\u0443\u043a\u0438 \u0432\u043e Vue 3, \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<h3>\u0427\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430 \u0445\u0443\u043a\u0438 \u0432\u043e Vue 3?<\/h3>\n<p>\u0425\u0443\u043a (composable) \u0432\u043e Vue 3 \u2014 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0436\u0438\u0432\u0451\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 <code>setup()<\/code> \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Composition API: <code>ref<\/code>, <code>reactive<\/code>, <code>computed<\/code>, <code>watch<\/code>, \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b, provide\/inject.<\/p>\n<p>\u041d\u043e \u043d\u0435 \u043e\u0431\u043c\u0430\u043d\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439. \u042d\u0442\u043e \u0446\u0435\u043b\u044b\u0439 <strong>\u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/strong>, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u043e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0442 \u0435\u0433\u043e UI-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b.<\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c:<\/p>\n<blockquote>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0445\u0443\u043a \u2014<\/strong> \u044d\u0442\u043e \u0447\u0438\u0441\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0441 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/blockquote>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0445\u0443\u043a\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 <\/strong><code><strong>setup()<\/strong><\/code>: \u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0416\u0438\u0432\u0443\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong> \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0435 <code>ref<\/code> \u0438 <code>reactive<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0438\u0445 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b (<\/strong><code><strong>onMounted<\/strong><\/code><strong>, <\/strong><code><strong>onUnmounted<\/strong><\/code><strong> \u0438 \u0434\u0440.)<\/strong>.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437<\/strong>: \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u2014 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u044f\u0437\u0430\u043d\u044b \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0437\u0430 \u0441\u043e\u0431\u043e\u0439<\/strong>, \u0435\u0441\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438\u043b\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u044b).<\/p>\n<\/li>\n<\/ul>\n<h3>\u0410\u043d\u0430\u0442\u043e\u043c\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0445\u0443\u043a\u0430<\/h3>\n<p>\u0412\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u0435\u0436\u0438\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0445\u0443\u043a\u0430:<\/p>\n<pre><code class=\"java\">import { ref, onMounted, onUnmounted } from 'vue'  export function useMouse() {   \/\/ 1. \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435   const x = ref(0)   const y = ref(0)    \/\/ 2. \u0411\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0430, \u043e\u0442\u0434\u0435\u043b\u0451\u043d\u043d\u0430\u044f \u043e\u0442 UI   const update = (e: MouseEvent) =&gt; {     x.value = e.pageX     y.value = e.pageY   }    \/\/ 3. \u0421\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b   onMounted(() =&gt; window.addEventListener('mousemove', update))   onUnmounted(() =&gt; window.removeEventListener('mousemove', update))    \/\/ 4. \u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 (API \u043d\u0430\u0440\u0443\u0436\u0443)   return { x, y } }<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u0437\u0434\u0435\u0441\u044c \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">\n<\/th>\n<th data-colwidth=\"248\" width=\"248\">\n<p align=\"left\">\u0421\u043b\u043e\u0439<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0417\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">1<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\"><code>ref<\/code>\/<code>reactive<\/code><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 state \u2014 \u0441\u0442\u0440\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0435 \u0441\u043d\u0430\u0440\u0443\u0436\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">2<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\">\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b (<code>update<\/code>)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041b\u043e\u0433\u0438\u043a\u0430 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0430, \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">3<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\"><code>onMounted<\/code>\/<code>onUnmounted<\/code><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0412\u0435\u0448\u0430\u0435\u043c \u0438 \u0441\u043d\u0438\u043c\u0430\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"50\" width=\"50\">\n<p align=\"left\">4<\/p>\n<\/td>\n<td data-colwidth=\"248\" width=\"248\">\n<p align=\"left\"><code>return {}<\/code><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e\u0435 \u043d\u0430\u0440\u0443\u0436\u0443. <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e: <strong>\u0445\u0443\u043a = \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 Vue \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 \u0438\u0437 <\/strong><code><strong>setup()<\/strong><\/code>. \u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0445\u0443\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0435\u0451 \u043f\u0440\u044f\u043c\u043e \u0432 <code>setup()<\/code>. \u041d\u043e \u2014 \u0447\u0438\u0449\u0435, \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0435\u0435 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e.<\/p>\n<p>\u0418 \u044d\u0442\u043e \u0432\u0435\u0441\u044c \u0441\u043c\u044b\u0441\u043b \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e API: <strong>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443<\/strong>.<\/p>\n<h3>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 useFetch: \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c, \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u043c, \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c<\/h3>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u0441\u0430\u043c\u044b\u0439 \u0447\u0430\u0441\u0442\u044b\u0439 use case \u0434\u043b\u044f \u0445\u0443\u043a\u043e\u0432 \u2014 \u044d\u0442\u043e \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u0441\u0451, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0441\u0435\u0442\u0438 \u2014 API-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439, \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u2014 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439. <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c <code><strong>useFetch()<\/strong><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0438 <code>unmounted<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 <code>try\/catch\/finally<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0442\u0435\u0441\u0442\u044b \u0438 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 <code>fetcher<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>T<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0438\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u044b,<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0421\u043a\u0435\u043b\u0435\u0442 useFetch()<\/h4>\n<pre><code class=\"java\">\/\/ useFetch.ts import { ref, shallowRef, onUnmounted } from 'vue'  interface Options&lt;T&gt; {   cacheKey?: string   fetcher?: (url: string) =&gt; Promise&lt;T&gt;   \/\/ \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0442\u0435\u0441\u0442\u0430\u0445   immediate?: boolean   timeout?: number }  export function useFetch&lt;T = unknown&gt;(url: string, opts: Options&lt;T&gt; = {}) {   const data     = shallowRef&lt;T | null&gt;(null)   const error    = ref&lt;Error | null&gt;(null)   const loading  = ref(false)   const controller = new AbortController()   let timer: number | undefined<\/code><\/pre>\n<p><code>ref<\/code> \u0434\u043b\u044f <code>loading<\/code> \u0438 <code>error<\/code>, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e. <code>shallowRef<\/code> \u0434\u043b\u044f <code>data<\/code> \u2014 \u0447\u0442\u043e\u0431\u044b Vue \u043d\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u043b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0441 10K \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432).  <code>AbortController<\/code> \u2014 \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e <strong>\u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441<\/strong>, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0430\u043d\u043c\u0430\u0443\u043d\u0442\u0438\u0442\u0441\u044f \u0438\u043b\u0438 timeout \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u0435\u0442. <code>Options<\/code> \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 API: \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>fetcher<\/code>, \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c <code>immediate<\/code>, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c <code>timeout<\/code>.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<pre><code class=\"java\">  const fetcher = opts.fetcher ?? (u =&gt; fetch(u, { signal: controller.signal }).then(r =&gt; {     if (!r.ok) throw new Error(`HTTP ${r.status}`)     return r.json() as Promise&lt;T&gt;   }))<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 <code>fetcher<\/code> \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>fetch<\/code>, \u043d\u043e <strong>\u0443\u0436\u0435 \u0441 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u043c \u0434\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b<\/strong>. <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<pre><code class=\"java\">  const exec = async () =&gt; {     loading.value = true     error.value = null     try {       if (opts.timeout)         timer = window.setTimeout(() =&gt; controller.abort(), opts.timeout)        data.value = await fetcher(url)     } catch (e) {       if ((e as DOMException).name !== 'AbortError')         error.value = e as Error     } finally {       loading.value = false       clearTimeout(timer)     }   }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u2014 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c <code>error<\/code>, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c <code>loading<\/code>, \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u043d <code>timeout<\/code>, \u0432\u0435\u0448\u0430\u0435\u043c <code>setTimeout<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 N \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 <code>abort()<\/code> (\u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0435\u0442 <code>fetch<\/code>).<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 <code>AbortError<\/code> \u043b\u0438 \u044d\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c <code>error<\/code> \u043b\u0438\u0448\u043d\u0438\u043c, \u0430 \u0432 <code>finally<\/code> \u2014 \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u043c <code>loading<\/code>, \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0430\u0439\u043c\u0435\u0440.<\/p>\n<p>\u042d\u0442\u043e \u043a\u043e\u0441\u0442\u044f\u043a \u0434\u043b\u044f 99% \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 UI: <strong>fetch + abort + timeout + loading\/error guard<\/strong>.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0445\u0443\u043a\u0443 \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443:<\/p>\n<pre><code class=\"java\">  if (opts.immediate !== false) exec()   onUnmounted(() =&gt; controller.abort())<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 <code>immediate !== false<\/code>, \u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430\u0447\u043d\u0451\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u0432\u044b\u0437\u043e\u0432\u0435\u0442 <code>refetch()<\/code> \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p><code>onUnmounted(() =&gt; controller.abort())<\/code> \u2014 \u044d\u0442\u043e \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u043a\u0430: <strong>\u0443\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0443\u0445\u043e\u0434\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441<\/strong>. \u0418\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u043e\u0432\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f <code>state<\/code> \u043d\u0430 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 race condition.<\/p>\n<p>\u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c API:<\/p>\n<pre><code class=\"java\">  return {     data,     error,     loading,     refetch: exec,     abort: () =&gt; controller.abort(),     canAbort: () =&gt; !controller.signal.aborted   } }<\/code><\/pre>\n<p><code>refetch()<\/code> \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e; <code>abort()<\/code> \u2014 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b &#171;\u041e\u0442\u043c\u0435\u043d\u0430&#187;); <code>canAbort()<\/code> \u2014 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432 UI (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0435\u0440\u044b\u0439 vs \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 &#171;\u041e\u0442\u043c\u0435\u043d\u0430&#187;).<\/p>\n<h4>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u0435\u0448<\/h4>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e <code>cacheKey<\/code> \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0439, \u043d\u043e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d.<\/p>\n<pre><code class=\"java\">const cached = new Map&lt;string, unknown&gt;()  if (opts.cacheKey &amp;&amp; cached.has(opts.cacheKey)) {   data.value = cached.get(opts.cacheKey) as T } else {   \/\/ \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430:   if (opts.cacheKey) cached.set(opts.cacheKey, data.value) }<\/code><\/pre>\n<p>\u0417\u0430\u0447\u0435\u043c \u044d\u0442\u043e? 80% \u0444\u0440\u043e\u043d\u0442\u043e\u0432 \u0436\u0438\u0432\u0451\u0442 \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0451\u0440\u0433\u0430\u0442\u044c API \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043d\u0435 \u0431\u044b\u043b\u043e &#171;\u043c\u043e\u0440\u0433\u0430\u043d\u0438\u044f&#187; \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u043a\u043b\u0438\u043a \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>TTL \u0447\u0435\u0440\u0435\u0437 <code>Map&lt;string, { data, timestamp }&gt;<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>LRU<\/code> \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0431\u0440\u043e\u0441 <code>cachePolicy: 'cache-first' | 'network-only'<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u043e \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 <code>Map<\/code> \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 90% \u0437\u0430\u0434\u0430\u0447.<\/p>\n<h3>\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c \u0445\u0443\u043a\u0438, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043a\u043e\u0443\u043f\u043e\u043c \u0438 \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b setup()<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0436\u0435 \u043d\u0430\u043b\u043e\u0432\u0447\u0438\u043b\u0438\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438 <code>useFetch<\/code>, <code>useCounter<\/code> \u0438 <code>useMouse<\/code>, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0440\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0425\u0443\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435: \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 WebSocket&#8217;\u0430\u043c\u0438, \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0448\u0430\u0440\u044f\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 <code>auth<\/code>, \u0438\u043b\u0438 \u043b\u0435\u0437\u0443\u0442 \u0432\u0433\u043b\u0443\u0431\u044c Vue-\u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430.<\/p>\n<h4>\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 effectScope<\/h4>\n<p>\u041f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0432\u0441\u0435 <code>ref<\/code>, <code>computed<\/code>, <code>watchEffect<\/code> \u0438 \u0434\u0430\u0436\u0435 <code>onUnmounted<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0445\u0443\u043a\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043e <strong>\u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0441\u043a\u043e\u0443\u043f\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong>. \u0418 \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043f\u043e\u043a\u0430 \u0432\u044b \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e <strong>\u0443\u0431\u0438\u0442\u044c \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/strong>.<\/p>\n<p>\u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0443\u0436\u0435\u043d <code><strong>effectScope<\/strong><\/code> \u2014 \u0432\u0441\u0442\u0440\u043e\u0430\u043d\u043d\u044b\u0439 \u0432 Vue \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443 \u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u0435\u0451 \u0432\u044b\u0437\u043e\u0432\u043e\u043c <code>scope.stop()<\/code>.<\/p>\n<h4>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f useWebSocket \u0441 effectScope \u0438 \u0430\u0432\u0442\u043e-reconnect<\/h4>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0445\u0443\u043a\u0430 \u0434\u043b\u044f WebSocket. \u041e\u043d:<\/p>\n<ul>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435,<\/p>\n<\/li>\n<li>\n<p>\u043b\u043e\u0432\u0438\u0442 <code>message<\/code> \u0438 \u043f\u0443\u0448\u0438\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 <code>messages<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043e\u0431\u0440\u044b\u0432\u0435,<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>effectScope<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u043e\u0442\u0435\u043a\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"java\">\/\/ useWebSocket.ts import { ref, effectScope, onUnmounted } from 'vue'  export function useWebSocket(url: string) {   const scope = effectScope()   const messages = ref&lt;string[]&gt;([])   const status   = ref&lt;'OPEN' | 'CLOSED' | 'ERROR'&gt;('CLOSED')   let ws: WebSocket | null = null   let retry = 0   const MAX_RETRY = 5    const init = () =&gt; {     ws = new WebSocket(url)     status.value = 'OPEN'      ws.addEventListener('message', e =&gt; messages.value.push(e.data))     ws.addEventListener('close', handleClose)     ws.addEventListener('error', handleError)   }    const handleClose = () =&gt; reconnect()   const handleError = () =&gt; reconnect()    const reconnect = () =&gt; {     status.value = 'ERROR'     if (retry++ &lt; MAX_RETRY) {       setTimeout(init, 1000 * retry) \/\/ exponential back-off     } else {       console.warn('Max WS retries reached')     }   }    scope.run(() =&gt; init()) \/\/ \u0432\u0441\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u043e\u0439\u0434\u0443\u0442 \u0432\u043d\u0443\u0442\u0440\u044c scope    const send = (msg: string) =&gt; ws?.readyState === WebSocket.OPEN &amp;&amp; ws.send(msg)    const stop = () =&gt; {     ws?.close()     scope.stop() \/\/ \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, listeners \u0438 reactivity   }    onUnmounted(stop)    return { messages, status, send, stop } }<\/code><\/pre>\n<p><code>effectScope<\/code><strong> <\/strong>\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0432\u0441\u0435 <code>ref<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0438\u0441\u044c,<\/p>\n<\/li>\n<li>\n<p>\u0432\u0441\u0435 <code>watchEffect<\/code>, \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438,<\/p>\n<\/li>\n<li>\n<p>\u0432\u0441\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u2014 \u0438 \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0445 <strong>\u043e\u0434\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c <\/strong><code><strong>scope.stop()<\/strong><\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e, \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 <code>onUnmounted<\/code>, \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u0436\u0438\u0432\u044b\u0435 <code>WebSocket<\/code>-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. <\/p>\n<h4>\u0414\u0435\u043b\u0438\u043c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e: provide \/ inject<\/h4>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0445\u0443\u043a, \u0430 <strong>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/strong>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u043e\u0433\u0438\u043d, \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n<p>Vue \u0438\u043c\u0435\u0435\u0442 \u0447\u0438\u0441\u0442\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u2014 <code>provide()<\/code> \u0438 <code>inject()<\/code>.<\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 <code>useAuth()<\/code>:<\/p>\n<pre><code class=\"java\">\/\/ authProvider.ts import { provide, inject } from 'vue' import { currentUser } from '@\/stores\/user' \/\/ \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 ref  const key = Symbol('auth')  export function provideAuth() {   provide(key, {     user: currentUser,     login: () =&gt; { \/* ... *\/ },     logout: () =&gt; { \/* ... *\/ }   }) }  export function useAuth() {   const ctx = inject&lt;ReturnType&lt;typeof provideAuth&gt;&gt;(key)   if (!ctx) throw new Error('Auth not provided')   return ctx }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f:<\/p>\n<ul>\n<li>\n<p>\u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>App.vue<\/code> \u0438\u043b\u0438 <code>Layout<\/code>) \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>provideAuth()<\/code> \u043e\u0434\u0438\u043d \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u2014 <code>useAuth()<\/code>, \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u0422\u043e, \u0447\u0442\u043e \u0442\u044b <code>provide<\/code>&#8216;\u043d\u0443\u043b, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u2014 Vue \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 context tree.<\/p>\n<h4>getCurrentInstance()<\/h4>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f \u043a <code>emit<\/code>, <code>proxy<\/code>, <code>appContext<\/code>, <code>attrs<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0445\u0443\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439:<\/p>\n<ul>\n<li>\n<p>\u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442 <code>emit()<\/code> \u0438\u0437\u043d\u0443\u0442\u0440\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 <code>attrs<\/code> \u0438\u043b\u0438 <code>slots<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043b\u0435\u0437<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-465873","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/465873","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=465873"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/465873\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=465873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=465873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=465873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}