vue 3.0 尝鲜

前言

最近了解了一下 vue3.0 新特性， 最大的感受是前端框架不论 react 还是 vue， 都正在趋于统一化。vue3 的语法和 react 的语法愈发相似。vue3是基于vue2版本的平滑升级，所有2版本的语法在3版本中同样适用，因此我们可以相当舒适的完成从2版本到3版本的过渡。

vue3 特性

较 vue2.x 版本，vue3.0有着以下特性：

1. 性能提升

   • 打包大小减少41%
   • 初次渲染款55%, 更新快133%
   • 内存使用减少54%

2. Composition API

   • ref 和 reactive
   • computed和watch
   • 新的生命周期函数
   • 自定义函数-Hooks函数

3. 更好的TS支持

4. 创建项目

1.1 安装 cli 脚手架

• 首先要注意 vue cli 4.5.0 以上版本才能创建 vue3.0 项目，因此我们先检查 cli 的版本号：

  vue -V

• 若版本在 4.5.0 以下，则要先对 cli 版本进行升级：

  npm install -g @vue/cli

1.2 创建项目

终端进入项目目标文件夹，运行命令

#  project-name 为项目名
vue create project-name

后续会与我们创建2版本类似有一系列项目配置指引，在这里不做过多赘述，需要注意的是模板选择vue3的就行了。

1.3 目录

项目目录与vue2 基本上大同小异，多了个 shims-vue.d.ts 文件，该文件是为了添加 TS 对 .vue 后缀类型文件的支持。

2. 语法

2.1 生命周期钩子映射

beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
  -> onRenderTracked // v3新增调试钩子
  -> onRenderTriggered // v3新增调试钩子

beforeCreate/created 阶段被替换成了setup()， 其他的钩子前面加on。

2.2 script内部变化

与2版本不同的是，在vue3 中，所有的使用api都需导入才能使用。

setup 函数

• setup是vue3.x中新的操作组件属性的方法，它是组件内部暴露出所有的属性和方法的统一API。
• 接收连个参数： props 和 context（上下文对象）
• setup 函数中没有 this 的概念。
• 所有响应式数据及模板中用到的方法都要在 setup 的返回值中体现。
• setup的执行时机在：beforeCreate 之后 created之前

ref 函数

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性

• isRef() 用来判断某个值是否为 ref() 创建出来的对象；
• toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据。

reactive 函数

reactive函数接收一个普通函数，返回一个响应式的数据对象。

`当把 ref() 创建出来的响应式数据对象，挂载到 reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过 .value 就可以直接被访问

2.3 computed计算属性

注意： 写在setup函数内部

只读的计算属性

可读可写的计算属性

2.3 watch计算属性

注意： 写在setup函数内部

基本用法

• lazy类比于 2.x 中的 immediate

监视 reactive 类型的数据源

• reactive 类型的数据监听要用函数获取值

支持同时监听多个数据源

export default {
  setup() {
    // 定义数据源
    const count = ref(10)
    const name = ref(zh)
    // 指定要监视的数据源
    watch(
      [count, name],
      ([newCount, newName], [oldCount, oldName]) => {
        console.log(newCount, oldCount)
        console.log(newName, oldName)
      },
      { lazy: true}
    )
    setInterval(() => {
      count.value += 2
    }, 2000)
    console.log(count.value)
    return {
      count
    }
  }
}

清除监视

在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，调用 watch() 函数的返回值即可