믹스인이란 무엇입니까? Vue에서 Mixin 믹싱을 이해하도록 안내합니다.

믹스인이란 무엇인가요? 이 글은 Vue에서 Mixin 믹싱을 소개하고 Mixin과 Vuex의 차이점을 소개하며 Mixin을 사용하는 방법이 도움이 되기를 바랍니다.

이제 Vue 프레임워크는 기본적으로 프런트엔드의 절반을 차지하고 있으며, Vue의 데이터 중심, 컴포넌트 기반 아이디어는 사람들의 마음속에 깊이 뿌리내리고 있습니다. Vue Family Bucket은 많은 친구들에게 친숙할 수 있으며 직장에서도 비교적 사용하기 쉽습니다. 그런데 오늘 말씀드리는 Vue의 Mixin을 아직 모르거나 사용해보지 않은 친구들이 많을 거라 생각합니다. 혹은 다른 사람의 Vue 프로젝트를 넘겨받았을 때 그 안에 Mixin 폴더가 있는 것을 본 친구들도 있을 것입니다. 그들도 사용하지만 항상 혼란스러운 상태입니다. 오늘은 Mixin에 대해 이야기하고 앞으로는 혼란을 피하기 위해 노력하겠습니다. [관련 추천 : vuejs 영상 튜토리얼]

1. Mixin이란?

물건이나 도구를 사용하려면 먼저 그것이 무엇인지 이해해야 올바른 약을 복용할 수 있습니다.

사실 Mixin은 Vue만의 것이 아닙니다. 아이디어라고 할 수도 있고, mixin이라는 뜻도 있습니다. 여기서 주로 설명하는 것은 Vue에서의 Mixin입니다.

기존 규칙, 먼저 공식 문서를 읽어보세요.

공식 설명:

Mixins는 Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법을 제공합니다. 믹스인에는 모든 구성 요소 옵션이 포함될 수 있습니다. 구성 요소가 믹스인을 사용하면 해당 믹스인의 모든 옵션이 구성 요소 자체의 옵션에 "혼합"됩니다.

공식 설명은 전문적이고 정확해야 하기 때문에 일반적으로 모호하고 이해하기 어렵습니다!

Vue에서 Mixin이 무엇인지 이해하기 쉽게 우리 자신의 말로 말할 수 있습니다.

민속적 설명:

어떤 구성요소를 사용해야 하는지 공개 로직이나 구성을 추출하면 추출된 부분을 구성요소에 직접 혼합하면 됩니다. 이렇게 하면 코드 중복이 줄어들 뿐만 아니라 나중에 유지 관리도 더 쉬워집니다.

여기서 주목해야 할 점은 추출되는 것은 HTML 코드나 CSS 코드가 아닌 로직이나 구성이라는 것입니다. 실제로 마음을 바꿀 수도 있습니다. Mixin은 구성 요소 내의 구성 요소입니다. Vue 구성 요소화를 사용하면 구성 요소 간에 중복되는 부분이 있는 경우 Mixin을 사용하여 분리합니다.

2. Mixin과 Vuex의 차이점은 무엇인가요?

위의 요점은 Mixin이 공개 부분을 추상화하는 함수라고 말합니다. Vue에서 Vuex 상태 관리는 동일한 작업을 수행하는 것으로 보이며 구성 요소 간에 공유될 수 있는 데이터도 추출합니다. 둘은 같아 보이지만 실제로는 미묘한 차이가 있습니다.

• Vuex 공개 상태 관리, Vuex의 특정 데이터가 하나의 컴포넌트에서 변경되면 해당 데이터를 참조하는 다른 모든 컴포넌트가 해당 데이터를 참조합니다. Vuex에서도 그에 따라 변경됩니다.
• Mixin의 데이터와 메소드는 독립적이며 구성 요소는 사용 후 서로 영향을 미치지 않습니다.

3. 사용 방법은?

Mixin의 개념을 이해했는데 어떻게 사용하나요? 이것이 우리의 초점입니다.

3.1 준비

