1. Vue2 选项式 API vs Vue3 组合式API

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

[](data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtNWRjMzE1NjggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdib3g9IjAgMCAyNCAyNCIgY2xhc3M9ImhvdmVyIiBzdHlsZT0iYm90dG9tOiA3LjVweDsiPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiAvPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSIjMjdiMWZmIiBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptLTEgNGw2IDZ2MTBjMCAxLjEtLjkgMi0yIDJINy45OUM2Ljg5IDIzIDYgMjIuMSA2IDIxbC4wMS0xNGMwLTEuMS44OS0yIDEuOTktMmg3em0tMSA3aDUuNUwxNCA2LjVWMTJ6IiAvPjwvc3ZnPg==)

<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>

[](data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtNWRjMzE1NjggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdib3g9IjAgMCAyNCAyNCIgY2xhc3M9ImhvdmVyIiBzdHlsZT0iYm90dG9tOiA3LjVweDsiPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiAvPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSIjMjdiMWZmIiBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptLTEgNGw2IDZ2MTBjMCAxLjEtLjkgMi0yIDJINy45OUM2Ljg5IDIzIDYgMjIuMSA2IDIxbC4wMS0xNGMwLTEuMS44OS0yIDEuOTktMmg3em0tMSA3aDUuNUwxNCA2LjVWMTJ6IiAvPjwvc3ZnPg==)

特点：

1. 代码量变少
2. 分散式维护变成集中式维护

2. Vue3的优势

使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

2. 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令，这一指令将会安装并执行 create-vue