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

news2024/11/26 10:00:06

逻辑组合/复用机制

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`）

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

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'New Message';
    }
  }
};
</script>

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

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

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    //ref函数来创建一个响应式的数据
    const message = ref('Hello Vue!');

    const changeMessage = () => {
      message.value = 'New Message';
    };

    return {
      message,
      changeMessage
    };
  }
};
</script>