{"id":340113,"date":"2022-10-23T15:00:09","date_gmt":"2022-10-23T15:00:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=340113"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=340113","title":{"rendered":"\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u0441 vue-class-component \u043d\u0430 vuejs\/composition-api<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 vue \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 vue-composition-api<\/code>.<\/p>\n

\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u043d\u0430\u0448\u0435\u043c \u0441\u0442\u0435\u043a\u0435.
\u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 nuxt2<\/code> + vue-class-components<\/code> + typescript<\/code>. \u0418\u0437-\u0437\u0430 \u0441\u0442\u0435\u043a\u0430 \u043f\u0435\u0440\u0435\u0435\u0437\u0434 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 nuxt \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u043b\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e nuxt \u0441\u043e 2 \u043d\u0430 3 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0443\u0442 \u043d\u0430\u0441 \u043e\u0447\u0435\u043d\u044c \u0441\u043f\u0430\u0441\u043b\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 vuejs\/composition-api<\/code> \u0438 nuxtjs-composition-api<\/code><\/p>\n

\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0438 \u043e\u0442 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u043e \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445.<\/p>\n

\u0421\u0442\u043e\u0438\u0442 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 composition-api<\/code> \u0432\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 setup<\/code> , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f 2 \u0445\u0443\u043a\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 vue \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: beforeCreate<\/code> \u0438 created
<\/code>\u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u0442\u0435\u0445 \u0438\u043b\u0438 \u0438\u043d\u044b\u0445 \u043a\u0435\u0439\u0441\u0430\u0445. <\/p>\n

* \u0412\u0441\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u044b \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u0435)<\/p>\n

