vue3的hooks与vue2的mixins用法对比

vue2的mixins写法

这是一个混入js
demoMixins.js

export default {
  data() {
    return {
      dataList: {
        initData: {
          price: 122,
          title: '当当图书系统',
          type: '考研辅导',
          url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgx.wadongxi.net%2Fitem%2Fi1%2FTB10n5oKFXXXXbXXXXXXXXXXXXX_%21%210-item_pic.jpg_400x400Q90.jpg&refer=http%3A%2F%2Fimgx.wadongxi.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636647015&t=1d73de8682aa7f14e87c377139b560b1',
        },
        dataArr: [],
      },
    };
  },
  //处理列表数据
  mounted() {
    for (let i = 0; i < 50; i++) {
      this.dataList.dataArr.push(this.dataList.initData);
    }
  },
};

demo.vue组件需要demoMixins.js的方法，处理如下

<template>
 <div
    v-for="(item, index) in dataList.dataArr"
    :key="index"
    style="display: flex; width: 500px"
  >
    <img :src="item.url" alt="" style="width: 200px; height: 200px" />
    <div style="width: 250px">
      <p>图书标题：{{ item.title }}</p>
      <p>图书类型：{{ item.type }}</p>
      <p>图书价格：{{ item.price }}</p>
    </div>
  </div>
</template>

<script>
import demoMixins from "./../hooks/demoMixins.js";
export default {
  name: "demoMixins",
  mixins: [demoMixins],
};

vue3的hooks混入写法
demoHooks.js

import { reactive } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';

export default function() {
  //处理列表数据
  let data = reactive({
    initData: {
      price: 122,
      title: '当当图书系统',
      type: '考研辅导',
      url:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgx.wadongxi.net%2Fitem%2Fi1%2FTB10n5oKFXXXXbXXXXXXXXXXXXX_%21%210-item_pic.jpg_400x400Q90.jpg&refer=http%3A%2F%2Fimgx.wadongxi.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636647015&t=1d73de8682aa7f14e87c377139b560b1',
    },
    dataArr: [],
  });
  onMounted(() => {
    for (let i = 0; i < 50; i++) {
      data.dataArr.push(data.initData);
    }
  });
  return data;
}

demoH.vue

<template>
<div
    v-for="(item, index) in dataList.dataArr"
    :key="index"
    style="display: flex; width: 500px"
  >
    <img :src="item.url" alt="" style="width: 200px; height: 200px" />
    <div style="width: 250px">
      <p>图书标题：{{ item.title }}</p>
      <p>图书类型：{{ item.type }}</p>
      <p>图书价格：{{ item.price }}</p>
    </div>
  </div>
</template>

<script>
<script>
import demoHooks from "demoHooks.js";
export default {
  name: "demoHooksfrom ",
  setup() {
    const dataList = demoHooks();
    return {  dataList };
  },
};
</script>
</script>