Vue3.0的setup学习笔记

1、setup的理解

setup组件选项在组件创建前执行，一旦props被解析，并充当Composition API的入口，也就是说组合API是在setup这个选项函数中使用的。

setup函数的注意点

• 没有this：由于在执行setup的时候组件实例还没创建成功，所以在setup中去打印this是undefined
• setup执行时间是在beforeCreated钩子函数之前执行的
• setup函数不能为异步函数：如果写为异步，页面可能会出现问题
• setup选项接受的两个参数：props和context函数

2、setup函数的返回值

如果setup返回一个对象，会将对象合并到render context中去，此时就能够在组件template模板中使用该对象的属性。

image.png

3、返回渲染函数

setup中可以返回一个渲染函数，使用h去生成虚拟的DOM，Vue3.0支持直接return虚拟节点

注意：要从vue中引出来，否则h是未定义的状态

image.png

4、setup接受的参数arguments

使用setup时，接受两个参数props和context(上下文)，因为setup中不再有this了，因此props接受的值可以做为参数传过来，通过参数props去拿。

props参数

setup函数中的第一个参数是props，props是响应式的，当传入新的props，将会自动更新，因为在setup函数中，this并不是组件对象，因此无法向选项中通过this.prop去获取组件传递的数据，所以在setup函数中，将props通过参数的方式传递进来，同时，props是响应式的，当修改父组件中的count时，子组件的count会自动发生变化。
父组件

子组件写法一

如果是这么直接解构去拿count的话，那么父组件修改了的count的值，子组件是不会跟着发生变化的，也可以理解为此时的count失去了活性。
那么有两种办法让子组件的数据激活，一种是toRefs()方法，另外一种是computed计算属性
方法一：toRefs(props)

image.png

方法二：computed()计算属性

image.png

这样，父组件点击按钮加的值就会传给子组件，显示出来。

5、上下文context

setup函数接受的第二个参数是context，context是一个普通的javascript对象，他暴露出来的是三个组件的属性。

setup(props,context){
  console.log('打印context:',context)
  return{}
}

image.png

context 是一个普通的javascript对象，也就是说，他不是响应式的，因此，可以对其进行ES6进行解构使用。

export default {
    setup(props, { attrs, slots, emit }) {
        //...
    }
}

context对象中的attrs以及slots是具有状态的对象，非响应式的。