• optionsAPI(vue2)

    export default {
      name: 'baseData', 
      computed:{}//设置计算属性
      data() {return {} },//定义状态
      methods: {},  //定义事件方法
      watch:{} //设置监听属性
    }
    </script>
    
    • 约定在什么位置做什么事,顺其自然地强制了代码分割

      • data里面定义状态
      • methods里面设置事件方法
      • props里面设置接收参数
      • computed里面设置计算属性
      • watch里面设置监听属性
    • 问题

      • 不能很好地模块化拆分,进行相同的功能逻辑代码复用和维护

        vue2.x解决代码复用方案

        • a. 局部组件混入

          • 优先级
            • 组件datamethods优先级高于mixindatamethods
            • 先执行mixin的生命周期函数,再执行组件里面的
        • b. 全局混入

          • app.mixin({})
        • c. 自定义属性

          • 优先级
            • 组件中的属性优先级高于mixin里的属性优先级
              • {{this.$options.dream}}
            • 可以修改优先级合并策略
              • app.config.optionMergeStrategies.number = (mixinV,appV)=>mixinV || appV
  • 组合式API(Vue3)

    延伸:react hooks(翻译,钩子)介绍

    Hooks是一个新的React特性提案,组件尽量写成纯函数,如果需要外部React特性(比如状态管理,生命周期),就用钩子把外部特性"钩"进来,通常函数名字都是以use开头。首次在v16.7.0-alpha版本中添加,在v16.8.0中正式发布

    Hooks产生的背景

    • 跨组件复用stateful logic十分困难 使用Hooks,你可以在将含有state的逻辑从组件中抽象出来,这将可以让这些逻辑容易被测试。同时,Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。

    • 复杂的组件难以理解 Hooks允许您根据相关部分(例如设置订阅或获取数据)将一个组件分割成更小的函数,而不是强制基于生命周期方法进行分割

    • 不止是用户,机器也对Classes难以理解 Hooks让你可以在classes之外使用更多React的新特性

    vue_hooks:**

    vue3.0当中为了代码更好的复用,借鉴Hooks这个概念,新增组合式API,setup()是它的入口函数

    setup()执行的的时间在beforecreated之前,所以内部不能使用this;

    vue3当中就用getCurrentInstan来作为上下文环境

    • 想要大量复用逻辑代码,自定义hooks
    • 介绍
      • 是Vue3.0版本更新的新特性,简称组合api
      • 改变了以往的开发方式和开发体验,
      • 极大地提升了性能和代码逻辑复用性
      • 灵活性更强
      • 提升了项目可维护性
    • 约定所有代码都组织在setup方法里面,通过组合api分离相同功能的逻辑代码,并切割成各种模块导入导出使用

    setup():

    <template>
      <button @click="getData"> {{ text }}</button>
    </template>
    <script>
    import { ref} from 'vue'
    export default {
      name: "useAxios",
      setup() {   //组合API)的入口
         let text = ref('data') 
        const getData =  () => {}  
        return {
          text,  //属性
          getData,   //方法
        }
      }
    }
    </script>
    
    • setup函数是 Composition API(组合API)的入口

      执行时机 :

      • beforeCreate之前执行一次
      • 此时组件实例对象还没创建,this是undefined,也就不能访问data/computed/methods/props
      • 所有的组合api都在此方法里使用

      返回值:

      • 正常返回一个对象
        • 视图提供数据
        • 返回对象里的属性会与data方法的返回对象里的属性合并成为组件对象的属性
        • 返回对象里的方法会与methods对象中的方法合并成为组件对象的方法
        • 如果有重名, setup优先
          • 重名是一种不规范的表现
      • 非正常返回一个函数
        • return ()=> h('h1',{title:'返回函数'},[1,2,3])

      注意事项:

      • 尽量不要和vue2.x的约定理念混合使用
        • methods中可以访问setup方法的返回对象的属性和方法
          • this.$options.setup()
        • setup里没有this,也就不能访问datamethods
      • async函数的返回是Promise对象,所以setup不能是async

      参数:
      setup(props, context)

  • setup(props, {attrs, slots, emit})
  • props
    • 包含props配置声明且传入了的所有属性的对象

i. context参数

  • const {attrs,slots,emit} = context
    • attrs:包含没有在props配置中声明的属性的对象,相当于 this.$attrs
      • 接收 Non-Props
        • 组件传值,没有通过在props:[]里接收
      • attrs.xxx
    • slots:包含所有传入的插槽内容的对象,相当于this.$slots
      • slots.default()
        • 匿名插槽
      • slots.插槽名称()
        • 具名插槽
    • emit:用来分发自定义事件的函数,相当于this.$emit
      • 发射自定义事件
      • 把子组件的状态传到父组件
Logo

前往低代码交流专区

更多推荐