Vue3

setup

在setup中应避免使用this，因为它不会找到组件实例。setup的调用发生在data property、computed property和methods被解析之前，所以它们无法在setup中获取。
因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显示的定义它们。也就是说，在beforeCreate和created中编写的任何代码，都可以直接在setup函数中编写。
setup选项是一个接收props和context的函数，setup(props, context)
- props： props参数是响应式的，需要先声明props属性才能获取到
  js
```
  export default {
    props: {
      title: String
    },
    setup(props) {
      console.log(props.title)
    }
  }
```
  因为props是响应式的，不能使用ES6解构，它会消除prop的响应性。如需要解构props，可在setup中使用toRefs函数来完成：
  js
```
  import { toRefs } from 'vue'
  setup(props) {
    const { title } = toRefs(props);
    console.log(title.value)
  }
```
  如果title是可选的prop，则传入的props中可能没有title。这种情况toRefs将不会为title创建一个ref。你需要使用toRef代替它:
  js
```
import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}
```
- context：context参数是一个普通JavaScript对象（非响应式）在执行setup时，可以访问一下property：porps，attrs，slots，emit；不能访问一下选项：data，computed，methods，refs
如果setup返回一个对象，那么该对象的property以及传递给setup的props参数中的property都可以在模板中访问。从setup返回的refs在模板中访问时是被自动浅解包的，因此不应该在模板中使用.value
setup还可以返回一个渲染函数，当我们想要将这个组件的方法通过模板ref暴露给父组件时，需要使用expose来解决

import { h, ref } from 'vue'
export default {
  setup(props, {expose}) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

watch和watchEffect

与 watchEffect 比较， watch 允许我们：
- 懒执行副作用
- 更具体的说明什么状态应该处罚侦听器重新运行
- 访问侦听器状态变化前后的值

Vue3 ​

setup ​

watch和watchEffect ​

Vue3

setup

watch和watchEffect