vue3.0

1： setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

2： 之前的data、生命周期、自定义函数都可以放置在内。

3： 在创建组件之前执行,初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,它会在beforeCreate钩子之前被调用。

1、使用 import {defineComponent,ref,h} from 'vue';

 export default defineComponent({    若要获取传递给setup()的参数的类型推断,使用defineComponent是需要的。

   setup(props,context){

       props: 组件传递的参数,不要直接使用解构赋值,会使得参数失去响应性 若要解构:const { title } = toRefs(props)

       context:
              上下文对象            对应之前vue2的
                   context.attrs    this.$attrs      组件标签上的属性(非响应式对象)
                   context.slots     this.$slots     插槽(非响应式对象)
                   context.emit      this.$emit         标签上自定义的触发事件(方法)
                   context.emit('自定义事件名',参数)
               
              无法访问:因为是在组件创建实例之前指向
                   data
                   computed
                   methods

 

             解构:
                 context是一个普通的JavaScript对象,也就是说,它不是响应式的,可以直接解构
                 但attrs和slots内部的属性是会随组件本身的更新而更新,避免对内部的属性进行解构,并始终以attrs.x或 slots.x的方式使用
                
          this指向问题:
               因为setup()是在解析其它组件选项之前被调用的,所以setup()内部的this的行为与其它选项中的this完全不同
        
           更好的模块化问题:
               可以从其他文件引入函数等,然后在setup中执行,其他文件中可以使用v3的组合式api(需先导入),但必须在setup中调用

   }

 })