使用Vue.createApp创建Vue应用的步骤和注意事项-猿码集

1.前言

在Vue 3.x中，Vue.createApp已经被用来创建Vue应用，这是与Vue 2.x创建Vue应用的方式有所不同的。本文将介绍Vue.createApp创建Vue应用的步骤和注意事项。

2.创建Vue应用步骤

2.1 安装Vue3.x

在使用Vue.createApp之前，确保你已经安装了Vue 3.x。你可以使用npm、yarn等工具来安装。

npm install vue@next

2.2 引入Vue和创建Vue应用

在创建Vue应用之前，需要从Vue中引入createApp函数，这个函数是创建Vue应用的入口。


  import { createApp } from 'vue'

接着，使用createApp函数来创建Vue应用，并将其挂载到页面元素上。


  const app = createApp({})
  app.mount('#app')

在createApp函数中，我们可以传递一个包含多个选项的对象来定制化我们的Vue应用。通常情况下，这个对象的根属性包含一个视图组件，其余的属性包含不同的选项。

2.3 添加组件

Vue应用中最重要的元素就是组件，而在使用Vue.createApp创建Vue应用时，添加组件相当容易。


  const app = createApp({
    components: {
      HelloWorld: {
        template: '<div>HelloWorld</div>'
      }
    }
  })

首先，我们通过components属性定义一个视图组件，这个组件叫做HelloWorld，它的模板是一个简单的div。

2.4 挂载组件到DOM

我们可以将组件添加到Vue应用中，仅仅添加组件是不够的，还需要将组件显示在页面上。


  const app = createApp({
    components: {
      HelloWorld: {
        template: '<div>HelloWorld</div>'
      }
    }
  })
  app.mount('#app')

我们可以使用mount方法将Vue应用挂载到一个HTML元素上（这里的#app对应的是HTML元素的id）。

3.注意事项

3.1 全局/局部注册

除了使用components属性来添加组件之外，我们还可以使用Vue.component()方法来全局注册组件。


  import { createApp } from 'vue'
  import HelloWorld from './components/HelloWorld.vue'
  const app = createApp({})
  app.component('hello-world', HelloWorld)
  app.mount('#app')

在Vue 3.x中，Vue.component()被Vue.component('HelloWorld', HelloWorld)取代了。需要注意的是，使用组件时，组件名称应该是连接的kebab-case，而不是大写字母和驼峰式命名。

在Vue 3.x中，每个Vue应用都是相互独立的，因此可以在每个Vue应用中局部注册组件。这意味着组件只能在当前应用中使用，而不是全局可用。

3.2 组件选项的修改

在使用createApp创建Vue应用时，大多数选项都可以修改，并且可以通过Vue应用的实例来进行修改。例如，我们可以通过以下方式修改根组件的template属性。


  const app = createApp({
    template: '<div>Root Component</div>'
  })
  app.component('hello-world', {
    template: '<div>HelloWorld</div>'
  })
  // 修改根组件的template属性
  app.config.globalProperties.$options.template = '<h1>Root Component</h1><hello-world></hello-world>'
  app.mount('#app')

通过在Vue应用实例中设置config.globalProperties.$options属性的子属性，我们可以修改根组件的选项。这里的$options可以包含我们在创建应用时设定的所有选项。

3.3 组件实例的生命周期

组件实例有生命周期钩子函数，它们被用来在组件生命周期中执行一些操作。在Vue.createApp创建Vue应用时，每个组件的生命周期钩子函数都可以使用setup()，这是一个新的组件选项。


  const Counter = {
    props: ['initialCount'],
    setup(props) {
      const count = Vue.ref(props.initialCount)
      Vue.watch(count, (val) => {
        console.log(`count is changing to ${val}`)
      })
      return { count }
    },
    template: `<div>{{ count }}</div>`
  }
  const app = Vue.createApp({
    components: {
      Counter
    },
    template: `
      <div>
        <Counter :initial-count="10"></Counter>
      </div>
    `
  })
  app.mount('#app')

上面的例子展示了在Vue 3.x中定义组件，组件选项使用setup()，对组件属性进行监听。

4.总结

Vue.createApp是在Vue 3.x中使用的创建Vue应用的方法。通过Vue.createApp创建的应用具有全局/局部注册组件、修改组件选项、监听组件实例生命周期等功能。希望本文中介绍的内容能够帮助读者更好的理解Vue 3.x来创建Vue应用。

使用Vue.createApp创建Vue应用的步骤和注意事项