refactor: adjust createApp related API signatures

BREAKING CHANGE: `createApp` API has been adjusted.

  - `createApp()` now accepts the root component, and optionally a props
  object to pass to the root component.
  - `app.mount()` now accepts a single argument (the root container)
  - `app.unmount()` no longer requires arguments.

  New behavior looks like the following:

  ``` js
  const app = createApp(RootComponent)
  app.mount('#app')
  app.unmount()
  ```

packages/vue/examples/classic/commits.html

@@ -24,12 +24,12 @@
 <script>
 const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
 
-const App = {
-  data: {
+Vue.createApp({
+  data: () => ({
     branches: ['master', 'sync'],
     currentBranch: 'master',
     commits: null
-  },
+  }),
 
   created() {
     this.fetchData()
@@ -55,9 +55,7 @@ const App = {
       return v.replace(/T|Z/g, ' ')
     }
   }
-}
-
-Vue.createApp().mount(App, '#demo')
+}).mount('#demo')
 </script>
 
 <style>

packages/vue/examples/classic/grid.html

@@ -87,11 +87,11 @@ const DemoGrid = {
 </div>
 <!-- App script -->
 <script>
-const App = {
+Vue.createApp({
   components: {
     DemoGrid
   },
-  data: {
+  data: () => ({
     searchQuery: '',
     gridColumns: ['name', 'power'],
     gridData: [
@@ -100,10 +100,8 @@ const App = {
       { name: 'Jackie Chan', power: 7000 },
       { name: 'Jet Li', power: 8000 }
     ]
-  }
-}
-
-Vue.createApp().mount(App, '#demo')
+  })
+}).mount('#demo')
 </script>
 
 <style>

packages/vue/examples/classic/markdown.html

@@ -10,10 +10,10 @@
 <script>
 const delay = window.location.hash === '#test' ? 16 : 300
 
-const App = {
-  data: {
+Vue.createApp({
+  data: () => ({
     input: '# hello'
-  },
+  }),
   computed: {
     compiledMarkdown() {
       return marked(this.input, { sanitize: true })
@@ -24,9 +24,7 @@ const App = {
       this.input = e.target.value
     }, delay)
   }
-}
-
-Vue.createApp().mount(App, '#editor')
+}).mount('#editor')
 </script>
 
 <style>

packages/vue/examples/classic/svg.html

@@ -97,14 +97,15 @@ const globalStats = [
   { label: 'E', value: 100 },
   { label: 'F', value: 100 }
 ]
-const App = {
+
+Vue.createApp({
   components: {
     Polygraph
   },
-  data: {
+  data: () => ({
     newLabel: '',
     stats: globalStats
-  },
+  }),
   methods: {
     add(e) {
       e.preventDefault()
@@ -123,9 +124,7 @@ const App = {
       }
     }
   }
-}
-
-Vue.createApp().mount(App, '#demo')
+}).mount('#demo')
 </script>
 
 <style>

packages/vue/examples/classic/todomvc.html

@@ -82,14 +82,14 @@ const filters = {
   }
 }
 
-const App = {
+Vue.createApp({
   // app initial state
-  data: {
+  data: () => ({
     todos: todoStorage.fetch(),
     newTodo: '',
     editedTodo: null,
     visibility: 'all'
-  },
+  }),
 
   // watch todos change for localStorage persistence
   watch: {
@@ -192,7 +192,5 @@ const App = {
       }
     }
   }
-}
-
-Vue.createApp().mount(App, '#app')
+}).mount('#app')
 </script>

packages/vue/examples/classic/tree.html

@@ -69,43 +69,43 @@ const TreeItem = {
 </ul>
 
 <script>
-const App = {
-  components: {
-    TreeItem
-  },
-  data: {
-    treeData: {
-      name: 'My Tree',
+const treeData = {
+  name: 'My Tree',
+  children: [
+    { name: 'hello' },
+    { name: 'wat' },
+    {
+      name: 'child folder',
       children: [
+        {
+          name: 'child folder',
+          children: [
+            { name: 'hello' },
+            { name: 'wat' }
+          ]
+        },
         { name: 'hello' },
         { name: 'wat' },
         {
           name: 'child folder',
           children: [
-            {
-              name: 'child folder',
-              children: [
-                { name: 'hello' },
-                { name: 'wat' }
-              ]
-            },
             { name: 'hello' },
-            { name: 'wat' },
-            {
-              name: 'child folder',
-              children: [
-                { name: 'hello' },
-                { name: 'wat' }
-              ]
-            }
+            { name: 'wat' }
           ]
         }
       ]
     }
-  }
+  ]
 }
 
-Vue.createApp().mount(App, '#demo')
+Vue.createApp({
+  components: {
+    TreeItem
+  },
+  data: () => ({
+    treeData
+  })
+}).mount('#demo')
 </script>
 
 <style>