一、创建vue3.0项目

按照下图勾选，注意版本选择为3.x

二、在页面上显示内容

① 使用ref定义变量

1. vue3.0要使用的方法都要从’vue’中引入，这里要引用ref
2. 3.x版本定义的变量及声明的函数都要放在setup()函数里
3. 使用ref声明一个变量，也可以是ref(20) ,ref ([1,2,3,4])等
4. setup中ref定义的变量及函数，全部都要retrun出去
5. 使用ref定义的变量，可以直接用插值表达式显示
   

②使用reactive定义变量
当定义多个变量时，依次ref定义以及retrun，显得繁琐，这时可以使用reactive

1 import reactive
2 声明一个变量 = reactive 。 这里变量可以是任何名字， data , a ,list 都可
3 return 第2步定义的reactive名字
4 插值表达式内 ： {{ 你定义的reactive名字.value}}

③使用reactive定义变量，在插值表达式里编写麻烦，这时可用 toRefs

1 import toRefs
2 return …toRefs(data)
3 插值表达式内可直接使用reactive里定义的变量

总结：上面三种方式为vue3.x声明变量的方式，凭个人代码习惯选择风格开发