??

?????? JavaScript ?????? Vue 3? ????? ?? ? ??? ? ??????? ??? ? ?? ??? ?? ??? ?????. Vue? ?? ?? ? ??? ???? ?? ?? ?? ??? ?? ??? ??? ? ??? ?? ?? ?? ?????. ??? ???? Options API? Composition API ???? ??? ? ???? ?? ?? ??? ???? ?????.

? ????? Vue 3?? ??? ? ?? ?? ?? ??? ????, Options API? Composition API??? ???? ????, ?? ??????? ???? ?? ?? ?????.

???

?? API? ???? API

Vue 3??? ?? API ?? ???? API? ???? ?? ?? ???? ??? ? ????. ?? API? ?? ?? ??? ???? ???? ??? ??, Composition API? ?? ???? ??? ?? ??? ???? ?? ??? ??????? ?????.

???? ??

??? Vue ?? ??? ?? ?? ??? ???? ????????.

??? ?

• ?? API: ???? ??
• Composition API: ???? ??

? ??? ?? ?? ????? ???? ?? ?????.

???

• ?? API: ???? ??
• Composition API: ???? ??

? ??? ?? ?? ????? ??? ? ?????.

beforeMount

• ?? API: beforeMount
• ???? API: onBeforeMount

? ??? ????? DOM? ????? ??? ?????.

?:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

??

• ?? API: ????
• ???? API: onMounted

? ??? ????? DOM? ???? ? ?????.

?:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

???? ?

• ?? API: beforeUpdate
• ???? API: onBeforeUpdate

? ??? ?? ?? ???? ?? ?????.

?:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

?????

• ?? API: ?????
• ???? API: onUpdated

? ??? ?? ?? ???? ?? ?????.

?:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

??? ?? ?

• ?? API: beforeUnmount
• ???? API: onBeforeUnmount

? ??? ????? ??? ???? ??? ?????.

?:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

? ?? ??

• ?? API: ??? ???
• ???? API: onUnmounted

? ??? ????? ??? ??? ?? ?????.

?:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

??? ???????.

• ?? API: ?? ???
• ???? API: onErrorCaptured

? ??? ?? ?? ???? ??? ??? ? ?????.

?:

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
}
</script>

<script setup>
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('Component has been updated');
});
</script>

??? ???

• ?? API: renderTracked
• ???? API: onRenderTracked

? ??? ??? ?? ??? ???? ??? ? ?????.

?:

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
}
</script>

<script setup>
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

??? ????

• ?? API: renderTriggered
• ???? API: onRenderTriggered

? ??? ??? ???? ???? ???? ? ?????.

?:

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
}
</script>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component has been unmounted');
});
</script>

??

Vue 3? ?? ?? ??? ???? ???? ?? ?? ?? ?? ??? ??? ??? ???? ? ?????. Options API? ???? Composition API? ???? Vue 3? ?? ??? ??? ????? ???? ??? ??? ?? ???? ?? ??? ?????. ??? ?? ?? ??? ??? ?? ????? ?? ??? ?? Vue ??????? ?? ? ????.

??? ?????! ?

??? ?? ???? ???? ??????!

? ???? ??? ???? ???? ??? ???.

---

? ??? Vue 3? ???? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!