vue3的创建及认识

1、创建项目

使用creat-vue搭建vue3项目

2、认识creat-vue

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

3、创建create-vue项目

npm init vue@latest

4、认识vue3

首先熟悉一下vue2

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

vue2语法特点：

1. 选项式api

2. 缺点：数据和逻辑分离

3. 维护不太好

vue3-------setup是入口

普通情况下

import { ref } from 'vue'
export default {
  setup() {
    // 组合式api
    // 创建响应式数据age，初始值是10
    const age = ref(10)
    // 修改年龄的方法
    const increase = () => {
       age.value++
    }
    // 模版需要用的数据或方法，需要 return
    return {
      age,
      increase
    }
  }
}

<script setup>语法糖情况下

<script setup>
 //导入ref
import { ref } from 'vue'
 //创建响应式数据count，初始值是0
const count = ref(0)
const addCount = ()=> count.value++
</script>

vue3语法特点：

1. 组合式api

2. 代码量变少

3. 分散式维护变成集中式维护