Vue3.0的常用API

组合式API

1、setup

使用 setup 函数时，它将接受两个参数：props、context。
1、props
2、setup 函数中的 props是响应式的，当传入新的 prop 时，它将被更新
3、由于 props 是响应式的，不能使用ES6 解构，因为它会消除prop的响应性
4、如果需要解构 prop，可以通过使用 setup 函数中的 [toRefs]来安全地完成此操作。

import { toRefs } from 'vue'
setup(props) {
    const { title } = toRefs(props)
    console.log(title.value)
}

5、上下文（context）
6、context是一个普通的 JavaScript对象，它暴露三个组件的 property：attrs、slots、emit。

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)
    // 插槽 (非响应式对象)
    console.log(context.slots)
    // 触发事件 (方法)
    console.log(context.emit)
  }
}

7、context 是一个普通的 JavaScript 对象，它不是响应式的，所以可以对 context 使用ES6解构。
8、由于attrs 和 slots 是有状态的对象，所以总是会随组件本身的更新而更新。、因此避免对它们进行解构，并始终以attrs.x 或 slots.x的方式引用 property。与 props不同，attrs和 slots 是非响应式的。如果根据 attrs 或 slots 更改应用副作用，那么应该在onUpdated生命周期钩子中执行此操作。
9、执行 setup 时，组件实例尚未被创建。因此，只能访问的property有：props、attrs、slots、emit，将无法访问以下组件选项有：data、computed、methods。
10、在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以setup()内部的this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API一起使用 setup() 时可能会导致混淆。

响应性API

1、reactive

1、返回对象的响应式副本,返回的代理是不等于原始对象，响应式转换是“深层”的—它影响所有嵌套 property。
2、建议只使用响应式代理，避免依赖原始对象。

    const foo = {
      name:'lzihi',
      other:{
        age:18,
        sex:'男'
      }
    }
    const reactiveFoo = reactive(foo)
    console.log('reactiveFoo === foo',reactiveFoo === foo)  // fasle
    reactiveFoo.other.age++
    console.log('reactiveFoo',reactiveFoo.other.age) // 19

2、readonly

1、获取一个对象 (响应式或纯对象) 或 ref并返回原始代理的只读代理。
2、只读代理是深层的：访问的任何嵌套 property也是只读的。

    const foo = {
      name:'lzihi',
      other:{
        age:18,
        sex:'男'
      }
    }
    const readonlyFoo = readonly(foo)
    readonlyFoo.name = 'lisi' // 报错 Set operation on key "name" failed: target is readonly.
    readonlyFoo.other.age ++ // 报错 Set operation on key "age" failed: target is readonly.

3、shallowReactive

创建一个响应式代理，该代理跟踪其自身property 的响应性，但不执行嵌套对象的深度响应式转换 (暴露原始值)。

    const foo = {
      name:'lzihi',
      other:{
        age:18,
        sex:'男'
      }
    }
    const shallowReactiveFoo = shallowReactive(foo)
    shallowReactiveFoo.name = 'lisi'
    console.log(shallowReactiveFoo.name) // lisi
    shallowReactiveFoo.other.age++   
    shallowReactiveFoo.other.sex = '女'
    console.log(shallowReactiveFoo.other.age,shallowReactiveFoo.other.sex) // 19 女

4、shallowReadonly

创建一个代理，使其自身的property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。

   const foo = {
      name:'lzihi',
      other:{
        age:18,
        sex:'男'
      }
    }
    const shallowReadonlyFoo = shallowReadonly(foo)
    shallowReadonlyFoo.name = 'lisi'  // 报错 Set operation on key "name" failed: target is readonly
    console.log(shallowReadonlyFoo.name)  // lizhi
    shallowReadonlyFoo.other.age++  
    console.log(shallowReadonlyFoo.other.age) // 19

5、ref

1、ref 会返回一个可变的响应式对象，该对象作为它的内部值——一个响应式的引用，这就是名称的来源。此对象只包含一个名为 value 的 property
2、当ref 作为渲染上下文 (从 setup()中返回的对象) 上的 property返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      console.log(count.value) // 0
      count.value++
      console.log(count.value) // 1

      return {
        count
      }
    }
  }
</script>

computed

1、依赖于其他状态的状态,直接创建计算值,接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。
2、使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象

const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 报错 Write operation failed: computed value is readonly

const plusTwo= computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})
console.log(plusTwo.value) // 2
plusTwo.value = 5
console.log(count.value) // 4

watchEffect

在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。

    const count = ref(0)
    watchEffect(() => console.log(count.value))
    // -> logs 0
    setTimeout(() => {
      count.value++
      // -> logs 1
    }, 100)

watch

1、watch 需要侦听特定的 data 源，并在单独的回调函数中副作用，默认情况下，它也是惰性的——即，回调是仅在侦听源发生更改时调用
2、侦听器 data 源可以是返回值的 getter 函数
3、可以是 ref
4、侦听器还可以使用数组同时侦听多个源

   const state1 = reactive({ count: 0 })
   watch(
      () => {
        return state1.count + 1
      },
      (val, prevCount) => {
        console.log(val, prevCount) // 4 1
      }
   )
   state1.count =3 

   // 直接侦听ref
   const count = ref(0)
   watch(count, (count, prevCount) => {
      console.log(count, prevCount)  // 4 0
   })
   count.value = 4

    // 侦听多个源
    const count1 = ref(0)
    const count2 = ref('rrrr')
    watch([count1,count2],([a,b],[aa,bb])=>{
      console.log('count1=>',a,aa)
      console.log('count2=>',b,bb)
    })
    count1.value = 4  
    // count1=> 4 0
    // count2=> rrrr rrrr
    count2.value = 'sdfsdf'
    //  count1=> 4 4
    // count2=> sdfsdf rrrr