vue3 api 理解

使用api都需要在vue中按需引入

1. ref

• ref是响应式数据，可以给定初始值，但是会通过.value来访问，template中可以直接 ref 指向

2. 生命周期

• setup替代了beforeCreate和created两个生命周期函数，理解成它的执行时间在替代的两个生命周期函数之间
• 提供了两个参数props和context（上下文）,props是响应式的，可以通过watch和watchEffect进行观测和响应，解构会失去响应式

3. reactive

• vue3提供的响应式函数，可以理解成vue 2.x类似的功能，但是是用proxy写的，所以解决了vue 2.x的一些问题（$set、数组只有 6 个方法重写等）

建议：

• 基本类型值（String 、Nmuber 、Boolean 等）或单值对象（类似像 {count: 3} 这样只有一个属性值的对象）使用 ref

• 引用类型值（Object 、Array）使用 reactive

4. toRef

• toRef是将某个对象中的某个值转化为响应式数据，其接收两个参数，第一个参数为 obj 对象；第二个参数为对象中的属性名
• ref是对原数据的一个拷贝，不会影响到原始值，同时响应式数据对象值改变后会同步更新视图
• toRef是对原数据的一个引用，会影响到原始值，但是响应式数据对象值改变后会不会更新视图

ref 是对传入数据的拷贝；toRef 是对传入数据的引用

ref 的值改变会更新视图；toRef 的值改变不会更新视图

5. toRefs

• 将传入的对象里所有的属性的值都转化为响应式数据对象，该函数支持一个参数，即 obj 对象

6. shallowReactive

• reactive的浅层api，只会对第一层进行响应式包装，性能优化

7. shallowRef

• shallowRef 监听 .value 的值的变化来更新视图的

8. toRaw

• 用于获取ref或reactive对象的原始数据，toRaw接收一个参数，即ref对象或 reactive对象
• 当想修改数据，但不想让视图更新时，可以选择直接修改原始数据上的值，因此需要先获取到原始数据，可以使用toRaw方法
• 当 toRaw方法接收的参数是ref对象时，需要加上.value才能获取到原始数据对象

9. markRaw

• 将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式，其接收一个参数，即原始数据，并返回被标记后的数据
• 个人理解：就是加一个不能变成响应式的状态，不管你怎么使用响应式函数（ref || reactive），都不会变成响应式

10 watch && watchEffect

• watch 和 watchEffect 都是用来监视某项数据变化从而执行指定的操作的

• watch：watch( source, cb, [options] )

  • source：可以是表达式或函数，用于指定监听的依赖对象
  • cb：依赖对象变化后执行的回调函数
  • options：可选参数，可以配置的属性有 immediate（立即触发回调函数）、deep（深度监听）

• watch 监听 ref

  const state = ref(0);
  
  watch(state, (newValue, oldValue) => {
    console.log(`原值为${oldValue}`);
    console.log(`新值为${newValue}`);
    /* 1秒后打印结果：
      原值为0
      新值为1
    */
  });
  
  // 1秒后将state值+1
  setTimeout(() => {
    state.value++;
  }, 1000);
  

• watch 监听 reactive

   setup() {
        const state = reactive({count: 0})
  
        watch(() => state.count, (newValue, oldValue) => {
          console.log(`原值为${oldValue}`)
          console.log(`新值为${newValue}`)
          /* 1秒后打印结果：
            原值为0
            新值为1
          */
        })
  
        // 1秒后将state.count的值+1
        setTimeout(() => {
          state.count ++
        }, 1000)
    }
  
  

• watch 监听多个值

  setup() {
       const state = reactive({ count: 0, name: 'zs' })
  
        watch(
           [() => state.count, () => state.name],
           ([newCount, newName], [oldvCount, oldvName]) => {
             console.log(oldvCount) // 旧的 count 值
             console.log(newCount) // 新的 count 值
             console.log(oldName) // 旧的 name 值
             console.log(newvName) // 新的 name 值
           }
         )
  
         setTimeout(() => {
           state.count ++
           state.name = 'ls'
         }, 1000)
   }
  

• 因为 watch 方法的第一个参数我们已经指定了监听的对象，因此当组件初始化时，不会执行第二个参数中的回调函数，若我们想让其初始化时就先执行一遍，可以在第三个参数对象中设置 immediate: true

• watch 方法默认是渐层的监听我们指定的数据，例如如果监听的数据有多层嵌套，深层的数据变化不会触发监听的回调，若我们想要其对深层数据也进行监听，可以在第三个参数对象中设置 deep: true

watch 方法会返回一个 stop 方法，若想要停止监听，便可直接执行该 stop 函数

• watchEffect 和 watch 的区别
  • 不需要手动传入依赖
  • 每次初始化时会执行一次回调函数来自动获取依赖
  • 无法获取到原值，只能得到变化后的值

11. getCurrentInstance

• 获取到当前组件的实例

12. useStore

• 获取vuex中的 store

参考链接

快速使用 Vue3 最新的 15 个常用 API
vue3中文文档