다음으로 우리 믹스인은 Vue2.x 스캐폴딩 프로젝트에서 시연될 것입니다.

Vue-cli를 사용하여 가장 간단한 프로젝트를 초기화하세요.

3.1 mixin 정의

mixin을 정의하는 것도 매우 간단합니다. 단지 객체일 뿐이지만 이 객체는 Vue 구성 요소에 몇 가지 공통 구성 요소를 포함할 수 있습니다. . 데이터, 메소드, 생성 등의 구성

프로젝트의 src 디렉터리에 새 mixin 폴더를 만든 다음 mixin 코드를 저장하는 새 index.js 파일을 만듭니다.

코드는 다음과 같습니다.

// src/mixin/index.js
export const mixins = {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

우리 믹스인은 매우 간단하고 주로 Vue 구성 요소의 공통 논리 구조를 포함하고 있음을 알 수 있습니다.

다음으로 간단히 믹스인에 무언가를 작성해 보겠습니다. 코드는 다음과 같습니다.

export const mixins = {
  data() {
    return {
      msg: "我是小猪课堂",
    };
  },
  computed: {},
  created() {
    console.log("我是mixin中的created生命周期函数");
  },
  mounted() {
    console.log("我是mixin中的mounted生命周期函数");
  },
  methods: {
    clickMe() {
      console.log("我是mixin中的点击事件");
    },
  },
};

3.2 로컬 믹스인

공개 믹스인을 정의한 후 가장 중요한 것은 어떻게 사용하느냐입니다. 다양한 비즈니스 시나리오에 따라 로컬 혼합과 글로벌 혼합의 두 가지 유형으로 나눌 수 있습니다. 이름에서 알 수 있듯이 로컬 믹싱은 요청 시 컴포넌트를 로딩하는 것과 다소 유사합니다. 즉, 믹스인의 코드를 사용해야 하는 경우 컴포넌트 장에서 소개하겠습니다. 글로벌 믹싱이란 프로젝트의 모든 구성요소에서 믹스인을 사용할 수 있다는 것을 의미합니다.

컴포넌트에 mixin을 도입하는 것도 매우 간단합니다. App.vue 컴포넌트를 약간 수정해 보겠습니다.

코드는 다음과 같습니다.

// src/App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import { mixins } from "./mixin/index";
export default {
  name: "App",
  mixins: [mixins],
  components: {},
  created(){
    console.log("组件调用minxi数据",this.msg);
  },
  mounted(){
    console.log("我是组件的mounted生命周期函数")
  }
};
</script>

효과는 다음과 같습니다.

上段代码中引入mixin的方法也非常简单，直接使用vue提供给我们的mixins属性：mixins:[mixins]。

通过上面的代码和效果我们可以得出以下几点：

• mixin中的生命周期函数会和组件的生命周期函数一起合并执行。
• mixin中的data数据在组件中也可以使用。
• mixin中的方法在组件内部可以直接调用。
• 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。

问题提出：

这里我们就提出了一个问题：一个组件中改动了mixin中的数据，另一个引用了mixin的组件会受影响吗？

答案是不会的！

我们可以尝试一下：

在src下的components文件夹下新建demo组件，代码如下：

// src/components/demo.vue
<template>
  <div>mixin中的数据：{{ msg }}</div>
</template>
<script>
import { mixins } from "../mixin/index";
export default {
  mixins: [mixins],
};
</script>

然后在App.vue组件中引入demo组件，代码如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="clickMe">点击我</button>
    <button @click="changeMsg">更改mixin数据</button>
    <demo></demo>
  </div>
</template>

<script>
import { mixins } from "./mixin/index";
import demo from "./components/demo.vue";
export default {
  name: "App",
  mixins: [mixins],
  components: { demo },
  created() {
    console.log("组件调用minxi数据", this.msg);
  },
  mounted() {
    console.log("我是组件的mounted生命周期函数");
  },
  methods: {
    changeMsg() {
      this.msg = "我是变异的小猪课堂";
      console.log("更改后的msg:", this.msg);
    },
  },
};
</script>

代码解释：

• 我们在demo组件中引入了mixin，且使用了mixin中的msg数据。
• 在App.vue中同样引入了mixin，且设置了点击事件更改msg
• 点击按钮，更改msg，查看demo组件中显示是否有变化。

效果如下：

可以看到我们在App.vue组件中更改了msg后，demo组件显示没有任何变化，所以这里我们得出结论：不同组件中的mixin是相互独立的！

3.3 全局混入

上一点我们使用mixin是在需要的组件中引入它，我们也可以在全局先把它注册好，这样我们就可以在任何组件中直接使用了。

修改main.js，代码如下：

import Vue from "vue";
import App from "./App.vue";
import { mixins } from "./mixin/index";
Vue.mixin(mixins);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

然后把App.vue中引入mixin的代码注释掉，代码如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="clickMe">点击我</button>
    <button @click="changeMsg">更改mixin数据</button>
    <demo></demo>
  </div>
</template>

<script>
// import { mixins } from "./mixin/index";
import demo from "./components/demo.vue";
export default {
  name: "App",
  // mixins: [mixins],
  components: { demo },
  created() {
    console.log("组件调用minxi数据", this.msg);
  },
  mounted() {
    console.log("我是组件的mounted生命周期函数");
  },
  methods: {
    changeMsg() {
      this.msg = "我是变异的小猪课堂";
      console.log("更改后的msg:", this.msg);
    },
  },
};
</script>

效果如下：

可以发现效果上和局部混入没有任何区别，这就是全局混入的特点。

虽然这样做很方便，但是我们不推荐，来看看官方的一段话：

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

3.4 选项合并

上面的列子中我们仔细看会发现一个问题：mixin中定义的属性或方法的名称与组件中定义的名称没有冲突！

那么我们不禁会想，如果命名有冲突了怎么办？

我们使用git合并代码的时候经常会有冲突，有冲突了不要怕，我们合并就好了。这里的冲突主要分为以下几种情况：

（1）生命周期函数

确切来说，这种不算冲突，因为生命周期函数的名称都是固定的，默认的合并策略如下：

• 先执行mixin中生命周期函数中的代码，然后在执行组件内部的代码，上面的例子其实就很好的证明了。

（2）data数据冲突

当mixin中的data数据与组件中的data数据冲突时，组件中的data数据会覆盖mixin中数据，借用官方的一段代码：

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

可以看到最终打印的message是组件中message的值，其它没有冲突的数据自然合并了。

（3）方法冲突

这种冲突很容易遇到，毕竟大家命名方法的名字很容易一样，这里同样借用官方的一段代码：

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

上段代码中mixin和组件中都有conficting方法，但是最终在组件中调用时，实际调用的是组件中的conflicting方法。

当然，如果你要自定义合并规则也不是不可以，但是我觉得没有必要，项目中无需做这么复杂。

4. mixin的优缺点

从上面的例子看来，使用mixin的好处多多，但是凡是都有两面性，这里总结几点优缺点供大家参考：

4.1 장점

• 코드 재사용성 향상
• 상태 전송 불필요
• 관리가 쉽고 한 곳만 수정하면 됨

4.2단점

• 이름 충돌
• It 유지 관리가 어려울 것입니다 나중에 남용하면
• 소스를 추적하기 어렵고 문제를 해결하는 것이 조금 번거롭습니다.
• 코드를 쉽게 반복할 수 없습니다.

요약

mixin은 우리에게 편리함을 제공하지만 재앙을 가져옵니다. 이므로 많은 경우 남용하지 않는 것이 좋습니다. 그러나 일부 시나리오에서는 사용하는 것이 매우 적절하므로 스스로 선택해야 합니다. 따라서 많은 경우 공용 구성 요소를 사용할지, 아니면 믹스인을 사용할지 고려해야 합니다.

(학습 영상 공유: vuejs 튜토리얼, 웹 프론트엔드)

위 내용은 믹스인이란 무엇입니까? Vue에서 Mixin 믹싱을 이해하도록 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!