vue2高级用法

angelCopy
111 阅读1分钟

1.mixin

1.1 使用

// mixin文件
export default {
  data() {
    return {
      msg: "这是默认值",
    };
  },
  methods: {
    changeMsg(val) {
      this.msg = val;
    },
  },
  created() {
    console.log("这是mixin的created", this.msg);
    this.changeMsg("这是mixin的created");
  },
  mounted() {
    console.log("这是mixin的mounted", this.msg);
  },
};



// 组件内部
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import MsgMixin from "@/mixins/msg";
export default {
  name: "HelloWorld",
  mixins: [MsgMixin],
  data() {
    return {
      msg: "121212",
    };
  },
  methods: {
    changeMsg() {},
  },
  created() {
    console.log("这里是组件内部的created");
  },
  mounted() {
    console.log("这里是组件内部的mounted");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

image.png

1.2 执行规则

mixin和组件中存在冲突时，如生命周期、data中的变量、methods方法时，执行顺序如下

  • 生命周期
    • 会优先执行mixin中的生命周期，然后再执行组件的生命周期
  • watch监听
    • 会优先执行mixin中的watch，然后再执行组件中的watch
  • data中的变量
    • mixin和组件中的data变量冲突时，组件的变量会覆盖mixin的变量，然后其余的变量进行合并
  • methods方法
    • mixin和组件中的methods方法冲突时，组件的方法会覆盖mixin的方法，然后其余的方法进行合并

1.3 优缺点

  • 优点
    • 代码复用
    • 定制化不同的mixin，根据组件需求灵活的添加删除mixin
    • 分离关注点，通过将特定功能的代码封装到 Mixin 中，你可以将不同关注点的代码分离开来，提高代码的可维护性和可读性。
  • 缺点
    • 命名冲突
    • 隐性依赖
      • 使用mixin可能会引入隐式依赖，因为组件行为可能会依赖于多个mixin中的选项，这可能会增加代码的复杂性，降低代码的可维护性
    • 溯源困难（复杂性增加）
      • 当项目中大量使用mixin时，可能会导致代码复杂性增加
    • 组件耦合
      • 过度使用mixin可能会导致组件之间的耦合增加，因为它们共享了一些逻辑，可能会导致组件难以维护和理解

2.动画

2.1 原生动画和动画过渡事件

<template>
  <div class="hello">
    <div id="demo">测试动画</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  mounted() {
    const demo = document.querySelector("#demo");
    // 动画开始事件
    demo.addEventListener("transitionstart", () => {
      console.log("动画开始");
    });
    
    // 动画结束事件
    demo.addEventListener("transitionend", () => {
      console.log("动画结束");
      demo.remove();
    });
  },
};
</script>

<style scoped>
#demo {
  width: 200px;
  height: 200px;
  background-color: red;
  line-height: 200px;
  text-align: center;

  /* 动画 */
  transition: all 1s;
}

#demo:hover {
  transform: translate(200px);
}
</style>

image.png

2.2 vue动画

vue动画 使用transition标签对需要进行动画效果的组件或标签进行包裹

<template>
  <div class="hello">
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="fade">
      <div id="demo" v-if="isShow">测试动画</div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
#demo {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background-color: red;
}
#demo.fade-enter,
#demo.fade-leave-to {
  width: 400px;
}
#demo.fade-enter-active,
#demo.fade-leave-active {
  transition: all 0.5s;
}
</style>

image.png

2.3 vue动画原理

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

  • 官方解释
    • 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
    • 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
    • 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
  • 理解
    • 通过v-if控制元素的显示隐藏
    • 通过transition的name属性，定义过渡动画的class
    • 通过css定义过渡动画的样式
    • 即：
      • 首先组件在即将出现时，vue将其添加到dom中，然后绑定对应的class，实现进场过渡
      • 元素退场执行完毕后（transitonend），vue会将其从dom中删除
avatar
文章
阅读
粉丝