vue错题库

1.$set是干什么的

首先，Vue实现双向绑定的原理就是利用了Object.define.property，重新定义了该方法获取属性值的get和设置属性值的set的操作来实现的

想要重新添加一个新的属性值，这个方法在object.define.property中没有定义，所以不是响应式的，会导致数据发生变化时不会触发视图更新，而$set可以解决这个问题

用法：this.$set(obj, "key", "value");

例

<!-- vue中$set的用法 -->
<template>
    <div>
      <h6>$set的用法</h6>
      <div>
        姓名：{{ userMessage.name }}
        <br />
        年龄：{{userMessage.age}}
        <br />
        爱好：{{userMessage.food}}
        <br />
        说明：{{userMessage.info.content}}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userMessage: {
          name: "张小花",
          age: "16",
          message: {
            content: "最喜欢吃葡萄了",
          },
        },
      };
    },
    mounted() {
      console.log("this:", this);
      this.$set(this.userMessage, "food", "葡萄");
    }
  };
  </script>

2.$nextTick是干什么的

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

例如：在created生命周期中想要操作dom就可以使用

this.$nextTick(()=>{ ... })可以在mounted之前的生命周期中操作dom

例

1.再Dialog放入一个自定义的组件，并通过ref调用组件中的方法。

this.dialogVisible = true;
thist.$refs.editor.addNewFun();

这样调用报错：找不到addNew的定义

2.在显示出Dialog后再调用addNew()就没有问题啦

const that = this;
this.dialogVisible = true;
this.$nextTick(() => {
      that.$refs.editor.addNewFun();
});

3.mixin是干什么的

提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

例

在src中创建一个mixins.js的文件夹

//在src中创建一个mixins.js的文件夹
let mixin = {
    created(){
        console.log('我是mixin里面的created！')
    },
    methods:{
        hello(){
            console.log('你好哇！我是mixin')
        }
    }

}
export default mixin

在views中创建一个vue文件夹

<template>
  <div class="home">
    <span>这 个 是 home 页</span>
  </div>
</template>
 
<script>
import MyMixins from "../mixins";   //导入混入（mixin）
export default {
  name: 'Home',
  mixins: [MyMixins]     //使用混入（mixin）
}
</script>