组合式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
