Vue3基础

1.创建Vue3项目

在浏览器环境可以先引入Vue3的CDN来创建项目

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

创建一个Vue3应用需要有以下几个步骤，

1. 需要有一个dom元素作为项目的容器
2. 从Vue对象中结构出createApp()函数
3. 通过 createApp()函数创建一个新的 应用实例，一般取名叫app
4. 通过应用实例的mount()方法，把vue项目挂载到一个dom元素身上

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

const { createApp } = Vue

const app = createApp({
    data() {
        return {
            count: 0
        }
    }
})

app.mount('#app')

之后，我们就可以使用Vue2中的选项式api在浏览器环境中开发了

也可以使用组合式Api

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

2.两套Api

Vue3有两套Api，即选项式Api和组合式Api

选项式Api就是Vue2通用的语法，如下所示

export default{
    data(){
		return{}
    },
    mounted(){},
    methods:{},
    // ...
}

而选项式Api则是把Vue的各种api封装成了hook函数，更贴近于原生开发

<script>
    import {ref} from 'vue'
    export default{
        setup(){
            const num = ref(123)

            return {
                num
            }
        }
    }
</script>

Vue3更推荐使用全新的组合式Api