整理的 Vue3.2 版本新特性，从升级到使用

Vue3.2的官方文档
Young村长B站视频

升级 Vue3.2

1. 现在使用 npm install @vitejs/app 创建的 vue 项目都是 3.2 版本了

2. 但是对以往的 vue 项目可以用下面的方式升级，当然编写的代码也可以修改

   • 升级 node，到 14 以上吧，安装下 vite，然后运行 npm init @vitejs/app 然后一路选择 vue 或 vue-ts，如果要用 ts 的话

   • 现有 Vue 项目升级 3.2 版本

     npm i vue // 升级到 3.2
     npm i @vue/compiler-sfc -D // 满足 Vite 工具对 SFC(就是平常所说的 .vue 文件) 的编译需求 
     // 升级后查看 package.json 配置信息
      "dependencies": {
            
        "vue": "^3.2.20"
      },
      "devDependencies": {
            
        "@vue/compiler-sfc": "^3.2.20",
        "vite": "^1.0.0-rc.13"
      }
     

新特性

• script setup 写法升级

  • 废除 useContext，其功能被新增 API 替代了
  • 新增 defineExpose，暴露接口供外界使用，不需要导入，在代码中直接用

    // 子组件 child.vue 中暴露想要给组件外使用的数据与方法
    const count = ref(0)
    const someMethods = () => {
           
      console.log("Some message from HelloWorld");
    }
    defineExpose({
           
        count,
        someMethods 
    })
    
    // 父组件中导入子组件并在 setup 中调用子组件中的方法与数据
    // html 
    <template>
      <Child ref="child" />
    </template>
    <script setup>
      import {
            ref, onMounted } from 'vue'
      i