vue3.0初体验

vue3.0初体验

文档网址：
https://www.vue3js.cn/docs/zh/guide/migration/introduction.html#%E6%A6%82%E8%A7%88

---

1、体积比vue2.0更小

• 使用vite，利用es6的import会发送请求去加载文件的特性，拦截这些请求。做一些预编译，省去webpack冗长的打包时间。
• Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。
  它主要具有以下特点：
  • 快速的冷启动
  • 即时的模块热更新
  • 真正的按需编译

2、Composition API

目前，我们使用的是“options”API 构建组件。为了将逻辑添加到Vue组件中，我们填充（options）属性，如data、methods、computed等。这种方法最大的缺点是，它本身不是一个工作的JavaScript代码。您需要确切地知道模板中可以访问哪些属性以及this关键字的行为。在底层，Vue编译器需要将此属性转换为工作代码。正因为如此，我们无法从自动建议或类型检查中获益。

Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。使用Composition API编写的代码更易读，并且场景不复杂，这使得阅读和学习变得更容易。

• 执行机制

setup是在创建组件实例并完成props初始化之后执行的，也是在beforeCreate钩子之前执行，无法访问option(data、comupted、methods等)选项，而option可使用setup中返回的变量。

• 该函数相当于一个生命周期函数，vue中过去的data，methods，watch等全部都用对应的新增api写在setup()函数中

• 在steup中定义变量和方法，而且必须return出去才能使用

• 接受两个参数：setup(props, this(上下文对象))

  • props：组件传参
  • context：执行上下文，包含三个属性方法：attrs、slots、emit

     import { ref , onMounted } from "vue"    // ref创建响应式引用
        
     export default {
        
          setup(){
           let count = ref(0) 
           function setNum(){
           count.value += 1
           }
        
          return {count , steNum}
        
        }
  

3、更好的TS支持

• 进对 TypeScript 的支持，允许在编辑器中进行高级的类型检查和有用的错误和警告.

4、重构响应式系统

使用Proxy替换Object.defineProperty，使用Proxy优势：

• 可直接监听数组类型的数据变化
• 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
• 直接实现对象属性的新增/删除

5、全新的生命周期函数

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

6、搭建项目

6.1.使用vite（全局安装vite）

    npm install -g create-vite-app@1.18.0

6.2.创建项目

    npm init vite-app hellovue3

6.3.启动项目

    cd hellovue3
    npm i
    npm run dev