{"id":338949,"date":"2022-09-28T03:00:10","date_gmt":"2022-09-28T03:00:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=338949"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=338949","title":{"rendered":"<span>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u0432 Vue JS<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 Vue JS \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0433\u043e\u0434\u043e\u043c. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>Options API<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Composition API<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Class API<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Class API + <\/strong><a href=\"https:\/\/www.npmjs.com\/package\/vue-property-decorator\" rel=\"noopener noreferrer nofollow\"><strong>vue-property-decorator<\/strong><\/a><strong> (npm)<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c:<\/p>\n<ul>\n<li>\n<p><strong>Vue 2 + <\/strong><a href=\"https:\/\/www.npmjs.com\/package\/@vue\/composition-api\" rel=\"noopener noreferrer nofollow\"><strong>@vue\/composition-api<\/strong><\/a><strong> (npm)<\/strong>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u043e \u0432\u044b\u0445\u043e\u0434\u0430 Vue 2.7<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u043d\u0430\u0441 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c.<br \/>\u0425\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0433\u043e\u043b\u043e\u0432\u0435 \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e. \u0410 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043b\u0438\u0441\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 &#8212; \u0434\u043e\u043b\u0433\u043e.<br \/>\u042f \u0443\u0436\u0435 \u043c\u043e\u043b\u0447\u0443 \u043f\u0440\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0439.<br \/>\u041b\u0438\u0447\u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043f\u043e \u0432\u0441\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u0442\u044c \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439 \u043d\u0443\u0436\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b. <\/p>\n<p>\u0412 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043d\u043e\u0432\u0438\u0447\u043a\u0438 \u0432 Vue \u0441\u043c\u043e\u0433\u0443\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e \u0434\u0443\u0448\u0435 \u0438 \u043b\u0443\u0447\u0448\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f:<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/ru.vuejs.org\/v2\/guide\/\" rel=\"noopener noreferrer nofollow\">Vue 2. \u041d\u0435 \u043f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/v2.vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Vue 2. \u041f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/v3.ru.vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Vue 3. \u041d\u0435 \u043f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Vue 3. \u041f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/class-component.vuejs.org\/api\/\" rel=\"noopener noreferrer nofollow\">Vue 2 &#8212; 3. \u041f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/vue-property-decorator\" rel=\"noopener noreferrer nofollow\">NPM \u043f\u0430\u043a\u0435\u0442 vue-property-decorator. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u044f <a href=\"https:\/\/v3.ru.vuejs.org\/ru\/api\/sfc-script-setup.html\" rel=\"noopener noreferrer nofollow\">script setup<\/a>.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;!-- ... --> &lt;\/template>  &lt;script> export default {   name: \"ParentComponent\", }; &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>  &lt;!-- ... --> &lt;\/template>  &lt;script> export default {   \/\/ ... } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>  &lt;!-- ... --> &lt;\/template>  &lt;script setup> \/\/ ... &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({}) export default class ParentComponent extends Vue {   \/\/ ... } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API.<\/p>\n<h2>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script> import ChildComponent from \"@\/components\/ChildComponent.vue\";  export default {   name: \"ParentComponent\",   components: {     ChildComponent,   }, }; &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script setup> import ChildComponent \"@\/components\/ChildComponent.vue\"  \/\/ ...  &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script> import ChildComponent from \"@\/components\/ChildComponent.vue\";  export default {   components: {     ChildComponent,   }, }; &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\"; import ChildComponent from \"@\/components\/ChildComponent.vue\";  @Options({   components: {     ChildComponent,   }, }) export default class ParentComponent extends Vue {} &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   data() {     return {       someObject: {}     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> import { ref } from 'vue'  export default {   setup() {     const someObject = ref({})          return {       someObject     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> import { ref } from 'vue'  const someObject = ref({}) &lt;\/script><\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script> import { Options, Vue } from \"vue-class-component\"; import ChildComponent from \"@\/components\/ChildComponent.vue\";  @Options({}) export default class ParentComponent extends Vue {   message = \"Hello World!\"; } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   data() {     return {       firstName: 'John',       lastName: 'Doe'     }   },   computed: {     fullName: {       get() {         return this.firstName + ' ' + this.lastName       },       set(newValue) {         [this.firstName, this.lastName] = newValue.split(' ')       }     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> import { reactive, computed } from 'vue'  export default {   setup() {     const author = reactive({       name: 'John Doe',       books: [         'Vue 2 - Advanced Guide',         'Vue 3 - Basic Guide',         'Vue 4 - The Mystery'       ]     })          const publishedBooksMessage = computed(() => {       return author.books.length > 0 ? 'Yes' : 'No'     })          return {       publishedBooksMessage     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script setup> import { ref, computed } from 'vue'  export default {   setup() {     const firstName = ref('John')     const lastName = ref('Doe')      const fullName = computed({       get() {         return firstName.value + ' ' + lastName.value       },       set(newValue) {         [firstName.value, lastName.value] = newValue.split(' ')       }     })          return {       fullName     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> import { reactive, computed } from 'vue'  const author = reactive({   name: 'John Doe',   books: [     'Vue 2 - Advanced Guide',     'Vue 3 - Basic Guide',     'Vue 4 - The Mystery'   ] })  const publishedBooksMessage = computed(() => {   return author.books.length > 0 ? 'Yes' : 'No' }) &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script setup> import { ref, computed } from 'vue'  const firstName = ref('John') const lastName = ref('Doe')  const fullName = computed({   get() {     return firstName.value + ' ' + lastName.value   },   set(newValue) {     [firstName.value, lastName.value] = newValue.split(' ')   } }) &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({}) export default class ParentComponent extends Vue {   firstName = \"John\";   lastName = \"Doe\";    get name() {     return this.firstName + \" \" + this.lastName;   }    set name(value) {     const splitted = value.split(\" \");     this.firstName = splitted[0];     this.lastName = splitted[1] || \"\";   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0437\u043e\u0432 emit<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;button @click=\"$emit('enlarge-text', 0.1)\">     Enlarge text   &lt;\/button> &lt;\/template>  &lt;script> export default {   methods: {     myFunction(data) {       this.$emit('emitName', data)     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: ['submit']   setup() {     const myFunction = (data) => {       $emit('submit', data)     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: {     submit(payload) {       \/\/ ...     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: {     \/\/ No validation     click: null,      \/\/ Validate submit event     submit: ({ email, password }) => {       if (email &amp;&amp; password) {         return true       } else {         console.warn('Invalid submit event payload!')         return false       }     }   },   methods: {     submitForm(email, password) {       this.$emit('submit', { email, password })     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;template>   &lt;input       :value=\"modelValue\"       @input=\"$emit('update:modelValue', $event.target.value)\"   \/> &lt;\/template>  &lt;script> export default {   props: ['modelValue'],   emits: ['update:modelValue'] } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: ['inFocus', 'submit'],   setup(props, ctx) {     ctx.emit('submit')   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> const emit = defineEmits(['inFocus', 'submit'])  function buttonClick() {   emit('submit') } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script setup> const emit = defineEmits({   submit(payload) {     \/\/ return `true` or `false` to indicate     \/\/ validation pass \/ fail   } }) &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;template>   &lt;input       :value=\"modelValue\"       @input=\"$emit('update:modelValue', $event.target.value)\"   \/> &lt;\/template>  &lt;script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;template>   &lt;input v-model=\"value\" \/> &lt;\/template>  &lt;script setup> import { computed } from 'vue'  const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue'])  const value = computed({   get() {     return props.modelValue   },   set(value) {     emit('update:modelValue', value)   } }) &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({   emits: [\"submit\"], }) export default class ChildComponent extends Vue {   onClick() {     this.$emit(\"submit\");   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Vue, Component, Emit } from 'vue-property-decorator'  @Component export default class YourComponent extends Vue {   count = 0    @Emit()   addToCount(n: number) {     this.count += n   }    @Emit('reset')   resetCount() {     this.count = 0   }    @Emit()   returnValue() {     return 10   }    @Emit()   onInputChange(e) {     return e.target.value   }    @Emit()   promise() {     return new Promise((resolve) => {       setTimeout(() => {         resolve(20)       }, 0)     })   } } &lt;\/script> <\/code><\/pre>\n<p>\u041a\u043e\u0434 \u0432\u044b\u0448\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d:<\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   data() {     return {       count: 0,     }   },   methods: {     addToCount(n) {       this.count += n       this.$emit('add-to-count', n)     },     resetCount() {       this.count = 0       this.$emit('reset')     },     returnValue() {       this.$emit('return-value', 10)     },     onInputChange(e) {       this.$emit('on-input-change', e.target.value, e)     },     promise() {       const promise = new Promise((resolve) => {         setTimeout(() => {           resolve(20)         }, 0)       })        promise.then((value) => {         this.$emit('promise', value)       })     },   }, } &lt;\/script> <\/code><\/pre>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 lifecycle hooks<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   mounted() {     \/\/ ...   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> import { onMounted } from 'vue'  export default {   onMounted() {     \/\/ ...   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> import { onMounted } from 'vue'  const el = ref()  onMounted(() => {   el.value \/\/ &lt;div> }) &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({}) export default class ChildComponent extends Vue {   mounted() {     console.log(\"mounted\");   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   data() {     return {       someObject: {         one: \"one\",         two: \"two\",       },     };   },   methods: {     funcOne() {       console.log(this.someObject.one);     },   }, } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   import { ref } from 'vue'      setup() {     const someObject = ref({ one: \"one\", two: \"two\" })      const funcOne = () => {       console.log(someObject.value.one)     }          return {       someObject,       funcOne     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> import { ref } from 'vue'  const someObject = ref({ one: \"one\", two: \"two\" })  const funcOne = () => {   console.log(someObject.value.one) } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\"; import ChildComponent from \"@\/components\/ChildComponent.vue\";  @Options({   components: {     ChildComponent,   }, }) export default class ParentComponent extends Vue {   someObject = { one: \"one\", two: \"two\" };    funcOne() {     console.log(this.someObject.one);   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 props \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/h2>\n<h3>Vue Options API<\/h3>\n<p><strong>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 props \u0431\u0435\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   props: ['foo'], } &lt;\/script> <\/code><\/pre>\n<p><strong>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f props:<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   props: {     propA: Number,     propB: [String, Number],     propC: {       type: String,       required: true     },     propD: {       type: Number,       default: 100     },     propE: {       type: Object,       default(rawProps) {         return { message: 'hello' }       }     },     propF: {       validator(value) {         return ['success', 'warning', 'danger'].includes(value)       }     },     propG: {       type: Function,       default() {         return 'Default function'       }     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<p><strong>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 props \u0431\u0435\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/strong><\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c <code>props<\/code> \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432\u044b\u0432\u043e\u0434\u0430 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<br \/> <code>defineProps<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432\u043d\u0443\u0442\u0440\u0438 <code>&lt;script setup><\/code><\/p>\n<pre><code class=\"javascript\">&lt;script setup> const props = defineProps(['foo']) &lt;\/script> <\/code><\/pre>\n<p><strong>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f props:<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script setup> const props = defineProps({   propA: Number,   propB: [String, Number],   propC: {     type: String,     required: true   },   propD: {     type: Number,     default: 100   },   propE: {     type: Object,     default(rawProps) {       return { message: 'hello' }     }   },   propF: {     validator(value) {       return ['success', 'warning', 'danger'].includes(value)     }   },   propG: {     type: Function,     default() {       return 'Default function'     }   } }) &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<p><strong>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 props \u0431\u0435\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   props: ['foo'] } &lt;\/script> <\/code><\/pre>\n<p><strong>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f props:<\/strong> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443 Vue Options API.<\/p>\n<h3>Vue Class API<\/h3>\n<p><strong>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 props \u0431\u0435\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({   props: {     msg: String,   }, }) export default class ChildComponent extends Vue {   msg!: string; } &lt;\/script> <\/code><\/pre>\n<p><strong>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f props:<\/strong> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430\u043c<\/p>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Vue, Component, Prop } from 'vue-property-decorator'  @Component export default class YourComponent extends Vue {   @Prop(Number) readonly propA: number | undefined   @Prop({ default: 'default value' }) readonly propB!: string   @Prop([String, Boolean]) readonly propC: string | boolean | undefined } &lt;\/script> <\/code><\/pre>\n<p><strong>\u041a\u043e\u0434 \u0432\u044b\u0448\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d:<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   props: {     propA: {       type: Number,     },     propB: {       default: 'default value',     },     propC: {       type: [String, Boolean],     },   }, } &lt;\/script> <\/code><\/pre>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 watch \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/h2>\n<h3>Vue Options API<\/h3>\n<p><strong>\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   watch: {     someObject(newValue, oldValue) {       \/\/ ...     }   } } &lt;\/script> <\/code><\/pre>\n<p><strong>\u0413\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0441\u043b\u0435\u0436\u0435\u043d\u0438\u0435<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   watch: {     someObject: {       handler(newValue, oldValue) {         \/\/ ...       },       deep: true     }   } } &lt;\/script> <\/code><\/pre>\n<p><strong>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   watch: {     question: {       handler(newValue, oldValue) {         \/\/ ...       },       immediate: true     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<p><strong>\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script setup> import { watch } from 'vue'  watch(someObject, async (newValue, oldValue) => {   \/\/ ... }) &lt;\/script> <\/code><\/pre>\n<p><strong>\u0413\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0441\u043b\u0435\u0436\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 <code>watch()<\/code> \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043e\u043d \u043d\u0435\u044f\u0432\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0439 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u2014 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432<br \/> \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043c\u0443\u0442\u0430\u0446\u0438\u0439:<\/p>\n<p>\u042d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c \u043e\u0442 \u0433\u0435\u0442\u0442\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432<br \/> \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0433\u0435\u0442\u0442\u0435\u0440 \u0432\u0435\u0440\u043d\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<pre><code class=\"javascript\">&lt;script setup> import { watch } from 'vue'  watch(     () => state.someObject,     () => {       \/\/ ...     } ) &lt;\/script> <\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0432 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0439 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c, \u044f\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>deep<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440:<\/p>\n<pre><code class=\"javascript\">&lt;script setup> import { watch } from 'vue'  watch(     () => state.someObject,     (newValue, oldValue) => {       \/\/ ...     },     { deep: true } ) &lt;\/script> <\/code><\/pre>\n<h3>Vue 2.7 \/ 3. Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> export default {   watch: {     someObject(newValue, oldValue) {       \/\/ ...     },   },   setup() {     \/\/ ...   } }; &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\"; import ChildComponent from \"@\/components\/ChildComponent.vue\";  @Options({   watch: {     someString(newValue) {       console.log(newValue);     },   }, }) export default class ParentComponent extends Vue {   someString = \"old\";    mounted() {     this.someString = \"new\";   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<pre><code class=\"javascript\">&lt;script> import { Vue, Component, Watch } from 'vue-property-decorator'  @Component export default class YourComponent extends Vue {   @Watch('child')   onChildChanged(val: string, oldVal: string) {}    @Watch('person', { immediate: true, deep: true })   onPersonChanged1(val: Person, oldVal: Person) {}    @Watch('person')   onPersonChanged2(val: Person, oldVal: Person) {} } &lt;\/script> <\/code><\/pre>\n<p><strong>\u041a\u043e\u0434 \u0432\u044b\u0448\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d:<\/strong><\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   watch: {     child: [       {         handler: 'onChildChanged',         immediate: false,         deep: false,       },     ],     person: [       {         handler: 'onPersonChanged1',         immediate: true,         deep: true,       },       {         handler: 'onPersonChanged2',         immediate: false,         deep: false,       },     ],   },   methods: {     onChildChanged(val, oldVal) {},     onPersonChanged1(val, oldVal) {},     onPersonChanged2(val, oldVal) {},   }, } &lt;\/script> <\/code><\/pre>\n<h2>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 Vuex<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> import { mapGetters, mapState } from \"vuex\";  export default {   computed: {     ...mapGetters([\"userId\"]),     ...mapState({       pageTitle: (state) => state.pageTitle.toUpperCase(),     })   },   methods: {     getUserId() {       return this.$store.state.userId     },     deleteUser(id) {       this.$store.commit(\"deleteUser\", id);     },   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> import { mapGetters, mapState, useStore } from \"vuex\";  export default {   computed: {     ...mapGetters([\"userId\"]),     ...mapState({       pageTitle: (state) => state.pageTitle.toUpperCase(),     })   },   setup() {     const store = useStore()          const deleteUser = (id) => {       store.commit(\"deleteUser\", id);     }      const getUserId = () => {       return store.state.userId     }      const deleteUser = (id) => {       store.commit('deleteUser', id)     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> const store = useStore()  const deleteUser = (id) => {   store.commit(\"deleteUser\", id); }  const getUserId = () => {   return store.state.userId }  const deleteUser = (id) => {   store.commit('deleteUser', id) }  const userId = computed(() => {   return store.getters.userId })  const count = computed(() => store.getters.count) &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<p>Vuex \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 this.$store \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<br \/> \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441 TypeScript \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f.<br \/> <a href=\"https:\/\/vuex.vuejs.org\/guide\/typescript-support.html\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438<\/a>.<\/p>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e Vue Class API.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/690508\/\"> https:\/\/habr.com\/ru\/post\/690508\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 Vue JS \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0433\u043e\u0434\u043e\u043c. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>Options API<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Composition API<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Class API<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Class API + <\/strong><a href=\"https:\/\/www.npmjs.com\/package\/vue-property-decorator\" rel=\"noopener noreferrer nofollow\"><strong>vue-property-decorator<\/strong><\/a><strong> (npm)<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c:<\/p>\n<ul>\n<li>\n<p><strong>Vue 2 + <\/strong><a href=\"https:\/\/www.npmjs.com\/package\/@vue\/composition-api\" rel=\"noopener noreferrer nofollow\"><strong>@vue\/composition-api<\/strong><\/a><strong> (npm)<\/strong>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u043e \u0432\u044b\u0445\u043e\u0434\u0430 Vue 2.7<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u043d\u0430\u0441 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c.<br \/>\u0425\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0433\u043e\u043b\u043e\u0432\u0435 \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e. \u0410 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043b\u0438\u0441\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 &#8212; \u0434\u043e\u043b\u0433\u043e.<br \/>\u042f \u0443\u0436\u0435 \u043c\u043e\u043b\u0447\u0443 \u043f\u0440\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0439.<br \/>\u041b\u0438\u0447\u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043f\u043e \u0432\u0441\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u0442\u044c \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439 \u043d\u0443\u0436\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b. <\/p>\n<p>\u0412 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043d\u043e\u0432\u0438\u0447\u043a\u0438 \u0432 Vue \u0441\u043c\u043e\u0433\u0443\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e \u0434\u0443\u0448\u0435 \u0438 \u043b\u0443\u0447\u0448\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f:<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/ru.vuejs.org\/v2\/guide\/\" rel=\"noopener noreferrer nofollow\">Vue 2. \u041d\u0435 \u043f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/v2.vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Vue 2. \u041f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/v3.ru.vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Vue 3. \u041d\u0435 \u043f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/vuejs.org\/\" rel=\"noopener noreferrer nofollow\">Vue 3. \u041f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/class-component.vuejs.org\/api\/\" rel=\"noopener noreferrer nofollow\">Vue 2 &#8212; 3. \u041f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/vue-property-decorator\" rel=\"noopener noreferrer nofollow\">NPM \u043f\u0430\u043a\u0435\u0442 vue-property-decorator. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u044f <a href=\"https:\/\/v3.ru.vuejs.org\/ru\/api\/sfc-script-setup.html\" rel=\"noopener noreferrer nofollow\">script setup<\/a>.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;!-- ... --> &lt;\/template>  &lt;script> export default {   name: \"ParentComponent\", }; &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>  &lt;!-- ... --> &lt;\/template>  &lt;script> export default {   \/\/ ... } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>  &lt;!-- ... --> &lt;\/template>  &lt;script setup> \/\/ ... &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({}) export default class ParentComponent extends Vue {   \/\/ ... } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API.<\/p>\n<h2>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script> import ChildComponent from \"@\/components\/ChildComponent.vue\";  export default {   name: \"ParentComponent\",   components: {     ChildComponent,   }, }; &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script setup> import ChildComponent \"@\/components\/ChildComponent.vue\"  \/\/ ...  &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script> import ChildComponent from \"@\/components\/ChildComponent.vue\";  export default {   components: {     ChildComponent,   }, }; &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;child-component \/> &lt;\/template>  &lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\"; import ChildComponent from \"@\/components\/ChildComponent.vue\";  @Options({   components: {     ChildComponent,   }, }) export default class ParentComponent extends Vue {} &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   data() {     return {       someObject: {}     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> import { ref } from 'vue'  export default {   setup() {     const someObject = ref({})          return {       someObject     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> import { ref } from 'vue'  const someObject = ref({}) &lt;\/script><\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script> import { Options, Vue } from \"vue-class-component\"; import ChildComponent from \"@\/components\/ChildComponent.vue\";  @Options({}) export default class ParentComponent extends Vue {   message = \"Hello World!\"; } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   data() {     return {       firstName: 'John',       lastName: 'Doe'     }   },   computed: {     fullName: {       get() {         return this.firstName + ' ' + this.lastName       },       set(newValue) {         [this.firstName, this.lastName] = newValue.split(' ')       }     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> import { reactive, computed } from 'vue'  export default {   setup() {     const author = reactive({       name: 'John Doe',       books: [         'Vue 2 - Advanced Guide',         'Vue 3 - Basic Guide',         'Vue 4 - The Mystery'       ]     })          const publishedBooksMessage = computed(() => {       return author.books.length > 0 ? 'Yes' : 'No'     })          return {       publishedBooksMessage     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script setup> import { ref, computed } from 'vue'  export default {   setup() {     const firstName = ref('John')     const lastName = ref('Doe')      const fullName = computed({       get() {         return firstName.value + ' ' + lastName.value       },       set(newValue) {         [firstName.value, lastName.value] = newValue.split(' ')       }     })          return {       fullName     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> import { reactive, computed } from 'vue'  const author = reactive({   name: 'John Doe',   books: [     'Vue 2 - Advanced Guide',     'Vue 3 - Basic Guide',     'Vue 4 - The Mystery'   ] })  const publishedBooksMessage = computed(() => {   return author.books.length > 0 ? 'Yes' : 'No' }) &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script setup> import { ref, computed } from 'vue'  const firstName = ref('John') const lastName = ref('Doe')  const fullName = computed({   get() {     return firstName.value + ' ' + lastName.value   },   set(newValue) {     [firstName.value, lastName.value] = newValue.split(' ')   } }) &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({}) export default class ParentComponent extends Vue {   firstName = \"John\";   lastName = \"Doe\";    get name() {     return this.firstName + \" \" + this.lastName;   }    set name(value) {     const splitted = value.split(\" \");     this.firstName = splitted[0];     this.lastName = splitted[1] || \"\";   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Vue Class API<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0437\u043e\u0432 emit<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;template>   &lt;button @click=\"$emit('enlarge-text', 0.1)\">     Enlarge text   &lt;\/button> &lt;\/template>  &lt;script> export default {   methods: {     myFunction(data) {       this.$emit('emitName', data)     }   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: ['submit']   setup() {     const myFunction = (data) => {       $emit('submit', data)     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: {     submit(payload) {       \/\/ ...     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: {     \/\/ No validation     click: null,      \/\/ Validate submit event     submit: ({ email, password }) => {       if (email &amp;&amp; password) {         return true       } else {         console.warn('Invalid submit event payload!')         return false       }     }   },   methods: {     submitForm(email, password) {       this.$emit('submit', { email, password })     }   } } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;template>   &lt;input       :value=\"modelValue\"       @input=\"$emit('update:modelValue', $event.target.value)\"   \/> &lt;\/template>  &lt;script> export default {   props: ['modelValue'],   emits: ['update:modelValue'] } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script> export default {   emits: ['inFocus', 'submit'],   setup(props, ctx) {     ctx.emit('submit')   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> const emit = defineEmits(['inFocus', 'submit'])  function buttonClick() {   emit('submit') } &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;script setup> const emit = defineEmits({   submit(payload) {     \/\/ return `true` or `false` to indicate     \/\/ validation pass \/ fail   } }) &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;template>   &lt;input       :value=\"modelValue\"       @input=\"$emit('update:modelValue', $event.target.value)\"   \/> &lt;\/template>  &lt;script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) &lt;\/script> <\/code><\/pre>\n<pre><code class=\"javascript\">&lt;template>   &lt;input v-model=\"value\" \/> &lt;\/template>  &lt;script setup> import { computed } from 'vue'  const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue'])  const value = computed({   get() {     return props.modelValue   },   set(value) {     emit('update:modelValue', value)   } }) &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({   emits: [\"submit\"], }) export default class ChildComponent extends Vue {   onClick() {     this.$emit(\"submit\");   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API + vue-property-decorator<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Vue, Component, Emit } from 'vue-property-decorator'  @Component export default class YourComponent extends Vue {   count = 0    @Emit()   addToCount(n: number) {     this.count += n   }    @Emit('reset')   resetCount() {     this.count = 0   }    @Emit()   returnValue() {     return 10   }    @Emit()   onInputChange(e) {     return e.target.value   }    @Emit()   promise() {     return new Promise((resolve) => {       setTimeout(() => {         resolve(20)       }, 0)     })   } } &lt;\/script> <\/code><\/pre>\n<p>\u041a\u043e\u0434 \u0432\u044b\u0448\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d:<\/p>\n<pre><code class=\"javascript\">&lt;script> export default {   data() {     return {       count: 0,     }   },   methods: {     addToCount(n) {       this.count += n       this.$emit('add-to-count', n)     },     resetCount() {       this.count = 0       this.$emit('reset')     },     returnValue() {       this.$emit('return-value', 10)     },     onInputChange(e) {       this.$emit('on-input-change', e.target.value, e)     },     promise() {       const promise = new Promise((resolve) => {         setTimeout(() => {           resolve(20)         }, 0)       })        promise.then((value) => {         this.$emit('promise', value)       })     },   }, } &lt;\/script> <\/code><\/pre>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 lifecycle hooks<\/h2>\n<h3>Vue Options API<\/h3>\n<pre><code class=\"javascript\">&lt;script> export default {   mounted() {     \/\/ ...   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script> import { onMounted } from 'vue'  export default {   onMounted() {     \/\/ ...   } } &lt;\/script> <\/code><\/pre>\n<h3>Vue Composition API <\/h3>\n<pre><code class=\"javascript\">&lt;script setup> import { onMounted } from 'vue'  const el = ref()  onMounted(() => {   el.value \/\/ &lt;div> }) &lt;\/script> <\/code><\/pre>\n<h3>Vue Class API<\/h3>\n<pre><code class=\"javascript\">&lt;script lang=\"ts\"> import { Options, Vue } from \"vue-class-component\";  @Options({}) export default class ChildComponent extends Vue {   mounted() {   <\/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-338949","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/338949","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=338949"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/338949\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=338949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=338949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=338949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}