theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: adjust createApp related API signatures

Browse Source 
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()
  ```
This commit is contained in:
Evan You
2020-01-23 15:05:38 -05:00
parent eacd390992
commit c07751fd36
25 changed files with 276 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/vue/__tests__/index.spec.ts
View File

@@ -14,7 +14,7 @@ describe('compiler + runtime integration', () => {
}
}
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
@@ -33,7 +33,7 @@ describe('compiler + runtime integration', () => {
}
}
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
@@ -51,7 +51,7 @@ describe('compiler + runtime integration', () => {
}
}
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
@@ -60,7 +60,7 @@ describe('compiler + runtime integration', () => {
const App = {
template: `<div v-if>`
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(
`Template compilation error: Element is missing end tag`
).toHaveBeenWarned()
@@ -78,26 +78,24 @@ describe('compiler + runtime integration', () => {
})
it('should support custom element', () => {
const app = createApp()
const container = document.createElement('div')
const App = {
const app = createApp({
template: '<custom></custom>'
}
})
const container = document.createElement('div')
app.config.isCustomElement = tag => tag === 'custom'
app.mount(App, container)
app.mount(container)
expect(container.innerHTML).toBe('<custom></custom>')
})
it('should support using element innerHTML as template', () => {
const app = createApp()
const container = document.createElement('div')
container.innerHTML = '{{msg}}'
const App = {
const app = createApp({
data: {
msg: 'hello'
}
}
app.mount(App, container)
})
const container = document.createElement('div')
container.innerHTML = '{{msg}}'
app.mount(container)
expect(container.innerHTML).toBe('hello')
})
})

10
packages/vue/examples/classic/commits.html
View File

@@ -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>

10
packages/vue/examples/classic/grid.html
View File

@@ -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>

10
packages/vue/examples/classic/markdown.html
View File

@@ -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>

11
packages/vue/examples/classic/svg.html
View File

@@ -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>

10
packages/vue/examples/classic/todomvc.html
View File

@@ -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>

48
packages/vue/examples/classic/tree.html
View File

@@ -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>

6
packages/vue/examples/composition/commits.html
View File

@@ -32,7 +32,7 @@ const truncate = v => {
const formatDate = v => v.replace(/T|Z/g, ' ')
const App = {
createApp({
setup() {
const currentBranch = ref('master')
const commits = ref(null)
@@ -54,9 +54,7 @@ const App = {
formatDate
}
}
}
createApp().mount(App, '#demo')
}).mount('#demo')
</script>
<style>

10
packages/vue/examples/composition/grid.html
View File

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

6
packages/vue/examples/composition/markdown.html
View File

@@ -11,7 +11,7 @@
const delay = window.location.hash === '#test' ? 16 : 300
const { ref, computed } = Vue
const App = {
Vue.createApp({
setup() {
const input = ref('# hello')
const output = computed(() => marked(input.value, { sanitize: true }))
@@ -23,9 +23,7 @@ const App = {
update
}
}
}
Vue.createApp().mount(App, '#editor')
}).mount('#editor')
</script>
<style>

7
packages/vue/examples/composition/svg.html
View File

@@ -100,7 +100,8 @@ const globalStats = [
{ label: 'E', value: 100 },
{ label: 'F', value: 100 }
]
const App = {
createApp({
components: {
Polygraph
},
@@ -133,9 +134,7 @@ const App = {
remove
}
}
}
createApp().mount(App, '#demo')
}).mount('#demo')
</script>
<style>

6
packages/vue/examples/composition/todomvc.html
View File

@@ -90,7 +90,7 @@ function pluralize (n) {
return n === 1 ? 'item' : 'items'
}
const App = {
createApp({
setup () {
const state = reactive({
todos: todoStorage.fetch(),
@@ -202,7 +202,5 @@ const App = {
}
}
}
}
createApp().mount(App, '#app')
}).mount('#app')
</script>

48
packages/vue/examples/composition/tree.html
View File

@@ -72,43 +72,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>

6
packages/vue/examples/transition/list.html
View File

@@ -24,7 +24,7 @@ const Item = {
template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
}
const App = {
Vue.createApp({
components: {
Item
},
@@ -51,9 +51,7 @@ const App = {
}
}
}
}
Vue.createApp().mount(App, '#app')
}).mount('#app')
</script>
<style>

9
packages/vue/examples/transition/modal.html
View File

@@ -56,13 +56,12 @@ const Modal = {
</div>
<script>
const App = {
Vue.createApp({
components: { Modal },
data: {
data: () => ({
showModal: false
}
}
Vue.createApp().mount(App, '#app')
})
}).mount('#app')
</script>
<style>