vue2【Options 选项API、mixin混入】，vue3【Composition 合成API、hooks】

目录

逻辑组合/复用机制

mixin混入状态复用【官方不推荐使用】

生命周期合并

同名覆盖

难溯源

hooks钩子【只能在setup生命周期中用】

 ref ()、reactive()=useState 

computed()=useMemo

自定义： useXxx 

示例

Vue2 ：Options API选项类型（属性data、methods、computed）

Vue3 ：Composition API合成型(函数定义组件逻辑，不同组件中可复用)

Vue3.0 暴露变量必须 return 出来，template 中才能使用

Vue3.2 中 只需要在 script 标签上加上 setup 属性

逻辑组合/复用机制

mixin混入状态复用【官方不推荐使用】

生命周期合并

同名覆盖

难溯源

// mixin1
export default {
  created() {
      console.log('我是ikun一号')
  },
  method: {
      sayKunkun() {
          console.log('kunkun好帅~')
      }
  }
}

// mixin2
export default {
  method: {
      say() {
          this.sayKunkun();
      }
  }
}

// index.vue
export default {
  mixins: [mixin1, mixin2],
  created() {
      this.say()
      this.love()
  },
  method: {
      say() {
          console.log('index.vue ikun')
      },
      love() {
          this.sayKunkun()
      }
  }
}

我是ikun一号
index.vue ikun
kunkun好帅~

• mixin的 craeted 和 index.vue 的 created 合并执行了
• index.vue 的 say 函数顶掉了 mixin 的 say 函数
• mixin2 居然能访问到 mixin1 的 sayKunkun 函数

hooks钩子【只能在setup生命周期中用】

“高度聚合，可阅读性提升”。伴随而来的便是 “效率提升，bug变少”

 ref ()、reactive()=useState 

computed()=useMemo

自定义： useXxx 

示例

Vue2 ：Options API选项类型（属性data、methods、computed）

选项在组件实例化后会被合并到组件实例中，可以在组件内部访问和使用。

Vue3 ：Composition API合成型(函数定义组件逻辑，不同组件中可复用)

Vue3.0 暴露变量必须 return 出来，template 中才能使用

Vue3.2 中 只需要在 script 标签上加上 setup 属性