mixin混入 $nextTick函数的应用

最新推荐文章于 2024-10-05 01:22:45 发布

如果决定要走又何必挽留

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量693

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_59076775/article/details/121596103

版权

Vue 专栏收录该内容

59 篇文章 7 订阅

订阅专栏

本文探讨了Vue.js中的mixin功能如何封装公共组件逻辑，并强调了变量和生命周期冲突处理。同时，深入讲解了$nextTick在异步DOM更新中的应用，展示了其在批量渲染和处理DOM操作中的关键作用。

摘要由CSDN通过智能技术生成

一.mixin的使用

（1）作用: 可以理解成一个公共组件的封装（但该组件没有html与css）

（2）特点:如果有变量冲突之类，以原组件为主，生命周期混入组件先执行

（3）使用:全局mixin:所有的组件都会和该混入组件和成一个新的组件

(4)代码验证:

index.js

export default {
  data() {
    return {
      name: "钢铁的意志",
    };
  },
};

main.js

import mixins from "@/mixin/index";
Vue.mixin(mixins);

APP.vue

<template>
  <div class="">
    <h1>{{ name }}</h1>
  </div>
</template>

图示:

(5):验证变量冲突的时候以原文件为主:

( 6) 验证生命周期冲突时候

(7) 局部混入的使用

作用: 当前组件和该混入组件组成一个新的组件

使用:在要使用的组件里

import mixins from "@/mixin/index";
mixins:[mixins]

二.$nextTick的应用

(1) 作用:Vue提供的一个Api，会在DOM异步渲染完之后执行这个函数，Vue在异步渲染的时候是批量进行渲染

代码:

<template>
  <div class="">
    <ul ref="aa">
      <li v-for="(item, index) in arr" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="fn">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [10, 20, 30],
    };
  },
  name: "",
  methods: {
    fn() {
      this.arr.push(Math.random());
      const aa = this.$refs.aa;
      const length = aa.childNodes.length;
      console.log("length", length);
    },
  },
};
</script>

解析:点击按钮时候往数组里面push一个元素，打印长度。

(2) 在使用$nextTick的时候

  methods: {
    fn() {
      this.arr.push(Math.random());
      this.$nextTick(() => {
        const aa = this.$refs.aa;
        const length = aa.childNodes.length;
        console.log("length", length);
      });
    },
  },

(3）验证是批量进行渲染

  methods: {
    fn() {
      this.arr.push(Math.random());
      this.arr.push(Math.random());
      this.arr.push(Math.random());
      this.$nextTick(() => {
        const aa = this.$refs.aa;
        const length = aa.childNodes.length;
        console.log("length", length);
      });
    },
  },
};

解析: 添加3个随机数，但是只进行打印了一次。批量进行渲染。