【vue】$nextTick、mixin的理解及使用

---

一，$nextTick

<template>
  <div>
    <ul ref="ul">
      <li v-for="(i, index) in list" :key="index">{{ i }}</li>
    </ul>

    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["a", "b", "c"],
    };
  },

  methods: {
    addItem() {
      this.list.push("d");

      // 可以先猜猜打印出的长度是几？打印出3，是不是不符合预期？
      console.log(this.$refs.ul.childNodes.length);
      /**
       * 这是因为vue是异步渲染,当data中的数据发生改变时,
       * vue并不会直接去渲染dom，
       * 如果直接渲染，那么改一次data渲染一次，对速度以及用户体验极不友好
       * 所以就有这么一个回调，当页面渲染完成后会执行，
       * 这个回调就是$nextTick
       * 使用也特别简单 */

      this.$nextTick(() => {
        // 这时候打印的就是4
        console.log(this.$refs.ul.childNodes.length);
      });
    },
  },
};
</script>

<style></style>

二，mixin

mixin其实就是将多个组件的export default 中共同的部分抽离出来，就是类似css中抽离公共样式，并不难理解，看下代码就可以明白：

<template>
  <div>
    <ul>
      <!-- 代码中的gender city 和showHobby方法并没有定义，那么是从哪里来的呢？ -->
      <li>{{ name }}</li>
      <li>{{ age }}</li>
      <li>{{ gender }}</li>
      <li>{{ city }}</li>
      <li v-if="flag">{{ hobby }}</li>
      <li></li>
    </ul>
    <button @click="showHobby">显示爱好</button>
  </div>
</template>

<script>
// 首先引入mixin
import mixin from "./mixin.js";
export default {
  // 在这里使用minxin，可以是多个，写到数组中就行，gender，city以及showHobby就在mixin这个文件内定义。
  mixins: [mixin],
  data() {
    return {
      name: "zhangsan",
      age: 18,
      flag: false,
    };
  },
};
</script>

<style></style>

mixin.js中的内容,相当于哪个组件引用这个mixin,那么这个mixin的内容就会和这个组件的内容混合到一起,比如data中的属性就会混合,mounted和methods中的方法也会混合在一起

export default {
  data() {
    return {
      gender: "男",
      city: "西安",
      hobby: "吉祥村",
    };
  },

  methods: {
    showHobby() {
      this.flag = true;
    },
  },
};

总结

• vue是异步渲染，data更新之后，并不会立即渲染dom，而是将所有的更新整合起来之后，再一次性的渲染到页面中
• $nextTick主要用在组件更新后获取最新的dom，所以如果想让组件在更新之后第一时间获取到dom元素，那么就可以使用$nextTick这个钩子
• mixin在某些场景特别好用，但也有一些缺点：比如如果是别人写的mixin，那么你就会很疑惑这个属性是从哪里来的，不利于阅读。而且会出现变量冲突，以及多对多的关系，所以mixin虽然好用，但也要慎用