vue3回顾

说一下对vue3的了解

• 性能更高了。

  • 响应式的原理变成了 Proxy；

  • VNode Diff 算法进行了优化；

• 体积更小了。

  • 所有的 API 都是按需导入，能配合 Webpack 支持 Tree Shaking；

  • 删除了不常用的一些特性 / API，filter、Event Bus...

• 对 TS 支持更好了。

  • 本身就是用 TS 写的。

• Composition API（组合 API）。

  • 对于开发大型项目更利于代码的组织和复用。
  • 把同一功能的数据和处理数据的业务逻辑组合到一起
  • vue2对于小型项目一目了然,很适合上手

• 新增加了一些特性（Fragment、Suspense、Teleport...）

vite

• 下一代的打包构建工具

• 特点:快,冷启动

• npm init vite-app 项目名

选项API和组合API

• Vue2是选项API,当项目打包之后,你会发现同一功能的数据和业务逻辑太过于分散,不利于维护,不方便复用

• 组合API就解决了上面的问题

setup

• 相当于beforeCreate 和 created

• 执行时机比 beforeCreate 还要早,意味着它执行的时候实例根本没有被创建

• 内部的this是undefined, 模板中要想使用setup中的数据或方法,一定要通过return 返回

• 返回的值不一定是一个对象,可以是一个渲染函数

reactive

• 作用 : 可以把数组或对象包装成响应式的数据

• 注意点: reactive 内部的对象其实也是给reactive 类型的数据

• isReactive : 判断数据是否是 reactive 类型的

ref

• 作用 : 包装任意类型为响应式的数据

• 注意点: 在setup 中使用ref 数据的时候一定要加 .value .模板中不要加,内部会自动加( 解包)

• 推荐 : 除非明确知道这个数据就是一个对象或数组,使用reactive,其他情况一律使用ref,甚至整个项目一律使用ref,在Vue3.2之后性能更高

• toRef :可以把响应式对象中的某一个属性变为单独的响应式的ref对象,并且转换之后的数据和原来的响应式对象中的数据是关联的

• toRefs

• isRef: 判断是否是ref 类型的

computed

• 如何对computed 进行赋值

  
  const fullName = computed({
    get() {
      return state.firstName + ' ' + state.lastName
    },
    set(newValue) {
      // newValue 就是输入的新值
      // console.log(newValue)
      const arr = newValue.split(' ')
      state.firstName = arr[0]
      state.lastName = arr[1]
    },
  })
  

watch

• 监听 reactive 内部数据 默认是深度监听,并且配置无效 ,对监听的reactive 本身赋值不能被监听到

• 监听ref 数据 , 默认只监听第一层, .value才是第一层 , ref内部的对象也是一个reactive 类型

• 监听普通数据 watch( ( )=> 普通数据 )

声明周期

• 把beforeCreate 和 created 组合成了setup

• 相同的声明周期可以写多次,不会覆盖

setup 参数

• props
• context => 对象 { emit , attrs , slots }