Vue3学习笔记——Options API和组合式API

• optionsAPI(vue2)

  export default {
    name: 'baseData', 
    computed：{}，//设置计算属性
    data() {return {} },//定义状态
    methods: {},  //定义事件方法
    watch:{} //设置监听属性
  }
  </script>
  

  • 约定在什么位置做什么事，顺其自然地强制了代码分割

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

  • 问题

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

      vue2.x解决代码复用方案：

      • a. 局部组件混入

        • 优先级
          • 组件data、methods优先级高于mixin的data、methods
          • 先执行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,也就不能访问data和methods
    • 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
    • 发射自定义事件
    • 把子组件的状态传到父组件