\u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/em><\/p>\n

    \n
  1. \n

    State \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430
    * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 localValue<\/code> \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0447\u0430\u0441\u0442\u044c component state<\/p>\n

    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0441\u0442\u0435\u0439\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n

    @Component({}) export default class ExampleClass extends Vue {  localValue: string = null }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0443 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0412 \u0431\u0430\u0437\u0435 \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 vuejs\/composition-api<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u044f\u0434 \u0441\u0432\u043e\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 nuxt. <\/p>\n
    import {   ref,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const localValue = ref(null)      return {       localValue     }   } })<\/code><\/pre>\n
    \u0438\u0437 setup \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0442\u0435\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u043b\u0438 \u0432 template<\/code> \u0438\u043b\u0438 \u043a \u043d\u0438\u043c \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n
  2. \n
    \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f state
    * <\/strong>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 objectvalue
    <\/code>
    <\/strong>\u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0441\u0442\u0435\u0439\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n
    interface IStateObject {   name: string,   value: number }  @Component({}) export default class ExampleClass extends Vue {  objectvalue: IStateObject = {    name: 'example',    value: 2  } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code><\/p>\n
    import {   ref,   defineComponent } from '@nuxtjs\/composition-api'  interface IStateObject {   name: string,   value: number }  export default defineComponent({   name: 'ExampleClass',      setup() {     const objectvalue = ref<IStateObject>({        name: 'example',        value: 2      })      return {       objectvalue     }   } })<\/code><\/pre>\n
    \u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <\/p>\n
    { name: 'example', value: 2 }<\/code><\/p>\n<\/p>\n<\/li>\n
  3. \n
    \u041f\u0440\u043e\u043f\u0441\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430
    * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 exampleProps
    <\/code>
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u043f\u0440\u043e\u043f\u0441\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435 @Component<\/a>. <\/p>\n
    @Component({   props: {     exampleProps: {       type: Number,       default: 1     }   } }) export default class ExampleClass extends Vue {   readonly exampleProps: number     localValue: string = nul }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u043f\u0440\u043e\u043f\u0441\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0432\u043e vue2. \u0427\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0440\u043e\u043f\u0441\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 setup<\/code> \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432 \u0441\u0442\u0435\u0439\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 toRefs<\/code><\/p>\n
    import {   ref,   toRefs,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     exampleProps: {       type: Number,       default: 1     }   },      setup(props) {     const { exampleProps } = toRefs(props)          const localValue = ref(null)      return {       localValue     }   } })<\/code><\/pre>\n
    \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b \u0438\u0437 setup<\/code> \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u041e\u043d\u0438 \u0438 \u0442\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 template.<\/p>\n<\/li>\n
  4. \n
    \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u043e\u0432
    * <\/strong>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 objectProps
    <\/code>
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/code> \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043f\u0440\u043e\u0438\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n
    interface IObjectProps {   name: string,   value: number }  @Component({   props: {     objectProps: {       type: Object,       required: true     }   } }) export default class ExampleClass extends Vue {   readonly objectProps: IObjectProps }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u043f\u0440\u043e\u043f\u0441\u044b \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e PropType<\/code><\/p>\n<\/p>\n<\/li>\n
  5. \n
    Computed properties \u0438\u043b\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430
    * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 isExamplePropsEqualsTwo<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c<\/p>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a get<\/code> \u043c\u0435\u0442\u043e\u0434<\/p>\n
    @Component({   props: {     exampleProps: {       type: Number,       default: 1     }   } }) export default class ExampleClass extends Vue {   readonly exampleProps: number    get isExamplePropsEqualsTwo () {     return this.exampleProps === 2   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 computed<\/code><\/p>\n
    import {   toRefs,   computed,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     exampleProps: {       type: Number,       default: 1     }   },      setup(props) {     const { exampleProps } = toRefs(props)      const isExamplePropsEqualsTwo = computed(() => {       return exampleProps.value === 2     })      return {       isExamplePropsEqualsTwo     }   } })<\/code><\/pre>\n
    \u0418\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b ref<\/code> , \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 value
    <\/code><\/p>\n<\/li>\n
  6. \n
    \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f computed properties
    <\/strong>\u0412 \u0446\u0435\u043b\u043e\u043c \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0443\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f, \u043d\u043e \u0431\u044b\u0432\u0430\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0438 \u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u044f\u0432\u043d\u043e.<\/p>\n
    * <\/strong>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e isExamplePropsEqualsTwo<\/code> <\/p>\n
    \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code><\/p>\n
    @Component({   props: {     exampleProps: {       type: Number,       default: 1     }   } }) export default class ExampleClass extends Vue {   readonly exampleProps: number    get isExamplePropsEqualsTwo (): number {     return this.exampleProps === 2   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code><\/p>\n
    import {   toRefs,   computed,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     exampleProps: {       type: Number,       default: 1     }   },      setup(props) {     const { exampleProps } = toRefs(props)      const isExamplePropsEqualsTwo = computed<number>(() => {       return exampleProps.value === 2     })      return {       isExamplePropsEqualsTwo     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
  7. \n
    \u0421\u0435\u0442\u0442\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430
    * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 innerValue<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c<\/p>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0441\u0435\u0442\u0442\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c set<\/code> <\/p>\n
    @Component({   props: {     value: {       type: String,       default: null     }   } }) export default class ExampleClass extends Vue {   readonly value: string    get innerValue (): string {     return value   }    set innerValue (value: number) {     this.$emit('input', value)   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code><\/p>\n
    import {   toRefs,   computed,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     value: {       type: String,       default: null     }   },      setup(props, { emit }) {     const { value } = toRefs(props)      const innerValue = computed({       get: () => value.value,       set: (value) => emit('input', value)     })      return {       innerValue     }   } })<\/code><\/pre>\n
    \u041f\u0440\u043e emit<\/code> \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u0443\u043c\u0430\u0435\u043c. \u0415\u0433\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0441\u0442\u0430\u0442\u044c\u0435<\/p>\n<\/li>\n
  8. \n
    \u041c\u0435\u0442\u043e\u0434\u044b
    <\/strong>\u0422\u0443\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e. <\/p>\n
    * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 sayHello<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c.<\/p>\n
    \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code> — \u043c\u0435\u0442\u043e\u0434\u044b \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   sayHello () {     console.log(\"hello world\")   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code><\/p>\n
    import {   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const sayHello = () => {       console.log(\"hello world\")     }      return {       sayHello     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
  9. \n
    \u0425\u0443\u043a\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430
    <\/strong>\u0412 composition-api<\/code> \u0441\u043f\u0438\u0441\u043e\u043a \u0445\u0443\u043a\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0441\u044f. \u0425\u0443\u043a\u043e\u0432 beforeCreated<\/code> \u0438 created<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u0442, \u043e\u043d\u0438 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 setup<\/p>\n
    * \u0425\u0443\u043a created<\/code><\/p>\n
    \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code><\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   created () {     console.log(\"created\")   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code><\/p>\n
    import {   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     console.log(\"created\")   } })<\/code><\/pre>\n
    * mounted\/onMounted<\/p>\n
    \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code><\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   mounted () {     console.log(\"mounted\")   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code><\/p>\n
    import {   onMounted,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     onMounted(() => {       console.log(\"mounted\")     })   } })<\/code><\/pre>\n
    \u0422\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u0434\u043e\u043f\u043e\u043c\u0438\u043d\u0430\u0435 \u043a\u0430\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u043e\u0433\u043e \u0433\u0434\u0435 \u0436\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u0412\u043e vue \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u043e Suspense<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 — \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 async setup<\/code> 
    \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u0441\u0435\u0439\u0447\u0430\u0441. \u041f\u0440\u043e\u0441\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a>. <\/p>\n<\/li>\n
  10. \n
    \u041e\u0442\u043f\u0438\u0441\u043a\u0430 \u043e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 window
    <\/strong>\u0420\u0435\u0448\u0438\u043b\u0430 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0445\u0443\u043a  beforeDestroy,<\/code> \u0430 \u0432 \u043d\u043e\u0432\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u043e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0438\u043d\u0430\u0447\u0435.<\/p>\n
     \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code> — \u043d\u0430 \u043c\u043e\u0432\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u0447\u0435\u043d\u044c \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f this.$on<\/code><\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   isVisible = false      mounted () {     const timeoutId = setTimeout(() => {         this.isVisible = true       }, 300)        this.$on('hook:beforeDestroy', () => {         clearTimeout(timeoutId)       })   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code><\/p>\n
    import {   ref,   onMounted,   onBeforeUnmount,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null)      onMounted(() => {       timeoutId.value = setTimeout(() => {         this.isVisible = true       }, 300)     })      onBeforeUnmount(() => {       clearTimeout(timeoutId.value)     })   } })<\/code><\/pre>\n
    \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u0442\u0430\u043a\u043e\u0435 \u0438\u0437\u044f\u0449\u043d\u043e\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043e\u0431\u0449\u0443\u044e \u043a\u0443\u0447\u0443.<\/p>\n<\/p>\n<\/li>\n
  11. \n
    Watch
    <\/strong>* \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <\/strong>localValue<\/code><\/p>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code>  watch<\/code> \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430 @Component<\/code><\/p>\n
    @Component({   watch: {     localValue (value: string) {       console.log('localValue was updated', value)     }   } }) export default class ExampleClass extends Vue {  localValue: string = null }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> —  \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 watch<\/code>. \u041f\u0440\u0438\u0447\u0435\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 watch<\/code>.<\/p>\n
    import {   ref,   watch,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const localValue = ref(null)      watch(localValue, (value: string) => {       console.log('localValue was updated', value)     })      return {       localValue     }   } })<\/code><\/pre>\n
    watch<\/code> \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c 3\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a deep<\/code>, immediate<\/code><\/p>\n<\/p>\n<\/li>\n
  12. \n
    Emit \u0441\u043e\u0431\u044b\u0442\u0438\u0439
    * <\/strong>\u042d\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u043c <\/strong>\u0441\u043e\u0431\u044b\u0442\u0438\u0435 <\/strong>input
    <\/code>
    <\/strong>\u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> $emit \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   notifyOthers () {     this.$emit('input', 'new Value')   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — emit<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0432 setup<\/p>\n
    import {   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup(_props, { emit }) {     const notifyOthers = () => {       emit('input', 'new Value')     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
  13. \n
    \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442
    <\/strong>* \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 store<\/code><\/p>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0432\u0441\u0435 \u0447\u0442\u043e \u043b\u0435\u0436\u0438\u0442 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u043c\u0443 \u0441\u043b\u043e\u0432\u0443 this<\/code><\/p>\n
    @Component({}) export default class ExampleClass extends Vue {  get somethingFromStore () {    return this.$store.state.app.value  } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 useContext<\/code><\/p>\n
    import {   computed,   useContext,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const { store } = useContext()          const somethingFromStore = computed(() => {       return store.state.app.value     })      return {       somethingFromStore     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
  14. \n
    Ref  — \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\/\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442
    <\/strong>*  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 input<\/code> \u0438 childComponent<\/code><\/p>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e $refs<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f <\/p>\n
    @Component({}) export default class ExampleClass extends Vue {  $refs: {    input: HTMLInputElement,    childComponent: SomeComponent  }    emptyInput () {     this.$refs.input.value = null   }    callSomeChildMethod () {     this.$refs.childComponent.exampleMethod()   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 ref<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0427\u0442\u043e\u0431\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0432\u044f\u0437\u0430\u043b\u043e\u0441\u044c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0435\u0435 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0437 setup<\/code><\/p>\n
    import {   ref,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const input = ref<HTMLInputElement>(null)     const childComponent = ref(null)        const emptyInput = () => {       input.value.value = null     }        const callSomeChildMethod = () => {       childComponent.value.exampleMethod()     }      return {       input,       childComponent     }   } })<\/code><\/pre>\n
    \u0422\u0443\u0442 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f input.value.value<\/code> \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0438\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 ref<\/code><\/p>\n<\/p>\n<\/li>\n
  15. \n
    \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f ref \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432
    <\/strong>* \u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e childComponent<\/strong> \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 14<\/p>\n
    \u0414\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/code> \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0435\u0441\u043b\u0438 childComponent<\/code> \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0436\u0435 childComponent<\/code> \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u0442\u043e \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0438\u0437 setup<\/code> \u0443 childComponent<\/code> <\/p>\n
    * \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f childComponent<\/code> \u043b\u0443\u0447\u0448\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 childComponent<\/code><\/p>\n
    ExampleClass<\/strong><\/p>\n
    import { ISomeChildComponent } from '.\/SomeComponent.vue'  @Component({}) export default class ExampleClass extends Vue {  $refs: {    childComponent: ISomeChildComponent  }    callSomeChildMethod () {     this.$refs.childComponent.exampleMethod()   } }<\/code><\/pre>\n
    SomeChildComponent<\/strong><\/p>\n
    import {   ref,   defineComponent } from '@nuxtjs\/composition-api'  \/\/ \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0441\u044f \u043e\u0442 Element \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f, \/\/ \u0447\u0442\u043e ref \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 Element   export interface ISomeChildComponent extends Element {   someLocalValue: string,    someLocalMethod: () => void }  export default defineComponent({   name: 'SomeChildComponent',      setup() {     const someLocalValue = ref(null)        const someLocalMethod = () => {       console.log(\"hello\")     }      return {       someLocalValue,       someLocalMethod     }   } })<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u0442\u0443\u0442 \u0442\u0430\u043a\u0430\u044f \u0436\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c, \u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u043c. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d, \u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<\/p>\n<\/li>\n
  16. \n
    \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044e \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f<\/strong><\/p>\n
    \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 this.$el<\/code><\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   findChildElements () {     \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 span \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430     console.log(this.$el.querySelector('span'))   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> —  \u0422\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 ref<\/code><\/p>\n
    import {   ref,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const root = ref(null)        const findChildElements = () => {       \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 span \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430       console.log(root.value.querySelector('span'))     }      return {       \/\/ \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c root       root,       findChildElements     }   } })  <template>   <div ref=\"root\">     <span> 1 <\/span>     <span> 2 <\/span>     <span> 3 <\/span>   <\/div> <\/template><\/code><\/pre>\n
    \u0412 \u043f\u0443\u043d\u043a\u0442\u0435 17 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 currentInstance<\/code> \u0438 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0442\u043e\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0431\u043b\u043e\u043a\u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n
  17. \n
    CurrentInstance — \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong><\/p>\n
    \u0414\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/code> \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u043c\u0443 \u0441\u043b\u043e\u0432\u0443 this<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u043b\u0435\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0434\u043b\u044f composition-api<\/code> \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 this<\/code>.<\/p>\n
    nuxtjs\/composition-api<\/code> — \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 getCurrentInstance<\/code> <\/p>\n
    import {   defineComponent,   getCurrentInstance } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const instance = getCurrentInstance()        const findChildElements = () => {       \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 span \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430       console.log(instance.proxy.$el.querySelector('span'))     }      return {       findChildElements     }   } })<\/code><\/pre>\n
    \u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f instance \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u0433\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0442\u0430\u043a\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043a\u0430\u043a \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 $vnode<\/code> <\/p>\n<\/li>\n
  18. \n
    \u0417\u0430\u0434\u0430\u0447\u043a\u0430: \u041d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0434<\/strong><\/p>\n
    \u041a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0430 \u044d\u0442\u0443 \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0448\u0435\u0432\u0435\u043b\u0438\u0442\u044c \u043c\u043e\u0437\u0433\u0430\u043c\u0438 \u0438 \u043f\u043e\u0440\u044b\u0442\u044c \u0434\u043e\u043a\u0438. 
    \u0422\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b, \u0447\u0442\u043e\u0431\u044b \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043f\u0430\u043f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u043f\u0430 \u043a\u0430\u0440\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0436\u0435 \u043a\u0430\u0440\u0442\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0430 \u0435\u0433\u043e \u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0435\u0439 \u043c\u0435\u0441\u0442\u043e.<\/p>\n
    \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code><\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   createComponentFromCode (el) {     \/\/ \u0432 el \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0431\u043b\u043e\u043a, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442     const examplePopup = new ExamplePoopup({ parent: this }).$mount(el)   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u0442\u0443\u0442 \u043c\u044b \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0435\u043c \u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0445\u0430\u043a\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u044b vue + getCurrentInstance<\/code><\/p>\n
    import {   defineComponent,   getCurrentInstance } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const instance = getCurrentInstance()        const createComponentFromCode = (el) => {       \/\/ \u0432 el \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0431\u043b\u043e\u043a, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442        const Popup = Vue.extend(ExamplePoopup)        const examplePopup = new ExamplePoopup({ parent: instance.proxy }).$mount(el)     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
  19. \n
    Inject\/Provide
    <\/strong>* \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0438\u043d\u0434\u0436\u0435\u043a\u0442\u0438\u0442\u044c\u0441\u044f \u043e\u0431\u0445\u0435\u043a\u0442 exampleInject<\/code><\/p>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> provide\/inject \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435 @Component<\/code><\/p>\n
    ExampleProvideClass<\/strong><\/p>\n
    @Component({   provide () {     return {       exampleInject: this.exampleInject     }   } }) export default class ExampleProvideClass extends Vue {   exampleInject = {     name: 'example',     value: 'inject'   } }<\/code><\/pre>\n
    ExampleInjectClass<\/strong><\/p>\n
    @Component({   inject: ['exampleInject'] }) export default class ExampleInjectClass extends Vue {   \/\/ \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441   exampleInject: { name: string, value: string } }<\/code><\/pre>\n<\/p>\n
    nuxtjs\/composition-api<\/code> — \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b provide\/inject<\/code><\/p>\n
    ExampleProvideClass<\/strong><\/p>\n
    import {   ref,   provide,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleProvideClass',      setup() {     const exampleInject = ref({       name: 'example',       value: 'inject'     })           provide('exampleInject', exampleInject.value)    } })<\/code><\/pre>\n
    ExampleInjectClass<\/strong><\/p>\n
    import {   inject,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleInjectClass',      setup() {     \/\/ \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e      \/\/ \u0414\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441      const exampleInject = inject<{ name: string, value: string }>('exampleInject', null)    } })<\/code><\/pre>\n<\/p>\n<\/li>\n
  20. \n
    \u0427\u0442\u043e-\u0442\u043e \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f
    <\/strong>* \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 exampleFeature<\/code> \u0431\u0443\u0434\u0435\u0442 \u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n
    \u041c\u044b \u043d\u0435 \u0432\u0441\u0435 \u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043d\u0434\u0436\u0435\u043a\u0442\u0438\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. <\/p>\n
    exampleFeature<\/strong><\/p>\n
    import { Plugin } from '@nuxt\/types'  const plugin: Plugin = (_, inject) => {   const feature = {     someMethod: () => { console.log(\"Very cool feature\")}   }    inject('exampleFeature', feature) }<\/code><\/pre>\n
    \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u043d\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432. \u0412\u0441\u0435 \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0432\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u043c\u0443 \u0441\u043b\u043e\u0432\u0443 this<\/code> <\/p>\n
    @Component({}) export default class ExampleClass extends Vue {   getSomethingFromApp () {     console.log(this.$exampleFeature.someMethod())   } }<\/code><\/pre>\n
    nuxtjs\/composition-api<\/code> — \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e app<\/code> \u0438\u0437 useContext<\/code><\/p>\n
    import {   useContext,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const { app } = useContext()     \/\/ \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043d\u0430\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 app     const { $exampleFeature } = app       const getSomethingFromApp = () => {       console.log($exampleFeature.someMethod())     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
  21. \n
    \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0435\u0433\u043e-\u0442\u043e \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n
    \u0427\u0442\u043e\u0431\u044b \u043e\u043f\u043e\u0432\u0435\u0441\u0442\u0438\u0442\u044c typescript<\/code> \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 app \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043d\u043e\u0432\u0430\u044f \u0444\u0438\u0447\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0447\u0435\u0440\u0435\u0437 declare<\/code> \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0438\u0447\u0438 \u0434\u043b\u044f NuxtAppOptions<\/code><\/p>\n
    import { Plugin } from '@nuxt\/types'  const plugin: Plugin = (_, inject) => {   const feature = {     someMethod: () => { console.log(\"Very cool feature\")}   }    inject('exampleFeature', feature) }  declare module '@nuxt\/types' {   interface NuxtAppOptions {     \/\/ *** \u0442\u0443\u0442 \u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0444\u0438\u0447\u0438     $exampleFeature: { someMethod: () => void }   } } <\/code><\/pre>\n<\/li>\n<\/ol>\n
    \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044e \u0434\u043e\u043a\u043e\u043d\u0446\u0430. \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u043e\u043d\u0430 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0437\u0430\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 vue \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441.<\/p>\n
    \u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043d\u0430\u043c\u0438 \u0432\u043e\u0432\u0440\u0435\u043c\u044f \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445)<\/p>\n
    \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438:
    Vue — https:\/\/vuejs.org\/<\/a>
    vuejs\/composition-api —     https:\/\/github.com\/vuejs\/composition-api<\/a>
    nuxtjs\/compiosition-api —     https:\/\/github.com\/nuxt-community\/composition-api<\/a><\/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\/694960\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    <\/div>\n
    \n
    \n
    \n
    \n
    \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 vue \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 vue-composition-api<\/code>.<\/p>\n
    \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u043d\u0430\u0448\u0435\u043c \u0441\u0442\u0435\u043a\u0435. 
    \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 nuxt2<\/code> + vue-class-components<\/code> + typescript<\/code>. \u0418\u0437-\u0437\u0430 \u0441\u0442\u0435\u043a\u0430 \u043f\u0435\u0440\u0435\u0435\u0437\u0434 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 nuxt \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u043b\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e nuxt \u0441\u043e 2 \u043d\u0430 3 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0443\u0442 \u043d\u0430\u0441 \u043e\u0447\u0435\u043d\u044c \u0441\u043f\u0430\u0441\u043b\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 vuejs\/composition-api<\/code> \u0438 nuxtjs-composition-api<\/code><\/p>\n
    \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0438 \u043e\u0442 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u043e \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445.<\/p>\n
    \u0421\u0442\u043e\u0438\u0442 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 composition-api<\/code> \u0432\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 setup<\/code> , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f 2 \u0445\u0443\u043a\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 vue \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: beforeCreate<\/code> \u0438 created
    <\/code>\u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u0442\u0435\u0445 \u0438\u043b\u0438 \u0438\u043d\u044b\u0445 \u043a\u0435\u0439\u0441\u0430\u0445. <\/p>\n
    * \u0412\u0441\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u044b \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u0435)<\/p>\n
    \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/em><\/p>\n
      \n
    1. \n
      State \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430
      * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 localValue<\/code> \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0447\u0430\u0441\u0442\u044c component state<\/p>\n
      \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0441\u0442\u0435\u0439\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n
      @Component({}) export default class ExampleClass extends Vue {  localValue: string = null }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code> — \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0443 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0412 \u0431\u0430\u0437\u0435 \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 vuejs\/composition-api<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u044f\u0434 \u0441\u0432\u043e\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 nuxt. <\/p>\n
      import {   ref,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const localValue = ref(null)      return {       localValue     }   } })<\/code><\/pre>\n
      \u0438\u0437 setup \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0442\u0435\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u043b\u0438 \u0432 template<\/code> \u0438\u043b\u0438 \u043a \u043d\u0438\u043c \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n
    2. \n
      \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f state
      * <\/strong>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 objectvalue
      <\/code>
      <\/strong>\u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0441\u0442\u0435\u0439\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n
      interface IStateObject {   name: string,   value: number }  @Component({}) export default class ExampleClass extends Vue {  objectvalue: IStateObject = {    name: 'example',    value: 2  } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code><\/p>\n
      import {   ref,   defineComponent } from '@nuxtjs\/composition-api'  interface IStateObject {   name: string,   value: number }  export default defineComponent({   name: 'ExampleClass',      setup() {     const objectvalue = ref<IStateObject>({        name: 'example',        value: 2      })      return {       objectvalue     }   } })<\/code><\/pre>\n
      \u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <\/p>\n
      { name: 'example', value: 2 }<\/code><\/p>\n<\/p>\n<\/li>\n
    3. \n
      \u041f\u0440\u043e\u043f\u0441\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430
      * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 exampleProps
      <\/code>
      \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u043f\u0440\u043e\u043f\u0441\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435 @Component<\/a>. <\/p>\n
      @Component({   props: {     exampleProps: {       type: Number,       default: 1     }   } }) export default class ExampleClass extends Vue {   readonly exampleProps: number     localValue: string = nul }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code> — \u043f\u0440\u043e\u043f\u0441\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0432\u043e vue2. \u0427\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0440\u043e\u043f\u0441\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 setup<\/code> \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432 \u0441\u0442\u0435\u0439\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 toRefs<\/code><\/p>\n
      import {   ref,   toRefs,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     exampleProps: {       type: Number,       default: 1     }   },      setup(props) {     const { exampleProps } = toRefs(props)          const localValue = ref(null)      return {       localValue     }   } })<\/code><\/pre>\n
      \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b \u0438\u0437 setup<\/code> \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u041e\u043d\u0438 \u0438 \u0442\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 template.<\/p>\n<\/li>\n
    4. \n
      \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u043e\u0432
      * <\/strong>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 objectProps
      <\/code>
      \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/code> \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043f\u0440\u043e\u0438\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n
      interface IObjectProps {   name: string,   value: number }  @Component({   props: {     objectProps: {       type: Object,       required: true     }   } }) export default class ExampleClass extends Vue {   readonly objectProps: IObjectProps }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code> — \u043f\u0440\u043e\u043f\u0441\u044b \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e PropType<\/code><\/p>\n<\/p>\n<\/li>\n
    5. \n
      Computed properties \u0438\u043b\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430
      * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 isExamplePropsEqualsTwo<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c<\/p>\n
      \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a get<\/code> \u043c\u0435\u0442\u043e\u0434<\/p>\n
      @Component({   props: {     exampleProps: {       type: Number,       default: 1     }   } }) export default class ExampleClass extends Vue {   readonly exampleProps: number    get isExamplePropsEqualsTwo () {     return this.exampleProps === 2   } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code> — \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 computed<\/code><\/p>\n
      import {   toRefs,   computed,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     exampleProps: {       type: Number,       default: 1     }   },      setup(props) {     const { exampleProps } = toRefs(props)      const isExamplePropsEqualsTwo = computed(() => {       return exampleProps.value === 2     })      return {       isExamplePropsEqualsTwo     }   } })<\/code><\/pre>\n
      \u0418\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b ref<\/code> , \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 value
      <\/code><\/p>\n<\/li>\n
    6. \n
      \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f computed properties
      <\/strong>\u0412 \u0446\u0435\u043b\u043e\u043c \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u0443\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f, \u043d\u043e \u0431\u044b\u0432\u0430\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0438 \u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u044f\u0432\u043d\u043e.<\/p>\n
      * <\/strong>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e isExamplePropsEqualsTwo<\/code> <\/p>\n
      \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code><\/p>\n
      @Component({   props: {     exampleProps: {       type: Number,       default: 1     }   } }) export default class ExampleClass extends Vue {   readonly exampleProps: number    get isExamplePropsEqualsTwo (): number {     return this.exampleProps === 2   } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code><\/p>\n
      import {   toRefs,   computed,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     exampleProps: {       type: Number,       default: 1     }   },      setup(props) {     const { exampleProps } = toRefs(props)      const isExamplePropsEqualsTwo = computed<number>(() => {       return exampleProps.value === 2     })      return {       isExamplePropsEqualsTwo     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
    7. \n
      \u0421\u0435\u0442\u0442\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430
      * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 innerValue<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c<\/p>\n
      \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code> \u0441\u0435\u0442\u0442\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c set<\/code> <\/p>\n
      @Component({   props: {     value: {       type: String,       default: null     }   } }) export default class ExampleClass extends Vue {   readonly value: string    get innerValue (): string {     return value   }    set innerValue (value: number) {     this.$emit('input', value)   } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code><\/p>\n
      import {   toRefs,   computed,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',    props: {     value: {       type: String,       default: null     }   },      setup(props, { emit }) {     const { value } = toRefs(props)      const innerValue = computed({       get: () => value.value,       set: (value) => emit('input', value)     })      return {       innerValue     }   } })<\/code><\/pre>\n
      \u041f\u0440\u043e emit<\/code> \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u0443\u043c\u0430\u0435\u043c. \u0415\u0433\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0441\u0442\u0430\u0442\u044c\u0435<\/p>\n<\/li>\n
    8. \n
      \u041c\u0435\u0442\u043e\u0434\u044b
      <\/strong>\u0422\u0443\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e. <\/p>\n
      * <\/strong>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 sayHello<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c.<\/p>\n
      \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code> — \u043c\u0435\u0442\u043e\u0434\u044b \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n
      @Component({}) export default class ExampleClass extends Vue {   sayHello () {     console.log(\"hello world\")   } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code><\/p>\n
      import {   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const sayHello = () => {       console.log(\"hello world\")     }      return {       sayHello     }   } })<\/code><\/pre>\n<\/p>\n<\/li>\n
    9. \n
      \u0425\u0443\u043a\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430
      <\/strong>\u0412 composition-api<\/code> \u0441\u043f\u0438\u0441\u043e\u043a \u0445\u0443\u043a\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0441\u044f. \u0425\u0443\u043a\u043e\u0432 beforeCreated<\/code> \u0438 created<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u0442, \u043e\u043d\u0438 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 setup<\/p>\n
      * \u0425\u0443\u043a created<\/code><\/p>\n
      \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code><\/p>\n
      @Component({}) export default class ExampleClass extends Vue {   created () {     console.log(\"created\")   } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code><\/p>\n
      import {   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     console.log(\"created\")   } })<\/code><\/pre>\n
      * mounted\/onMounted<\/p>\n
      \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code><\/p>\n
      @Component({}) export default class ExampleClass extends Vue {   mounted () {     console.log(\"mounted\")   } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code><\/p>\n
      import {   onMounted,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     onMounted(() => {       console.log(\"mounted\")     })   } })<\/code><\/pre>\n
      \u0422\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u0434\u043e\u043f\u043e\u043c\u0438\u043d\u0430\u0435 \u043a\u0430\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u043e\u0433\u043e \u0433\u0434\u0435 \u0436\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u0412\u043e vue \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u043e Suspense<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 — \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 async setup<\/code> 
      \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u0441\u0435\u0439\u0447\u0430\u0441. \u041f\u0440\u043e\u0441\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a>. <\/p>\n<\/li>\n
    10. \n
      \u041e\u0442\u043f\u0438\u0441\u043a\u0430 \u043e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 window
      <\/strong>\u0420\u0435\u0448\u0438\u043b\u0430 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0445\u0443\u043a  beforeDestroy,<\/code> \u0430 \u0432 \u043d\u043e\u0432\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u043e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0438\u043d\u0430\u0447\u0435.<\/p>\n
       \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/code> — \u043d\u0430 \u043c\u043e\u0432\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u0447\u0435\u043d\u044c \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f this.$on<\/code><\/p>\n
      @Component({}) export default class ExampleClass extends Vue {   isVisible = false      mounted () {     const timeoutId = setTimeout(() => {         this.isVisible = true       }, 300)        this.$on('hook:beforeDestroy', () => {         clearTimeout(timeoutId)       })   } }<\/code><\/pre>\n
      nuxtjs\/composition-api<\/code><\/p>\n
      import {   ref,   onMounted,   onBeforeUnmount,   defineComponent } from '@nuxtjs\/composition-api'  export default defineComponent({   name: 'ExampleClass',      setup() {     const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null)      onMounted(() => {       timeoutId.value = setTimeout(() => {         this.isVisible = true       }, 300)     })      onBeforeUnmount(() => {       clearTimeout(timeoutId.value)     })   } })<\/code><\/pre>\n
      \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u0442\u0430\u043a\u043e\u0435 \u0438\u0437\u044f\u0449\u043d\u043e\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043e\u0431\u0449\u0443\u044e \u043a\u0443\u0447\u0443.<\/p>\n<\/p>\n<\/li>\n
    11. \n
      Watch
      <\/strong>* \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <\/strong>localValue<\/code><\/p>\n
      \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/code>  watch<\/code> \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430 @Component<\/code><\/p>\n
      @Component({   watch: {     localValue (value: string) {       console.log('localValue was updated', value)     }   } }) export default class ExampleClass extends Vue {  localValue: string = null }<\/code><\/pre>\n
      nuxtjs\/composition-<\/code><\/p>\n<\/li>\n<\/ol>\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-340113","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/340113","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=340113"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/340113\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=340113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=340113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=340113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}