{"id":333696,"date":"2022-05-26T21:00:26","date_gmt":"2022-05-26T21:00:26","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=333696"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=333696","title":{"rendered":"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e: Vue 3 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

Vue 3 \u043f\u0440\u0438\u043d\u0451\u0441 \u0432 \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412\u0441\u0451 \u0447\u0430\u0449\u0435 \u044f \u0441\u0442\u0430\u043b \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0430 \u043f\u043e\u0440\u043e\u0439 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0446\u0435\u043b\u044b\u0439 \u0437\u043e\u043e\u043f\u0430\u0440\u043a \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043a\u0440\u0430\u0439\u043d\u043e\u0441\u0442\u0438, \u043b\u0438\u0431\u043e \u0432\u0441\u0451 \u0432 state manager, \u043b\u0438\u0431\u043e \u0432 composable (composition API), \u043b\u0438\u0431\u043e \u043c\u0443\u0442\u0430\u0446\u0438\u044f props \u0432\u043d\u0443\u0442\u0440\u0438<\/strong> \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432!<\/p>\n

\u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043d\u0430\u043c \u0432\u043e Vue 3.<\/p>\n

<\/figcaption><\/figure>\n

\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043e\u0440\u0438\u0438<\/h3>\n

\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u0442\u0432\u0435\u0440\u0434\u043e \u0443\u0431\u0435\u0436\u0434\u0451\u043d, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0438\u0436\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u043e\u0439 \u043f\u0443\u043b\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u0435\u0442 \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n

\u0426\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f — \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0445 \u043e\u0442\u0434\u0435\u043b\u0438\u043c\u044b\u0445 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0438\u0437 \u0441\u0435\u0431\u044f \u043d\u0435\u043a\u0438\u0439 \u0447\u0435\u0440\u043d\u044b\u0439 \u044f\u0449\u0438\u043a, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 \u0432 \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u0442\u043e, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0447\u0442\u043e-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0438, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u043c \u043e \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445!<\/p>\n

\u0421\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e:<\/p>\n

    \n
  1. \n

    props\/emits<\/p>\n<\/li>\n

  2. \n

    provide\/inject<\/p>\n<\/li>\n

  3. \n

    composable (composition API)<\/p>\n<\/li>\n

  4. \n

    state manager (Vuex\/Pinia)<\/p>\n<\/li>\n<\/ol>\n

    props\/emits<\/strong> — \u043f\u0440\u044f\u043c\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438! \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u0442\u0440\u043e\u0433\u043e\u0435 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (\u043f\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438).<\/p>\n

    \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u0435\u043d \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 (\u201cprops drilling<\/u><\/a>\u201d) \u0438 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043d\u0435\u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445.<\/p>\n

    provide\/inject<\/strong> — \u043f\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u201cprops drilling<\/u><\/a>\u201d \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n

    \u041c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043e\u0448\u0438\u0431\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\/\u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\/\u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f, \u043a\u0442\u043e \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0422\u0430\u043a \u0436\u0435 \u201c\u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u201d \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443.<\/p>\n

    composable<\/strong> — \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n

    \u0417\u0434\u0435\u0441\u044c \u0442\u0430\u043a \u0436\u0435 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u201c\u0432\u0438\u043d\u043e\u0432\u043d\u0438\u043a\u0430\u201d \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438 \u201c\u0441\u043e\u0431\u043b\u0430\u0437\u043d\u0438\u0442\u044c\u0441\u044f\u201d \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u0432 composable \u0444\u0430\u0439\u043b\u044b.<\/p>\n

    Vuex\/Pinia<\/strong> — \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d \u0441 composable. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u0443\u0436 \u0442\u043e\u0447\u043d\u043e.<\/p>\n

    \u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043b\u044e\u0431\u0430\u044f \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0441 \u0441\u043e\u0431\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c \u0438 \u043f\u043e\u043c\u043d\u0438\u0442\u044c (\u043f\u043e\u043a\u0430) \u0442\u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u043e\u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0441\u043c\u044b\u0441\u043be \u0438 \u0447\u0442\u043e-\u0442\u043e \u0433\u0434\u0435-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u043c\u0435\u043d\u044f\u044e\u0442, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u0441 \u043f\u0440\u044f\u043c\u043e\u0439 \u0441\u0432\u044f\u0437\u044c\u044e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. <\/p>\n

    \u0422\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435, \u0432\u0441\u0435 \u044d\u0442\u043e \u043b\u0438\u0448\u044c \u043c\u043e\u0451 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0441\u043f\u043e\u0440\u0438\u043c\u043e\u0439 \u0438\u0441\u0442\u0438\u043d\u043e\u0439. \u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043d\u0435\u043e\u0441\u043f\u043e\u0440\u0438\u043c\u044b\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u043e\u0442\u0447\u0435\u0442 \u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432. <\/p>\n

    \u0421 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u0435\u0435.<\/h3>\n

    props\/emits <\/strong>— \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c (\u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c) props \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439-\u0442\u043e props \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0442\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0421\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u043d \u043e\u0431 \u044d\u0442\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f emit(). \u0414\u0430 \u201cprops drilling<\/u><\/a>\u201d \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e. <\/p>\n

    \"\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435
    \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Props\/Emits<\/figcaption><\/figure>\n

    provide\/inject<\/strong> — \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n

    \"\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435
    \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Provide\/Inject<\/figcaption><\/figure>\n

    \u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 props\/emits \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435<\/strong>! \u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0430\u044f \u0447\u0435\u0440\u0435\u0437 provide \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <\/p>\n

    Vuex\/Pinia<\/strong> (state managers).<\/p>\n

    \"\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435
    \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Vuex\/Pinia<\/figcaption><\/figure>\n

    \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0441\u0451<\/strong> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 state manager — \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0432\u0441\u0451, \u0447\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0436\u0435\u043c, \u0432\u044b\u043d\u043e\u0441\u0438\u043c. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439\/\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u0449\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u201c\u0447\u0442\u043e-\u0442\u043e\u201d \u0442\u0440\u0435\u0442\u044c\u0435, \u0438\u043c\u0435\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u044d\u0442\u043e\u043c \u201c\u0447\u0451\u043c-\u0442\u043e\u201d. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e, \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u044d\u0442\u043e\u043c \u201c\u0447\u0435\u043c-\u0442\u043e\u201d, \u0430 \u0432 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043d\u0430\u0447\u043d\u0443\u0442 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e<\/strong>.<\/p>\n

    \u0414\u043b\u044f \u0441\u0435\u0431\u044f \u044f \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e, \u0447\u0442\u043e \u0432 state manager \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041e\u0442 \u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0447\u0435\u0440\u0435\u0437 Props\/Emits \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u0442\u043e\u0438\u0442.<\/p>\n

    \"\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435
    \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Vuex\/Pinia + Props\/Emits<\/figcaption><\/figure>\n

    \u0410 \u0447\u0442\u043e \u0436\u0435 \u0441 Composable ( Composition API)<\/strong>? \u041f\u043e\u0434\u0445\u043e\u0434 \u0441 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 use\u2026 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Vuex\/Pinia.<\/p>\n

    \u041f\u0440\u0430\u0432\u0434\u0430, \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u043e \u043d\u043e. Vuex\/Pinia<\/strong> — \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Vuex\/Pinia \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c. \u0421 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 Composable \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0422\u043e \u0435\u0441\u0442\u044c, \u043a\u0430\u0436\u0434\u044b\u0439 \u043d\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0432\u0430\u0448\u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0431\u0449\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438.<\/p>\n

    \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e, \u0441\u0445\u0435\u043c\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0442\u043e\u0439, \u0447\u0442\u043e \u0432\u044b\u0448\u0435. \u0414\u0430 \u0438 \u043f\u043e\u043b\u0435\u043d\u0438\u043b\u0441\u044f \u044f \u0435\u0451 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c.<\/s><\/p>\n

    \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Props\/Emits (\u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b) <\/h3>\n

    \u041f\u0440\u044f\u043c\u043e\u0439 props \u0438 emits<\/h4>\n

    \u0421\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 — \u044d\u0442\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 v-model. \u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043d\u0438\u043c \u0441\u0442\u0430\u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0447\u0435\u0440\u0435\u0437 v-model.<\/p>\n

    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n

    \u0412 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (App.vue) \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e. \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 Form.vue \u0447\u0435\u0440\u0435\u0437 v-model: <\/p>\n

    \/\/ App.vue <script setup> import { ref } from 'vue'; import Form from '.\/Form.vue';  const msg = ref('Hello World!');  const change = () => {   msg.value = Math.random().toString(36).slice(2, 7); } <\/script>  <template>   <h1>App<\/h1>   <div>msg: {{ msg }}<\/div>   <div>     <button @click=\"change\">       \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c     <\/button>   <\/div>   <hr \/>   <Form v-model=\"msg\" \/> <\/template><\/code><\/pre>\n
    \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Form.vue \u0443\u043a\u0430\u0436\u0435\u043c props \u0438 emits:<\/p>\n
    \/\/ Form.vue <script setup> import { ref } from 'vue';  defineProps({   modelValue: {     type: String,   } });    defineEmits(['update:modelValue']); <\/script>  <template>   <h2>Form<\/h2>   <input    :value=\"modelValue\"     @input=\"$emit('update:modelValue', $event.target.value)\"   > <\/template><\/code><\/pre>\n
    \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451, \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c v-model \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n
    Writable computed<\/h4>\n
    \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c v-model \u043d\u0430 <input> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c writable computed<\/strong> (get\/set).<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    App.vue \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \u0430 \u0432\u043e\u0442 Form.vue \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed } from 'vue';  const props = defineProps({   modelValue: {     type: String,   } });    const emit = defineEmits(['update:modelValue']);    const localComputed = computed({   get() {     return props.modelValue;   },   set(newValue) {     emit('update:modelValue', newValue)   } }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localComputed\"   > <\/template><\/code><\/pre>\n
    \u041c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0431\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b. \u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (App.vue), \u0442\u043e \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (Form.vue).<\/p>\n
    \u0422\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0432 props \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e (\u0447\u0435\u0440\u0435\u0437 ref()) \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c 2 watch.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0414\u043e\u0431\u0430\u0432\u0438\u043c watchers \u0432 Form.vue:<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: String,   } });    const emit = defineEmits(['update:modelValue']);    const local = ref(props.modelValue);    watch(local, (newValue) => {   emit('update:modelValue', newValue); });    watch(() => props.modelValue, (newValue) => {   local.value = newValue; }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"local\"   > <\/template><\/code><\/pre>\n
    \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c, \u043d\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c. \u203c\ufe0f\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 watchers, \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0435 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044e \u0438 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 callstack? \u0415\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e watch \u0441\u0440\u0430\u0432\u043d\u0438\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c, \u043d\u043e \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e. <\/p>\n
    Provide\/Inject<\/h4>\n
    \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 provide\/inject \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0441 \u0447\u0435\u043c \u0432\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 — \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0438\u043b\u0438 \u043d\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432 provider. \u0412\u0441\u0451 \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 \u043b\u0438\u0442\u0435\u0440\u0430\u043b, \u043d\u043e \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c Symbol<\/strong>, \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \/\/ App.vue <script setup> import { ref, provide } from 'vue'; import Child from '.\/Child.vue';    const msg = ref('Hello World!'); const updateMsg = (newValue) => msg.value = newValue; provide('msgKey', {   msg,   updateMsg, }); <\/script>  <template>   <h1>{{ msg }}<\/h1>   <Child \/> <\/template><\/code><\/pre>\n
    \/\/Child.vue <script setup> import ChildDeep from '.\/ChildDeep.vue'; <\/script>  <template>   <ChildDeep \/> <\/template><\/code><\/pre>\n
    \/\/ ChildDeep.vue <script setup> import { inject} from 'vue';    const { msg, updateMsg } = inject('msgKey'); <\/script>  <template>   <input :value=\"msg\" @input=\"updateMsg($event.target.value)\"> <\/template><\/code><\/pre>\n
    \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Options Api \u0432\u043e Vue 3 \u0438\/\u0438\u043b\u0438 \u043d\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043d\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c provide\/inject, \u0442\u043e \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041d\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438!<\/p>\n
    \/\/ App.vue <script> import ChildComp from '.\/ChildComp.vue';  export default {   name: \"App\",   components: {     ChildComp,   },   provide() {     return { listItems: this.items }   },    data() {     return {       items: [         { id: 1, text: \"Item 1\" },         { id: 2, text: \"Item 2\" },         { id: 3, text: \"Item 3\" },       ],     };   },   methods: {     addItem() {       this.items = [         ...this.items,         {           id: Date.now(),           text: `New item ${Date.now()}`,         },       ];     },   }, }; <\/script>  <template>   <h1>App<\/h1>   <button @click=\"addItem\">Add item<\/button>   <pre>{{ items }}<\/pre>   <hr \/>   <ChildComp \/> <\/template><\/code><\/pre>\n
    \/\/ ChildComp.vue <script setup> import { inject } from 'vue';    const items = inject('listItems'); <\/script>  <template>   <h1>Child component<\/h1>   <pre>{{ items }}<\/pre> <\/template><\/code><\/pre>\n
    \u0412\u043d\u0435\u0441\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432 App.vue \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \/\/ App.vue <script setup> import { ref, provide } from 'vue'; import ChildComp from '.\/ChildComp.vue';    const items = ref([   { id: 1, text: \"Item 1\" },   { id: 2, text: \"Item 2\" },   { id: 3, text: \"Item 3\" }, ]);  function addItem() {   items.value = [     ...items.value,     {       id: Date.now(),       text: `New item ${Date.now()}`,     },   ]; };  provide('listItems', items); <\/script>  <template>   <h1>App<\/h1>   <button @click=\"addItem\">Add item<\/button>   <pre>{{ items }}<\/pre>   <hr \/>   <ChildComp \/> <\/template><\/code><\/pre>\n
    \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Vuex\/Pinia \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u0411\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0438\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f\u0445.<\/p>\n
    \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u0435, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 1 input, \u0430, \u0441\u043a\u0430\u0436\u0435\u043c, 10 \u0438\u043b\u0438 15. \u0410 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u0438\u0445 Form.vue \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u0443\u0434\u0435\u0442 2-3? \u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u043e\u0431\u044b\u0447\u043d\u043e \u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c 1, 2 ,5 ,10 v-model \u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0443\u0436\u0430\u0441\u043d\u043e! \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0432 v-model.<\/p>\n
    \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Props\/Emits (\u043e\u0431\u044a\u0435\u043a\u0442\u044b)<\/h3>\n
    \u0427\u0430\u0441\u0442\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0441 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443<\/h4>\n
    \u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b, \u043d\u0430 \u0443\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0438\u0434\u0435\u044f \u0441 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0438 v-model. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \/\/ App.vue <script setup> import { ref } from 'vue'; import Form from '.\/Form.vue';    const arr = ref([   { id: 1, msg: 'msg' },   { id: 2, msg: 'msg' }, ]); <\/script>  <template>   <pre>{{ arr }}<\/pre>   <Form v-for=\"item of arr\" :key=\"item.id\" v-model:msgText=\"item.msg\" \/> <\/template><\/code><\/pre>\n
    \/\/ Form.vue <script setup> defineProps({   msgText: String, });  defineEmits(['update:msgText']); <\/script>  <template>   <pre>{{ arr }}<\/pre>   <input :value=\"msgText\" @input=\"$emit('update:msgText', $event.target.value)\"> <\/template><\/code><\/pre>\n
    \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u0415\u0433\u043e \u0446\u0435\u043b\u044c, \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0432 v-model \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0442\u0430\u043a \u0431\u044b \u043c\u044b \u043f\u0438\u043b\u0438\u043b\u0438 \u0441\u0443\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0438\u0434\u0438\u043c. \u041e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c v-model \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u0438\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u0447\u0442\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n
    \u041f\u0440\u044f\u043c\u043e\u0439 props \u0438 emit<\/h4>\n
    \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c v-model \u0441 Object \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u044f\u043c\u043e\u0439 props \u0438 emit (\u0441\u043c\u043e\u0442\u0440\u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440). \u041e\u0434\u043d\u0430\u043a\u043e, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432 template, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e \u043f\u043e\u043b\u0435, \u0430 \u0432 emit \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0441\u044c \u043e\u0431\u044a\u0435\u043a\u0442. \u0420\u0435\u0448\u0438\u043c \u0442\u0430\u043a\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0443\u044e \u043a\u043b\u044e\u0447 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0418\u0437\u043c\u0435\u043d\u0438\u043c App.vue:<\/p>\n
    \/\/ App.vue <script setup> import { ref } from 'vue'; import Form from '.\/Form.vue';  const obj = ref({ msg: 'Hello World!' });  const change = () => {   obj.value.msg = Math.random().toString(36).slice(2, 7); } <\/script>  <template>   <h1>App<\/h1>   <div>obj: {{ obj }}<\/div>   <div>     <button @click=\"change\">       \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c     <\/button>   <\/div>   <hr \/>   <Form v-model=\"obj\" \/> <\/template><\/code><\/pre>\n
     \u0418\u0437\u043c\u0435\u043d\u0438\u043c Form.vue:<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: Object,   } });    const emit = defineEmits(['update:modelValue']);  const change = (key, newValue) => {   emit('update:modelValue', { ...props.modelValue, [key]: newValue }); }; <\/script>  <template>   <h2>Form<\/h2>   <input    :value=\"modelValue.msg\"     @input=\"change('msg', $event.target.value)\"   > <\/template><\/code><\/pre>\n
    \u0427\u0442\u043e-\u0442\u043e \u043c\u043d\u0435 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0410\u0445 \u0434\u0430, \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c v-model \u043d\u0430 <input>! \u041c\u044b \u0443\u0436\u0435 \u0443\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 writable computed. \u0421\u0442\u043e\u0438\u0442 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c.<\/p>\n
    Writable computed<\/h4>\n
    \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434! \u041d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0443\u0432\u0438\u0434\u0435\u043d\u043d\u043e\u0435!<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0418\u0437\u043c\u0435\u043d\u0438\u043c Form.vue:<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: Object,   } });    const emit = defineEmits(['update:modelValue']);  const localComputed = computed({   get() {         return props.modelValue     },     set(newValue) {         emit('update:modelValue', newValue);     } }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localComputed.msg\"   > <\/template><\/code><\/pre>\n
     \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u2026 \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c emit()\u2026  <\/p>\n
    \/\/ Form.vue ~~~ set(newValue) {   \/\/ emit('update:modelValue', newValue); } ~~~<\/code><\/pre>\n
    \u042d\u0445, \u043e\u043d\u043e \u0438 \u0442\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u041c\u0430\u0433\u0438\u0438 \u0437\u0434\u0435\u0441\u044c \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043d\u0435\u0442. \u042d\u0442\u043e \u0441\u0442\u0430\u0440\u044b\u0439 \u0434\u043e\u0431\u0440\u044b\u0439 JavaScript \u0441 c\u0441\u044b\u043b\u043e\u0447\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 (Object). \u0422\u043e \u0435\u0441\u0442\u044c, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u0443\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e.<\/p>\n
    \u041f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c computed\u2026<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041a\u043e\u0434 \u043b\u0443\u0447\u0448\u0435, \u043d\u043e \u043f\u043b\u043e\u0445\u043e\u0439!<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: Object,   } });    const emit = defineEmits(['update:modelValue']);  const localComputed = computed({   get() {         return props.modelValue.msg     },     set(newValue) {         emit('update:modelValue', { ...props.modelValue, msg: newValue });     } }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localComputed\"   > <\/template><\/code><\/pre>\n
    \u042d\u0432\u0440\u0438\u043a\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e.<\/p>\n
    \u0425\u043e\u0442\u044f \u043a\u043e\u0434 \u0434\u0430\u043b\u0435\u043a \u043e\u0442 \u0438\u0434\u0435\u0430\u043b\u0430. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 2, 3, 5 \u0442\u0430\u043a\u0438\u0445 <input> (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e), \u0433\u0434\u0435 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435! \u041e\u043a, \u043d\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u043c computed!<\/p>\n
    \/\/ Form.vue ~~~ const localComputed = computed({   get() {         return props.modelValue.msg     },     set(newValue) {         emit('update:modelValue', { ...props.modelValue, msg: newValue });     } });  const localComputedTwo = computed({   get() {         return props.modelValue.msgTwo     },     set(newValue) {         emit('update:modelValue', { ...props.modelValue, msgTwo: newValue });     } }); ~~~<\/code><\/pre>\n
    \u0422\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c props \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u043e \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e 2 <input>, \u0430 \u0434\u043b\u044f 10 \u043d\u0430\u043f\u0438\u0448\u0435\u043c 10 computed? \u0425\u043c, \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f.<\/p>\n
    \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0440\u0435\u0448\u0435\u043d\u0438\u044e, \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 App.vue, \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 ref(), \u0430 \u043d\u0435 reactive(). \u0421\u0442\u043e\u0438\u0442 \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043f\u0440\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 writable computed.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432 App.vue:<\/p>\n
    \/\/ App.vue <script setup> import { ref, reactive } from 'vue'; import Form from '.\/Form.vue';  const obj = reactive({ msg: 'Hello World!' });  const change = () => {   obj.msg = Math.random().toString(36).slice(2, 7); } <\/script>  <template>   <h1>App<\/h1>   <div>obj: {{ obj }}<\/div>   <div>     <button @click=\"change\">       \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c     <\/button>   <\/div>   <hr \/>   <Form v-model=\"obj\" \/> <\/template><\/code><\/pre>\n
    \u0418 \u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0451 \u0441\u043b\u043e\u043c\u0430\u043b\u043e\u0441\u044c. \u0412\u043e\u0442 \u043e\u0434\u043d\u043e \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043e\u0442\u043b\u0438\u0447\u0438\u0439<\/strong> \u043c\u0435\u0436\u0434\u0443 ref<\/strong> \u0438 reactive<\/strong>. \u0425\u043e\u0442\u044f \u0438 \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 @update:model-value<\/code> \u0438 \u0447\u0435\u0440\u0435\u0437 Object.assign \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e obj. \u041c\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u043e\u0441\u0442 — \u0435\u0441\u043b\u0438 \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d Object, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0431\u0443\u0434\u0443 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u0442\u043e ref, \u0438\u043d\u0430\u0447\u0435 reactive. \u0425\u043e\u0442\u044f \u044f \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0433\u0434\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 reactive \u0438\u0437-\u0437\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0431\u044b\u0442\u044c .value. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0438\u0437\u043b\u0438\u0448\u043d\u044e\u044e \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u043c\u0435\u0441\u0442\u043e \u0431\u044b\u0442\u044c.<\/p>\n
    Watch<\/h3>\n
    \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u043d\u0435 \u0441\u0430\u043c\u043e\u043c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0441 writable computed. \u041d\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043d\u043e \u043f\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e input \u0432 \u043d\u0430\u0448\u0435\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u0435.<\/p>\n
    \u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0435\u0441\u0442\u044c \u0438 \u043e\u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435, \u0445\u043e\u0442\u044f \u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u043e\u0439 \u043f\u0443\u043b\u0435\u0439. \u041d\u043e \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u043f\u043b\u043e\u0445\u043e\u0439<\/strong> \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n
    \u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 computed \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 reactive \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 props.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e.<\/p>\n
    \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434! \u041d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0443\u0432\u0438\u0434\u0435\u043d\u043d\u043e\u0435!<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: Object,   } });    const emit = defineEmits(['update:modelValue']);  const localObj = ref(props.modelValue); \/\/ toRef(props, 'modelValue'); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localObj.msg\"   > <\/template><\/code><\/pre>\n
    \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u2026 \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0430\u0441\u044c, \u043d\u043e \u043c\u044b \u0436\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c emit()?! \u0414\u0430 \u0438 vue\/eslint \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u201c\u0440\u0443\u0433\u0430\u0442\u044c\u0441\u044f\u201d \u043d\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u044e props. \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e localObj \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u044f\u043c\u0430\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432!<\/p>\n
    \u0421 toRef\/toRefs \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a \u0436\u0435<\/em>.<\/p>\n
    \u0420\u0435\u0448\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0438\u043b\u0438 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0433\u043e — \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u043c \u0445\u0432\u0430\u0442\u0438\u0442 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0433\u043e.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: Object,   } });    const emit = defineEmits(['update:modelValue']);  const localObj = ref({ ...props.modelValue }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localObj.msg\"   > <\/template><\/code><\/pre>\n
    \u042d\u0442\u043e\u0433\u043e \u043c\u0430\u043b\u043e, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c watch \u0438 \u0432 \u043d\u0451\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c emit().<\/p>\n
    \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434! \u041d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0443\u0432\u0438\u0434\u0435\u043d\u043d\u043e\u0435!<\/p>\n
    \/\/ Form.vue ~~~ watch(localObj.value, (newValue) => {     emit('update:modelValue', newValue); }); ~~~<\/code><\/pre>\n
    \u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e \u043e\u043d \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n
    \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435, \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c? \u0425\u043e\u0440\u043e\u0448\u043e, \u044d\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043d\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f props.<\/p>\n
    \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 <input>. \u0412 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c? \u0414\u0430, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c.<\/p>\n
    \u0421\u043d\u043e\u0432\u0430 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u2026 \u0418 \u043e\u043d\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u0438 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c!<\/p>\n
    \u0422\u0430\u043a, \u0441\u0442\u043e\u043f! \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e?! \u0414\u0430 \u0432\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430\u0448 watch \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u043b \u043f\u0435\u0440\u0432\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 localObj \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b \u0435\u0433\u043e \u043d\u0430\u0432\u0435\u0440\u0445, \u0430 v-model \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u0442\u043e \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u043a\u0430\u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 — \u0441\u043a\u0440\u044b\u0442\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c.<\/p>\n
    \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u044f\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e.<\/p>\n
    \/\/ Form.vue ~~~ watch(localObj.value, (newValue) => {     emit('update:modelValue', { ...newValue}); }); ~~~<\/code><\/pre>\n
    \u041e\u0434\u043d\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 emit \u0438 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435. \u041e\u0434\u043d\u0430\u043a\u043e, \u043c\u044b \u043f\u043e\u0442\u0435\u0440\u044f\u043b\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f props. \u041d\u0435\u0442 \u043d\u0435\u0442, \u0441\u0430\u043c props \u043f\u043e \u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 emit(), \u043d\u043e \u0432\u043e\u0442 \u043c\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0432\u0438\u0434\u0438\u043c. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430, script \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0441\u043e\u0437\u0434\u0430\u0432 \u043a\u043e\u043f\u0438\u044e \u0434\u043b\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u044d\u0442\u0443 \u043a\u043e\u043f\u0438\u044e \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e localObj. \u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f props \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 localObj.<\/p>\n
    \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u043e\u0439\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435, \u0441\u0442\u043e\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 watch<\/strong>.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \/\/ Form.vue ~~~ watch(localObj.value, (newValue, oldaValue) => {   console.log(newValue === oldaValue); \/\/ true   emit('update:modelValue', { ...newValue}); }); ~~~<\/code><\/pre>\n
    \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 newValue \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u043e oldValue. \u041d\u043e, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u044b, \u0442\u043e \u043a\u0430\u043a \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 watch \u0431\u0435\u0437 \u043e\u043f\u0446\u0438\u0438 deep: true?<\/p>\n
    \u041a\u043e\u0433\u0434\u0430 \u0432 watch \u043f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e ref(), \u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u044f\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u043e\u0432\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 \u0431\u043b\u043e\u043a\u0435 template.<\/p>\n
    \u041d\u0430\u0448\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f localObj \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 proxy (\u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e reactive()). \u0415\u0441\u043b\u0438 \u0432 watch \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c localObj, \u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 proxy \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0442\u043e \u0438 watch \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n
    watch(localObj, (newValue, oldaValue) => {   \/\/ \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442   emit('update:modelValue', { ...newValue}); });<\/code><\/pre>\n
    \u041d\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c localObj.value, \u0433\u0434\u0435 \u0442\u0430\u043a \u0436\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e newValue === oldValue. \u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u0414\u0430 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 localObj.value \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 reactive \u043e\u0431\u044a\u0435\u043a\u0442 (proxy), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043b watch \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f<\/strong>!<\/p>\n
    \u042d\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e\u0436\u0435!<\/p>\n
    \/\/ ref -> reactive watch(localObj.value, (newValue, oldaValue) => {   console.log(newValue === oldaValue); \/\/ true   emit('update:modelValue', { ...newValue}); });  \/\/ ref deep watch(localObj, (newValue, oldaValue) => {   console.log(newValue === oldaValue); \/\/ true   emit('update:modelValue', { ...newValue}); }, { deep: true });  \/\/ function getter watch(() => localObj.value, (newValue, oldaValue) => {   console.log(newValue === oldaValue); \/\/ true   emit('update:modelValue', { ...newValue}); }, { deep: true });<\/code><\/pre>\n
    \u0421 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b, \u0435\u0441\u043b\u0438 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c localObj, \u0442\u043e \u0432 newValue \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n
    \u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0439\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0441\u043c\u043e\u0436\u0435\u043c \u043b\u0438 \u043c\u044b \u0435\u0451 \u0440\u0435\u0448\u0438\u0442\u044c. \u041d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0438\u0445 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 v-model \u043d\u0430 <input> \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u043d\u0430\u0448 watch \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 emit() \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u043b\u044f props. \u0412\u0435\u0434\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e\/\u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442?! \u0422\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0445 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0442\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 (\u0442\u043e\u0447\u043d\u0435\u0435 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0438\u0442, \u0430 \u0432\u043e\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f — \u043d\u0435\u0442).<\/p>\n
    \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0443\u043c — \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c watch \u0434\u043b\u044f props.modelValue. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c?!<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0422\u0430\u043a \u043a\u0430\u043a props \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c (reactive), \u043d\u043e \u0441\u0430\u043c\u0438 \u043a\u043b\u044e\u0447\u0438 \u043d\u0435\u0442, \u043d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 watch \u0444\u0443\u043d\u043a\u0446\u0438\u044e getter, \u0447\u0442\u043e\u0431\u044b watch \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/p>\n
    \/\/ Form.vue ~~~ watch(() => props.modelValue, (newValue) => {   console.log('props.modelValue', newValue); }); ~~~<\/code><\/pre>\n
    \u0418 \u0432\u043e\u0442 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043c\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438 \u0445\u043e\u0442\u0438\u043c \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e. \u0422\u0430\u043a\u0438\u043c watch \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044e \u0438 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0438\u0442\u044c callstack. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c?  <\/p>\n
    \/\/ Form.vue ~~~ watch(() => props.modelValue, (newValue) => {   localObj.value = { ...newValue }; \/\/ \u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c }); ~~~<\/code><\/pre>\n
    \u041f\u0440\u043e\u0431\u0443\u0435\u043c\u2026 \u041d\u043e \u043e\u043d\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043c\u044b \u043d\u0435 \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044e, \u0434\u0430 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437! <\/strong>\u042d\u0442\u043e \u0437\u0430\u043a\u043e\u043d\u043d\u043e? \u0414\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435. \u041f\u0435\u0440\u0432\u044b\u0439 watch \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442 \u0437\u0430 localObj.value, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0442\u0430\u043b \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u043c. \u041f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0432 \u0435\u0433\u043e, \u043c\u044b \u201c\u0441\u043b\u043e\u043c\u0430\u043b\u0438\u201d watch. \u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n
    \/\/ Form.vue ~~~ watch(localObj.value, (newValue) => {     emit('update:modelValue', { ...newValue}); });  setTimeout(() => {   localObj.value = { msg: 'changed' }; }, 5000);  watch(() => props.modelValue, (newValue) => {   \/\/ localObj.value = { ...newValue }; }); ~~~<\/code><\/pre>\n
    \u0418 \u043a\u0430\u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n
    \u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 getter<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: Object,   } });    const emit = defineEmits(['update:modelValue']);  const localObj = ref({ ...props.modelValue });  watch(() => localObj.value, (newValue) => {   emit('update:modelValue', { ...newValue}); }, { deep: true });   watch(() => props.modelValue, (newValue) => {   localObj.value = { ...newValue }; }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localObj.msg\"   > <\/template><\/code><\/pre>\n
    \u0414\u0430! \u0412\u043e\u0442 \u043e\u043d\u0430! \u0414\u043e\u043b\u0433\u043e\u0436\u0434\u0430\u043d\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430!<\/p>\n
    \n
    [Vue warn]: Maximum recursive updates exceeded in component <Repl>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.<\/p>\n<\/blockquote>\n
    \u041d\u043e \u0438 \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435. \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435, \u0442\u043e \u043c\u044b \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 <input>! \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0433\u043e props.modelValue, \u0430 \u043d\u0435 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c. \u0412\u043e\u0442 \u0442\u0430\u043a \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n
    \/\/ Form.vue ~~~ watch(() => props.modelValue, (newValue) => {   localObj.value = { ...newValue }; }, { deep: true }); ~~~<\/code><\/pre>\n
    \u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e watch \u043c\u044b \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c watchEffect, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 — \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0430\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 callstack.<\/p>\n
    \u0412\u0441\u0451 \u044d\u0442\u043e \u0431\u0435\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442 \u043d\u0430\u0448\u0435\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u201c\u043a\u043e\u0441\u0442\u044b\u043b\u044c\u043d\u043e\u201d, \u043d\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0438 \u043f\u0440\u044f\u043c\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 — \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0435\u0449\u0451 \u043e\u0434\u043d\u043e\u0433\u043e props, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c!<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \/\/ App.vue <script setup> import { ref } from 'vue'; import Form from '.\/Form.vue';  const obj = ref({ msg: 'Hello World!' }); const updated = ref(false);    const change = () => {   obj.value.msg = Math.random().toString(36).slice(2, 7);   updated.value = true; } <\/script>  <template>   <h1>App<\/h1>   <div>obj: {{ obj }}<\/div>   <div>updated: {{ updated }}<\/div>   <div>     <button @click=\"change\">       \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c     <\/button>   <\/div>   <hr \/>   <Form v-model=\"obj\" v-model:need-update=\"updated\" \/> <\/template><\/code><\/pre>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: Object,   },   needUpdate: {     type: Boolean,   } });    const emit = defineEmits(['update:modelValue', 'update:needUpdate']);  const localObj = ref({ ...props.modelValue });  watch(() => localObj.value, (newValue) => {   emit('update:modelValue', { ...newValue}); }, { deep: true });   watch(() => props.needUpdate, (newValue) => {   if (newValue) {     emit('update:needUpdate', !newValue);   localObj.value = { ...props.modelValue };   } }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localObj.msg\"   > <\/template><\/code><\/pre>\n
    \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0432\u0441\u0451 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0438\u0437\u044f\u0449\u043d\u043e \u0438 \u043f\u0440\u043e\u0441\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439! \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u044d\u0442\u043e \u0432\u0441\u0451 \u0431\u0435\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c.<\/p>\n
    Composable \u043f\u043e\u0434\u0445\u043e\u0434<\/h3>\n
    Vue 3 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043c\u043d\u043e\u0433\u043e\u0435. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0441\u043b\u043e\u0432\u0443\u0442\u044b\u0445 mixins, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043d\u043e\u0441\u044f\u0442 \u043c\u043d\u043e\u0433\u043e \u201c\u0442\u0430\u0439\u043d\u043e\u0439 \u043c\u0430\u0433\u0438\u0438\u201d \u0432 \u043d\u0430\u0448 \u043a\u043e\u0434 \u0438 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u044e\u0442 \u0435\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043b\u043e\u0433\u0438\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u043b\u043e\u043a\u0430\u0445!<\/p>\n
    \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 Composable \u0442\u044f\u043d\u0435\u0442 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c (\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/u><\/a>, VueSchool<\/u><\/a>). \u041c\u044b \u0436\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0435\u0449\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u043a-\u043d\u0438\u0431\u0443\u0434\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0437 ?.<\/p>\n
    \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0438\u0441\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0441 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u0441\u0435\u0442. \u0422\u0430\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u201c\u0432\u043d\u0435\u0448\u043d\u0438\u0445\u201d \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u0421\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u201c\u0441\u043c\u044b\u0441\u043b\u043e\u0432\u043e\u0439\u201d \u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u0434\u0435! \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0434\u043b\u044f \u043a\u043e\u043b\u043b\u0435\u0433, \u043f\u0440\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b:<\/p>\n
    \/\/ Composable.js import { ref } from 'vue';  export const obj = ref({ msg: 'Hello World!' });<\/code><\/pre>\n
     \u0418\u0437\u043c\u0435\u043d\u0438\u043c App.vue:<\/p>\n
    <script setup> import { ref } from 'vue'; import Form from '.\/Form.vue'; import { obj } from '.\/Composable.js';     const change = () => {   obj.value.msg = Math.random().toString(36).slice(2, 7); } <\/script>  <template>   <h1>App<\/h1>   <div>obj: {{ obj }}<\/div>   <div>     <button @click=\"change\">       \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c     <\/button>   <\/div>   <hr \/>   <Form \/> <\/template><\/code><\/pre>\n
     \u0418\u0437\u043c\u0435\u043d\u0438\u043c Form.vue:<\/p>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue'; import { obj } from '.\/Composable.js'; <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"obj.msg\"   > <\/template> <\/code><\/pre>\n
    \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 App.vue? \u0427\u0442\u043e \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u0438\u043c? \u0418\u043c\u043f\u043e\u0440\u0442 \u0447\u0435\u0433\u043e-\u0442\u043e, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Form.vue, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0442\u043e \u0437\u0430\u0432\u0438\u0441 \u0432 \u0432\u043e\u0437\u0434\u0443\u0445\u0435.<\/p>\n
    \u0421 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043d\u0430\u043c \u043d\u0435\u0447\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0430 \u0432\u043e\u0442 \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c \u0447\u0435\u0433\u043e-\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u201c\u043f\u043e\u043a\u043e\u043b\u0434\u043e\u0432\u0430\u0442\u044c\u201d.<\/p>\n
    \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
    \/\/ Composable.js import { ref } from 'vue';  const obj = ref({ msg: 'Hello World!' });  export const useObjData = () => {   const changeObj = () => {     obj.value.msg = Math.random().toString(36).slice(2, 7);   }      return {     obj,     changeObj,   } };<\/code><\/pre>\n
    \/\/ App.vue <script setup> import { ref } from 'vue'; import Form from '.\/Form.vue'; import { useObjData } from '.\/Composable.js';  const { obj, changeObj } = useObjData();  <\/script>  <template>   <h1>App<\/h1>   <div>obj: {{ obj }}<\/div>   <div>     <button @click=\"changeObj\">       \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c     <\/button>   <\/div>   <hr \/>   <Form \/> <\/template><\/code><\/pre>\n
    \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue'; import { useObjData } from '.\/Composable.js';  const { obj } = useObjData(); <\/script>  <template>   <h2>Form<\/h2>   <input v-model=\"obj.msg\"> <\/template><\/code><\/pre>\n
    \u0418\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u043c\u044b \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0430\u0441\u044c! \u0410 React-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0443\u0432\u0438\u0434\u044f\u0442 \u0437\u0434\u0435\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0435.<\/p>\n
    \u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438<\/h3>\n
    \u041d\u0438 \u043e\u0434\u0438\u043d \u043f\u043e\u0445\u043e\u0434 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/strong> \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u043e\u0439 \u043f\u0443\u043b\u0435\u0439! \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435 Vuex\/Pinia \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u0430\u0434\u0430\u0447\u0438. \u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443, \u0432\u044b\u043d\u043e\u0441\u044f \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 utils.js, Vuex\/Pinia \u0438\u043b\u0438 composable (use\u2026 \u0444\u0443\u043d\u043a\u0446\u0438\u0438).<\/p>\n
    \u041e\u0442\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u201c\u043a\u043e\u0432\u044b\u0440\u044f\u043b\u0441\u044f\u201d, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 Quasar<\/u><\/a> \u0438 Vuetify<\/u><\/a>.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
    <\/div>\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\/668072\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    <\/div>\n
    \n
    \n
    \n
    \n
     Vue 3 \u043f\u0440\u0438\u043d\u0451\u0441 \u0432 \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412\u0441\u0451 \u0447\u0430\u0449\u0435 \u044f \u0441\u0442\u0430\u043b \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0430 \u043f\u043e\u0440\u043e\u0439 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0446\u0435\u043b\u044b\u0439 \u0437\u043e\u043e\u043f\u0430\u0440\u043a \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043a\u0440\u0430\u0439\u043d\u043e\u0441\u0442\u0438, \u043b\u0438\u0431\u043e \u0432\u0441\u0451 \u0432 state manager, \u043b\u0438\u0431\u043e \u0432 composable (composition API), \u043b\u0438\u0431\u043e \u043c\u0443\u0442\u0430\u0446\u0438\u044f props \u0432\u043d\u0443\u0442\u0440\u0438<\/strong> \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432!<\/p>\n
    \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043d\u0430\u043c \u0432\u043e Vue 3.<\/p>\n
    <\/figcaption><\/figure>\n
    \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043e\u0440\u0438\u0438<\/h3>\n
    \u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u0442\u0432\u0435\u0440\u0434\u043e \u0443\u0431\u0435\u0436\u0434\u0451\u043d, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0438\u0436\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u043e\u0439 \u043f\u0443\u043b\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u0435\u0442 \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n
    \u0426\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f — \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0445 \u043e\u0442\u0434\u0435\u043b\u0438\u043c\u044b\u0445 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0438\u0437 \u0441\u0435\u0431\u044f \u043d\u0435\u043a\u0438\u0439 \u0447\u0435\u0440\u043d\u044b\u0439 \u044f\u0449\u0438\u043a, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 \u0432 \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u0442\u043e, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0447\u0442\u043e-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0438, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u043c \u043e \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445!<\/p>\n
    \u0421\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e:<\/p>\n
      \n
    1. \n
      props\/emits<\/p>\n<\/li>\n
    2. \n
      provide\/inject<\/p>\n<\/li>\n
    3. \n
      composable (composition API)<\/p>\n<\/li>\n
    4. \n
      state manager (Vuex\/Pinia)<\/p>\n<\/li>\n<\/ol>\n
      props\/emits<\/strong> — \u043f\u0440\u044f\u043c\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438! \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u0442\u0440\u043e\u0433\u043e\u0435 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (\u043f\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438).<\/p>\n
      \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u0435\u043d \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 (\u201cprops drilling<\/u><\/a>\u201d) \u0438 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043d\u0435\u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445.<\/p>\n
      provide\/inject<\/strong> — \u043f\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u201cprops drilling<\/u><\/a>\u201d \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n
      \u041c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043e\u0448\u0438\u0431\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\/\u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\/\u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f, \u043a\u0442\u043e \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0422\u0430\u043a \u0436\u0435 \u201c\u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u201d \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443.<\/p>\n
      composable<\/strong> — \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n
      \u0417\u0434\u0435\u0441\u044c \u0442\u0430\u043a \u0436\u0435 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u201c\u0432\u0438\u043d\u043e\u0432\u043d\u0438\u043a\u0430\u201d \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438 \u201c\u0441\u043e\u0431\u043b\u0430\u0437\u043d\u0438\u0442\u044c\u0441\u044f\u201d \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u0432 composable \u0444\u0430\u0439\u043b\u044b.<\/p>\n
      Vuex\/Pinia<\/strong> — \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d \u0441 composable. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u0443\u0436 \u0442\u043e\u0447\u043d\u043e.<\/p>\n
      \u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043b\u044e\u0431\u0430\u044f \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0441 \u0441\u043e\u0431\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c \u0438 \u043f\u043e\u043c\u043d\u0438\u0442\u044c (\u043f\u043e\u043a\u0430) \u0442\u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u043e\u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0441\u043c\u044b\u0441\u043be \u0438 \u0447\u0442\u043e-\u0442\u043e \u0433\u0434\u0435-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u043c\u0435\u043d\u044f\u044e\u0442, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u0441 \u043f\u0440\u044f\u043c\u043e\u0439 \u0441\u0432\u044f\u0437\u044c\u044e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.  <\/p>\n
      \u0422\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435, \u0432\u0441\u0435 \u044d\u0442\u043e \u043b\u0438\u0448\u044c \u043c\u043e\u0451 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0441\u043f\u043e\u0440\u0438\u043c\u043e\u0439 \u0438\u0441\u0442\u0438\u043d\u043e\u0439. \u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043d\u0435\u043e\u0441\u043f\u043e\u0440\u0438\u043c\u044b\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u043e\u0442\u0447\u0435\u0442 \u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432.  <\/p>\n
      \u0421 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u0435\u0435.<\/h3>\n
      props\/emits <\/strong>— \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c (\u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c) props \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439-\u0442\u043e props \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0442\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0421\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u043d \u043e\u0431 \u044d\u0442\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f emit(). \u0414\u0430 \u201cprops drilling<\/u><\/a>\u201d \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e.   <\/p>\n
      \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Props\/Emits<\/figcaption><\/figure>\n
      provide\/inject<\/strong> — \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n
      \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Provide\/Inject<\/figcaption><\/figure>\n
      \u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 props\/emits \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435<\/strong>! \u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0430\u044f \u0447\u0435\u0440\u0435\u0437 provide \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.  <\/p>\n
      Vuex\/Pinia<\/strong> (state managers).<\/p>\n
      \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Vuex\/Pinia<\/figcaption><\/figure>\n
      \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0441\u0451<\/strong> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 state manager — \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0432\u0441\u0451, \u0447\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0436\u0435\u043c, \u0432\u044b\u043d\u043e\u0441\u0438\u043c. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439\/\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u0449\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u201c\u0447\u0442\u043e-\u0442\u043e\u201d \u0442\u0440\u0435\u0442\u044c\u0435, \u0438\u043c\u0435\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u044d\u0442\u043e\u043c \u201c\u0447\u0451\u043c-\u0442\u043e\u201d. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e, \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u044d\u0442\u043e\u043c \u201c\u0447\u0435\u043c-\u0442\u043e\u201d, \u0430 \u0432 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043d\u0430\u0447\u043d\u0443\u0442 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e<\/strong>.<\/p>\n
      \u0414\u043b\u044f \u0441\u0435\u0431\u044f \u044f \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e, \u0447\u0442\u043e \u0432 state manager \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041e\u0442 \u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0447\u0435\u0440\u0435\u0437 Props\/Emits \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u0442\u043e\u0438\u0442.<\/p>\n
      \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Vuex\/Pinia + Props\/Emits<\/figcaption><\/figure>\n
      \u0410 \u0447\u0442\u043e \u0436\u0435 \u0441 Composable ( Composition API)<\/strong>? \u041f\u043e\u0434\u0445\u043e\u0434 \u0441 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 use\u2026 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Vuex\/Pinia.<\/p>\n
      \u041f\u0440\u0430\u0432\u0434\u0430, \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u043e \u043d\u043e. Vuex\/Pinia<\/strong> — \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Vuex\/Pinia \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c. \u0421 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 Composable \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0422\u043e \u0435\u0441\u0442\u044c, \u043a\u0430\u0436\u0434\u044b\u0439 \u043d\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0432\u0430\u0448\u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0431\u0449\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438.<\/p>\n
      \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e, \u0441\u0445\u0435\u043c\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0442\u043e\u0439, \u0447\u0442\u043e \u0432\u044b\u0448\u0435. \u0414\u0430 \u0438 \u043f\u043e\u043b\u0435\u043d\u0438\u043b\u0441\u044f \u044f \u0435\u0451 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c.<\/s><\/p>\n
      \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Props\/Emits (\u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b)  <\/h3>\n
      \u041f\u0440\u044f\u043c\u043e\u0439 props \u0438 emits<\/h4>\n
      \u0421\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 — \u044d\u0442\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 v-model. \u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043d\u0438\u043c \u0441\u0442\u0430\u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0447\u0435\u0440\u0435\u0437 v-model.<\/p>\n
      \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
      \u0412 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (App.vue) \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e. \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 Form.vue \u0447\u0435\u0440\u0435\u0437 v-model:  <\/p>\n
      \/\/ App.vue <script setup> import { ref } from 'vue'; import Form from '.\/Form.vue';  const msg = ref('Hello World!');  const change = () => {   msg.value = Math.random().toString(36).slice(2, 7); } <\/script>  <template>   <h1>App<\/h1>   <div>msg: {{ msg }}<\/div>   <div>     <button @click=\"change\">       \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c     <\/button>   <\/div>   <hr \/>   <Form v-model=\"msg\" \/> <\/template><\/code><\/pre>\n
      \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Form.vue \u0443\u043a\u0430\u0436\u0435\u043c props \u0438 emits:<\/p>\n
      \/\/ Form.vue <script setup> import { ref } from 'vue';  defineProps({   modelValue: {     type: String,   } });    defineEmits(['update:modelValue']); <\/script>  <template>   <h2>Form<\/h2>   <input    :value=\"modelValue\"     @input=\"$emit('update:modelValue', $event.target.value)\"   > <\/template><\/code><\/pre>\n
      \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451, \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c v-model \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n
      Writable computed<\/h4>\n
      \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c v-model \u043d\u0430 <input> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c writable computed<\/strong> (get\/set).<\/p>\n
      \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
      App.vue \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \u0430 \u0432\u043e\u0442 Form.vue \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c<\/p>\n
      \/\/ Form.vue <script setup> import { ref, computed } from 'vue';  const props = defineProps({   modelValue: {     type: String,   } });    const emit = defineEmits(['update:modelValue']);    const localComputed = computed({   get() {     return props.modelValue;   },   set(newValue) {     emit('update:modelValue', newValue)   } }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"localComputed\"   > <\/template><\/code><\/pre>\n
      \u041c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0431\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b. \u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (App.vue), \u0442\u043e \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (Form.vue).<\/p>\n
      \u0422\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0432 props \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e (\u0447\u0435\u0440\u0435\u0437 ref()) \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c 2 watch.<\/p>\n
      \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
      \u0414\u043e\u0431\u0430\u0432\u0438\u043c watchers \u0432 Form.vue:<\/p>\n
      \/\/ Form.vue <script setup> import { ref, computed, watch } from 'vue';  const props = defineProps({   modelValue: {     type: String,   } });    const emit = defineEmits(['update:modelValue']);    const local = ref(props.modelValue);    watch(local, (newValue) => {   emit('update:modelValue', newValue); });    watch(() => props.modelValue, (newValue) => {   local.value = newValue; }); <\/script>  <template>   <h2>Form<\/h2>   <input    v-model=\"local\"   > <\/template><\/code><\/pre>\n
      \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c, \u043d\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c. \u203c\ufe0f\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 watchers, \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0435 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044e \u0438 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 callstack? \u0415\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e watch \u0441\u0440\u0430\u0432\u043d\u0438\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c, \u043d\u043e \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e. <\/p>\n
      Provide\/Inject<\/h4>\n
      \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 provide\/inject \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0441 \u0447\u0435\u043c \u0432\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 — \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0438\u043b\u0438 \u043d\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432 provider. \u0412\u0441\u0451 \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 \u043b\u0438\u0442\u0435\u0440\u0430\u043b, \u043d\u043e \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c Symbol<\/strong>, \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b.<\/p>\n
      \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
      \/\/ App.vue <script setup> import { ref, provide } from 'vue'; import Child from '.\/Child.vue';    const msg = ref('Hello World!'); const updateMsg = (newValue) => msg.value = newValue; provide('msgKey', {   msg,   updateMsg, }); <\/script>  <template>   <h1>{{ msg }}<\/h1>   <Child \/> <\/template><\/code><\/pre>\n
      \/\/Child.vue <script setup> import ChildDeep from '.\/ChildDeep.vue'; <\/script>  <template>   <ChildDeep \/> <\/template><\/code><\/pre>\n
      \/\/ ChildDeep.vue <script setup> import { inject} from 'vue';    const { msg, updateMsg } = inject('msgKey'); <\/script>  <template>   <input :value=\"msg\" @input=\"updateMsg($event.target.value)\"> <\/template><\/code><\/pre>\n
      \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Options Api \u0432\u043e Vue 3 \u0438\/\u0438\u043b\u0438 \u043d\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043d\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c provide\/inject, \u0442\u043e \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432.<\/p>\n
      \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n
      \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041d\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438!<\/p>\n
      \/\/ App.vue <script> import ChildComp from '.\/ChildComp.vue';  export default {   name: \"App\",   components: {     ChildComp,   },   provide() {     return { listItems: this.items }   },    data() {     return {       items: [         { id: 1, text: \"Item 1\" },         { id: 2, text: \"Item 2\" },         { id: 3, text: \"Item 3\" },       ],     };   },   methods: {     addItem() {       this.items = [         ...this.items,         {           id: Date.now(),           text: `New item ${Date.now()}`,         },       ];     },   }, }; <\/script>  <template>   <h1>App<\/h1>   <button @click=\"addItem\">Add item<\/button>   <pre>{{ items }}<\/pre>   <hr \/>   <ChildComp \/> <\/template><\/code><\/pre>\n
      \/\/ ChildComp.vue <script setup> import { inject } from 'vue';    const items = inject('listItems'); <\/script>  <template>   <h1>Child component<\/h1>   <pre>{{<\/code><\/pre>\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-333696","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333696","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=333696"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333696\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}