vue3+TS 1

创建项目命令行

npm create vite@latest

 创建完毕记得以下步骤

cd xxx

npm i xx

npm run dev

 创建后会自动形成一套框架无需死记 只要知道里面是干嘛即可

vs-code需要安装的插件

vue2的插件需要关掉不然会报错 

之前的vue2api现在都变成组合式统一在setup里面写

setup函数

1 在beforeCreate之前执行

2 没有this

3 没有数据需要在末班使用需要返回

setup相当于return 直接把事件写里面即可

reactive函数

可以根据传入的复杂数据，创建一个响应式的数据返回

<template>
  <div>{{ student.name }} 已经 {{ student.age }}岁了</div>
  <button @click="student.age++">过了一年</button>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {

    // 传入普通对象, 返回一个处理过的响应式对象
    const student = reactive({
      name: 'tom',
      age: 17
    })

    return {
      student
    }
  }
};
</script>

ref函数（推荐使用）

<template>
  <div>{{ count }}</div>
  <button @click="plusOne">+1</button>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    let count = ref(0)

    const plusOne = () => {
      console.log(count.value);
      count.value++
    }

    return {
      count,
      plusOne
    }
  }
};
</script>

区别：个人建议尽量使用ref,但是reactive可以省去.value的写法