安装 GMP、NTL、CTMalloc ，编译 OpenFHE-CFANZ编程社区

// 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()
      }
  }
}

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>