vue2使用mixins和vue3使用hooks

1.vue2使用mixins

在mixins中导出一个计数器对象

//mixins/count.js   导出一个对象

export const countMixin = {
    data(){
        return {
            count:99
        }
    },
    methods:{
        increment(){
            this.count++
        },
        decrement(){
            this.count--
        }
    }
}

在需要使用的组件中进行导入以及使用；使用 mixins:[countMixin] 将混入的js文件进行导入，后可以直接当作组件内的数据使用；

//HomeView组件

<template>
  <div class="container">
    {{ count }}
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import {countMixin} from '@/mixins/count'
export default{
  mixins:[countMixin]
}

2.vue3使用hooks

在hooks导出一个计数器方法

//hooks/count.ts  导出一个方法

import { ref } from 'vue'

export function CountNum(){
    const count = ref(0)

    const increment = ()=> {
        count.value++
    }

    const decrement = () => {
        count.value--
    }

    return {
        count,
        increment,
        decrement
    }
}

在需要使用的组件导入以及结构赋值；将hooks中的count、increment和decrement结构赋值后可以在页面直接使用。

<template>
  <div class="about">
    {{ count }}
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup>
import  {CountNum}  from '@/hooks/count.ts'
const {count,increment,decrement} = CountNum()
</script>

页面效果：

 vue2计数器：

vue3计数器：

 在vue2使用mixins时，导出一个对象，对象中包含vue2选项式语法的数据格式；

vue3使用hooks时，导出一个方法，方法中可以使用vue3组合式语法setup写法，最后return对应数据后在组件中可以使用