setup函数

• 与data、methods中的数据合并时，setup返回的数据的优先级更高
• 没有this，setup执行在beforeCreate之前
• 参数1，props
• 参数2，context对象，包括arrtrs，slots，emit

ref

• 会将传入的数据（基本类型或者复杂类型）包装成对象，在script中修改时要使用.value，在模板中不需要.value（会自动解包）

refs

• 实验性的功能，不需要.value即可修改数据

shallowRef

• 只有重新赋值才是响应式

reactive

• 只接受对象类型的参数
• script中不需要使用.value

shallReactive

• 只有对象的第一层属性是响应式的

toRefs

• 将响应式对象中的所有属性包装为ref对象并返回
• setup返回reactive定义的对象时，如果使用...展开对象，则对象中基本类型失去响应性，可以使用...toRefs(obj)，使每个属性变为响应性

toRef

• 为响应性对象上的某个属性创建一个ref引用，属性更新时，引用对象会同步更新

readonly

• 只读代理对象，不可修改

shallowReadonly

• 修改第一层属性会报错

toRow

• 返回reactive或者readonly对象的原始数据
• 返回的数据不具有响应性

markRow

• 标记一个对象使其不具有响应性，应用在不可变数据

computed函数

• 接收一个包含返回值的回调函数，或者包含get/set函数的对象

watch函数

• 监听一个或多个数据，监听多个时第一个使用数组参数
• 监听reactive对象的属性时，第一个参数必须使用回调函数形式

watchEffect

• 初始化时就执行一次，不需要指定监听的数据

provide函数

• provide('color'，'red')

inject函数

• color = inject('color')

响应性数据的判断

• isRef
• isReactive
• isReadonly
• isProxy

生命周期

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onMounted
• onActivated
• onDeactivated

组件

• Fragment，允许多个根元素
• Teleport，瞬移，vue2也有
• Suspense，展示中间过渡状态

获取dom

<input ref = inputDom />
const inputDom = ref(null);
onMounted(() => {
  nextTick(() => {
    inputDom.value.focus()
  })
})

自定义hook函数

• 创建一个函数，名称必须以use开头
• 必须return数据

customRef

• 使用customRef，自定义一个hook，自动依赖追踪，触发响应

  
  image.png
  image.png