Merge branch 'master' of github.com:vuejs/docs-next

Author: NataliaTepluhina

src/.vuepress/config.js

@@ -234,6 +234,7 @@ module.exports = {
     repo: 'vuejs/docs-next',
     editLinks: false,
     editLinkText: 'Edit this on GitHub!',
+    lastUpdated: 'Last updated',
     docsDir: 'src',
     sidebarDepth: 2,
     sidebar: {

src/api/global-api.md

@@ -156,11 +156,9 @@ import { createApp, defineAsyncComponent } from 'vue'
 createApp({
   // ...
   components: {
-    components: {
-      AsyncComponent: defineAsyncComponent(() =>
-        import('./components/AsyncComponent.vue')
-      )
-    }
+    AsyncComponent: defineAsyncComponent(() =>
+      import('./components/AsyncComponent.vue')
+    )
   }
 })
 ```

src/examples/dynamic-components/index.html

@@ -26,7 +26,19 @@
     </div>
   </body>
   <script>
-    const app = Vue.createApp()
+    const app = Vue.createApp({
+      data() {
+        return {
+          currentTab: 'Home',
+          tabs: ['Home', 'Posts', 'Archive']
+        }
+      },
+      computed: {
+        currentTabComponent() {
+          return 'tab-' + this.currentTab.toLowerCase()
+        }
+      }
+    })
 
     app.component('tab-home', {
       template: `<div>Home component</div>`
@@ -38,21 +50,6 @@
       template: `<div>Archive component</div>`
     })
 
-    app.mount(
-      {
-        data() {
-          return {
-            currentTab: 'Home',
-            tabs: ['Home', 'Posts', 'Archive']
-          }
-        },
-        computed: {
-          currentTabComponent() {
-            return 'tab-' + this.currentTab.toLowerCase()
-          }
-        }
-      },
-      '#dynamic-component-demo'
-    )
+    app.mount('#dynamic-component-demo')
   </script>
 </html>

src/guide/migration/functional-components.md

@@ -77,7 +77,7 @@ const DynamicHeading = (props, context) => {
 
 DynamicHeading.props = ['level']
 
-export default GreetingMessage
+export default DynamicHeading
 ```
 
 ### Single File Components (SFCs)

src/guide/migration/global-api.md

@@ -122,28 +122,20 @@ app.use(VueRouter)
 
 ## Mounting App Instance
 
-After being initialized with `createApp()`, the app instance `app` can be used to mount a Vue root instance with `app.mount(VueInstance, domTarget)`:
+After being initialized with `createApp(VueInstance)`, the app instance `app` can be used to mount a Vue root instance with `app.mount(domTarget)`:
 
 ```js
 import { createApp } from 'vue'
 import MyApp from './MyApp.vue'
 
-const app = createApp()
-app.mount(MyApp, ‘#app’)
-```
-
-The `mount` method can also accept props to be passed to the root component via a third argument:
-
-```js
-app.mount(MyApp, '#app', {
-  // props to be passed to root component
-})
+const app = createApp(MyApp)
+app.mount('#app')
 ```
 
 With all these changes, the component and directive we have at the beginning of the guide will be rewritten into something like this:
 
 ```js
-const app = createApp()
+const app = createApp(MyApp)
 
 app.component('button-counter', {
   data: () => ({
@@ -159,7 +151,7 @@ app.directive('focus', {
 // now every Vue instance mounted with app.mount(), along with its
 // component tree, will have the same “button-counter” component
 // and “focus” directive without polluting the global environment
-app.mount(MyApp, '#app')
+app.mount('#app')
 ```
 
 ## Provide / Inject
@@ -192,15 +184,15 @@ import { createApp } from 'vue'
 import Foo from './Foo.vue'
 import Bar from './Bar.vue'
 
-const createMyApp = () => {
-  const app = createApp({})
+const createMyApp = (VueInstance) => {
+  const app = createApp(VueInstance)
   app.directive('focus' /* ... */)
 
   return app
 }
 
-createMyApp().mount(Foo, '#foo')
-createMyApp().mount(Bar, '#bar')
+createMyApp(Foo).mount('#foo')
+createMyApp(Bar).mount('#bar')
 ```
 
 Now the `focus` directive will be available in both Foo and Bar instances and their descendants.

src/guide/migration/render-function-api.md

@@ -116,9 +116,9 @@ In 3.x, the entire VNode props structure is flattened. Using the example from ab
 {
   class: ['button', 'is-outlined'],
   style: { color: '#34495E' },
-  attrs: { id: 'submit' },
+  id: 'submit',
   innerHTML: '',
-  on: { click: submitForm },
+  onClick: submitForm,
   key: 'submit-button'
 }
 ```

src/guide/reactivity-fundamentals.md

@@ -23,7 +23,7 @@ You can learn more about `reactive` in the [Basic Reactivity API's](../api/basic
 
 ## Creating Standalone Reactive Values as `refs`
 
-Imagine the case where we have a standalone primitive value (for example, a string) and we want to make it reactive. Of course, we could make am object with a single property equal to our string, and pass it to `reactive`. Vue has a method that will do the same for us - it's a `ref`:
+Imagine the case where we have a standalone primitive value (for example, a string) and we want to make it reactive. Of course, we could make an object with a single property equal to our string, and pass it to `reactive`. Vue has a method that will do the same for us - it's a `ref`:
 
 ```js
 import { ref } from 'vue'

src/guide/reactivity.md

@@ -121,7 +121,7 @@ const dinner = {
 
 const handler = {
   get(target, prop, receiver) {
-    track(target, key)
+    track(target, prop)
     return Reflect.get(...arguments)
   }
 }
@@ -142,7 +142,7 @@ const dinner = {
 
 const handler = {
   get(target, prop, receiver) {
-    track(target, key)
+    track(target, prop)
     return Reflect.get(...arguments)
   },
   set(target, key, value, receiver) {
@@ -175,7 +175,7 @@ When a nested object is accessed from a reactive proxy, that object is _also_ co
 ```js
 const handler = {
   get(target, prop, receiver) {
-    track(target, key)
+    track(target, prop)
     const value = Reflect.get(...arguments)
     if (isObject(value)) {
       return reactive(value)