diff --git a/src/.vuepress/public/images/lifecycle.png b/src/.vuepress/public/images/lifecycle.png deleted file mode 100644 index 36dd710759..0000000000 Binary files a/src/.vuepress/public/images/lifecycle.png and /dev/null differ diff --git a/src/.vuepress/public/images/lifecycle.svg b/src/.vuepress/public/images/lifecycle.svg new file mode 100644 index 0000000000..287e1303e5 --- /dev/null +++ b/src/.vuepress/public/images/lifecycle.svg @@ -0,0 +1,147 @@ + + + + * Template compilation is performed ahead-of-time if using a build step, e.g., with single-file components. + + + + + + beforeUnmount + + + + + + when app. unmount () is called + + + + + + beforeCreate + + + + + + + app = Vue. createApp ( options ) app. mount ( el ) + + + + + + + + + + + + + Compile template into render function * + + + + + + Compile el’s innerHTML as template * + + + + + Has “template” option? + + + YES + + + NO + + + + + + created + + + + + + + beforeMount + + + + + + + mounted + + + + + + + unmounted + + + + + + + + beforeUpdate + + + + + + updated + + + + + + Virtual DOM re-rendered and patch + + + + when data changes + + + + + + + Init events & lifecycle + + + + + + + Init injections & reactivity + + + + + + + Create app.$el and replace “el” with it + + + + + + Mounted + + + + + + Unmounted + + + + \ No newline at end of file diff --git a/src/guide/instance.md b/src/guide/instance.md index dfdda01423..9d28e131d9 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -5,7 +5,9 @@ Every Vue application starts by creating a new **application instance** with the `createApp` function: ```js -const app = Vue.createApp({ /* options */ }) +const app = Vue.createApp({ + /* options */ +}) ``` The application instance is used to register 'globals' that can then be used by components within that application. We'll discuss that in detail later in the guide but as a quick example: @@ -35,7 +37,9 @@ The options passed to `createApp` are used to configure the **root component**. An application needs to be mounted into a DOM element. For example, if we want to mount a Vue application into `
`, we should pass `#app`: ```js -const RootComponent = { /* options */ } +const RootComponent = { + /* options */ +} const app = Vue.createApp(RootComponent) const vm = app.mount('#app') ``` @@ -109,4 +113,4 @@ Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference. -Instance lifecycle hooks +Instance lifecycle hooks