vue3新特性、Composition API vs options API 的区别、setup 函数

目录

vue3新特性：

 Vite 的使用:

Vite 的基本使用:

Composition API

composition API 与 options API 的区别

setup 函数

---

vue3新特性：

1. 数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)

   解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能

   (原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

2. 虚拟DOM - 新算法 (更快 更小)

3. 提供了composition api,可以更好的逻辑复用

4. 模板可以有多个根元素

5. 源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

Vite 的使用:

Vite 是一个原生 ESM 驱动的 web 开发构建工具, 在开发环境下基于浏览器原生 ES imports 开发

可以用于快速构建 vue3 的工程化项目环境 

注意: node版本12以上

Vite 的基本使用:

 vite 创建 vue 3.x 的工程化项目

npm init vite-app 项目名称
或者
yarn create vite-app 项目名称

cd 项目名称
yarn
yarn dev

Composition API

composition API 与 options API 的区别

1. vue2 采用的就是 options API

   (1) 优点:便于学习和使用,每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)

   (2) 缺点: 相似的逻辑, 不容易复用, 在大项目中尤为明显

   (3) 虽然 optionsAPI 可以通过mixins 提取相同的逻辑, 但是也并不是特别好维护

2. vue3 新增的就是 composition API

   (1) compositionAPI 是基于逻辑功能组织代码的, 一个功能 api 相关放到一起

   (2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api

   (3) 大大的提升了代码可读性和可维护性

3. vue3 推荐使用 composition API, 也保留了options API

   即就算不用composition API, 用 vue2 的写法也完全兼容

setup 函数

composition的使用, 需要配置一个setup 函数

1. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点

2. 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行

3. setup 中不能使用 this, this 指向 undefined

4. 在模版中需要使用的数据和函数，需要在 setup 返回。

<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }

    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>