Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup

1. OptionsAPICompositionAPI
  • Vue2API设计是Options(配置)风格的
  • Vue3API设计是Composition(组合)风格的

Options API的弊端:
Options类型的API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamothodscomputed,不便于维护和复用

Composition API的优势:
可以用函数的方式,更加优雅的组织代码,让相关公告的代码更加有序的组织在一起

Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup_第1张图片
说明:以上四张动图原创作者:大帅老猿

2. setup
  1. 概述:
    setupVue3中一个新的配置项,值是一个函数,它是Composition API"表演的舞台",组件中所用到的:数据、方法、计算属性、监视…等等,均配置在setup
  2. 特点:
    1. setup函数返回的对象中的内容,可直接在模板中使用
    2. setup中访问thisundefined
    3. setup函数会在beforeCreate之前调用,它是"领先"所有钩子执行的
  3. 注意:
  1. 选项式写法和setup混写的话:datamethods等中可以访问setup中定义的数据,但是setup中不能访问data等中定义的数据
  1. 示例:

    1. App.vue
      Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup_第2张图片

    2. Person.vue
      Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup_第3张图片

  2. setup语法糖

    1. Person.vue
      Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup_第4张图片

    2. 浏览器效果
      Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup_第5张图片

    注意哦?我们是在Person.vue组件中写的代码,通常Person也就是我们的组件名称。但是不排除我们有时候组件名称与组件文件名不一致,需要我们自定义组件名称,此时呢,我们需要在

你可能感兴趣的:(#,vue3,学习路程,vue.js,学习,前端)