Vue3其他

Composition API

引入setup钩子的原因是为了让其和option API并肩工作，其中的return也会暴露在this上

答：Setup将是新的一个调用的钩子，甚至在beforeCreate之前，它是在整个生命周期图的最前面，最顶部。

在setup中，需要注意的是你是没有权限访问this，这是故意的，因为大部分的暴露在this上的功能你也可以使用组合式API函数做到，所以setuo内部并没有太多this的用例，另外，因为它是在所有事情之前调用的，比如你有的data和components，这些都是在setup后处理的

watchEffect直接获取一个函数，它会立即运行它，并且只要有任何变化就重新运行；

javascript

watchEffect(()=>{
    console.log(state.count)
})

watch的不同在于，你需要先定义一个源，源可以是返回某些内容的函数，然后你有一个回调函数，回调接收一个count和oldCount，这和Vue2的API完全一样

javascript

watch(()=>state.count, (count, oldCount) =>{
    
})

watch你得更明确地说明什么会触发回调再次运行，有时你可能会在一个回调内依赖另一个属性因为这是在回调内部地访问，它不会真正被跟踪为依赖项

javascript

watch(()=>state.count, (count, oldCount) =>{
    state.anotherProperty
})

你可能正在执行一些复杂的计算，如果计算的结果最终是相同的值，则不会调用第二个参数的回调

然而，在这种情况下<watchEffect函数中>，没有像中间值之类的给你说这个值是否改变了，所以在这个过程中它访问的任何东西将触发整个effect重新运行

watch的另外一个好处就是你可以得到旧的值

上述watch的第一个参数可以直接写响应式值<之所以不写state.count，因为检测一个数字是没有任何意义的>：

watch只有其中一个发生变化时才调用，而watchEffect不能是懒惰的，因为你必须预先收集依赖关系

但是尤其是在合成API中，watchEffect可以更直接用于很多用例，比如数据获取，假如我们有一个用例在那里你想要获取一些关于组件创建的数据，所以我们应该在创建组件的时候获取它，如果某个prop改变了，我们需要根据那个prop重新获取数据

这是本来要做的：

这是使用了watchEffect之后的

因为整个操作都依赖于props.id，每当来的props改变时就会导致它重新运行

注：对于setup中传入的props，它是一个响应式对象，会自动为你更新，你不应该修改它，修改它也会得到一个警告。

从某种意义上说，我们是在调用onMounted()，就像一个全局API，它只是神奇地知道与哪个组件关联，原因是，当你这么做的时候，意味着你可以提取这个到一个外部函数，不需要再传入额外的参数，然后再在内部可以调用它，使得抽象变得非常容易：

引入组合式API的其他好处

比如之前的，setup内部的函数可以提取到外部进行使用