1. setup函数##
setup 函数是组件逻辑的地方，它在组件实例被创建时，初始化 props 之后调用
**
2. ref
ref 主要是用来包装原始类型的数据
为什么要包装对象
我们知道在 JavaScript 中，原始值类型如 string 和 number 是只有值，没有引用的。如果在一个函数中返回一个字符串变量，接收到这个字符串的代码只会获得一个值，是无法追踪原始变量后续的变化的
因此，包装对象的意义就在于提供一个让我们能够在函数之间以引用的方式传递任意类型值的容器。
setup(props) {
const msg = ref('hello')
const appendName = () => {
msg.value = `hello ${props.name}`
}
return {
msg,
appendName
}
},
**
**
3. reactive
reactive主要用于非原始类型的数据
import { reactive } from 'vue'
const object = reactive({
count: 0
})
**
4. toRefs
响应式对象转为普通对象用它可以再变成响应式的
setup() {
const obj = reactive({
count: 0
})
const inc = () => {
obj.count++
}
return {
// 如果直接用ES6扩展运算符，会取消双向数据绑定的特性,使用toRefs(),转为响应式数据
...toRefs(obj),
inc
}
},
5. watchEffect
监听所有的数据 改变的时候触发
立即执行，没有惰性，页面的首次加载就会执行
自动检测内部代码，代码中有依赖就会执行
不需要传递要侦听的内容, 会自动感知代码依赖
setup() {
const userId = ref(0)
// 只要数据数据发生改变就触发
watchEffect(() => console.log(userId.value))
setTimeout(() => {
userId.value = 1
}, 1000)
return {
userId
}
}
6. watch
不能监听所有的, 只能监听指定数据
具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行
参数可以拿到当前值和原始值
可以侦听多个数据的变化
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
// 侦听多个数据源
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
})
7. 瞬移组件
<teleport to="#modal">
<-- 内容 -->
</teleport>
8. Suspense异步组件
在页面加载之前显示加载动画
显示占位符内容
处理延迟加载的图像
<Suspense>
<template #default>
<component-a></component-a>
</template>
<template #fallback>
<h1>Loadding...</h1>
</template>
</Suspense>
9. 生命周期
