Vue3的使用 和相较于Vue2的改动

首先创建Vue3项目命令:vue create  myweb  ←这是任意的名字不是固定   但是注意不要大写

 上面的是安装时的配置选项

先说第一点: 以往的vue页面需要一个挂载盒子并且只能有一个最大的挂载盒子不能有同级

vue3中的写法 跟趋近于HTML页面的写法 更方便一点不用再注意盒子包裹的问题

第二点:vue3 中使用Composition API 的api模式   按需引用 

<script lang="ts">
import {defineComponent,ref} from 'vue'

export default defineComponent({
  setup() {
    const msg = ref<number>(123);
    const arr = ref([12,123,777]) 
    const abc = ()=>{
      //修改msg的值
      msg.value = 888
    }
    return {msg,arr,abc}
  }
</script>

再上面引入的内容中  可以自由选择需要的方法 

第三点:vue3中变量的声明以及使用格式

export default defineComponent({
  setup() {
    const msg = ref<number>(123);
    const arr = ref([12,123,777]) 
    const abc = ()=>{
      //修改msg的值
      msg.value = 888
    }
    return {msg,arr,abc}
  }

//不再使用data()函数转而使用setup()函数作为代替 ----但是还是可以正常使用

vue3 变量的正常声明格式是 const str=ref<这里是为变量赋予数据类型>(变量值)

如果是要以对象的方式的话是 
const info = reactive({
      a:1,
      b:2,
      c:3
    })

使用时需要return他们的变量名
return{info,str}