（五）vue3之mixin

vue中mixin用法是一大利器，可以方便我们将组件中共同的代码抽离出来，提高代码复用性。但是mixin在vue3中有些许不同，让我们看一下变化：

1. vue3中data的变量对比是浅层次的

// app.vue
<script>
import Mixins from "./mixin.js";
export default {
  name: "App",
  mixins: [Mixins],
  data() {
    return {
      user: {
        id: 1,
      },
    };
  },
  created() {
    /**
     * vue2 user: {id: 1,name: "Jack"}
     * vue3 user: {id: 1}
     */
    console.log(this.user);
    console.log("App created");
  },
};
</script>

// mixin.js
export default {
    data() {
        return {
            user: {
                id: 1,
                name: "Jack",
            }
        }
    },
    created() {
        console.log("mixin created");
    },
}

在app.vue中，我们在data中定义了一个变量user，在mixin中也定义了一个变量user，同时在created中打印变量user。在vue2中，user变量更新为 {id: 1, name: "Jack"}，而在vue3中user变量更新为 {id: 1}。这是由于在vue3中，对data中的变量对比是浅层次的。这种做法可以避免开发者在mixin中定义了和vue组件中同名的变量，如果是对象类型，进行了深层对比合并后导致代码可读性变差和bug难以定位。

2. 生命周期minxin行为是相同的

在上面的代码中，我们在app.vue的created打印了console.log("App created")，同时在mixin.js的created打印了console.log("mixin created")。最后代码运行后依次执行console.log("mixin created")和console.log("App created")，这在vue2和vue3中的相同的。