Vue中，$forceUpdate()、Vue.set、this.$set的使用

API — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/api/#vm-set在Vue官方文档中介绍，$forceUpdate()、Vue.set、this.$se具有强制刷新的作用。

 

 

 调用强制更新方法this.$foreceUpdate（）更新视图和数据，触发updated生命周期

<template>
  <div>
    <div>
      姓名:{{ user.name }}--- 年龄：{{ user.age }} ---性别：{{ user.stature }}
    </div>
    <button @click="change">修改</button>
    <button @click="del">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        age: 100,
        name: "张三",
      },
      list: ["张三", "李四", "王五"],
    };
  },
  methods: {
    change() {
      this.user.stature = "男";
      this.$forceUpdate();
    },
    del() {
      this.$delete(this.user, "name");
    },
  },
};
</script>

<template>
  <div class="home">
    <div>{{ student }}</div>
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    <button @click="btn()">修改</button>
    <button @click="btns()">修改</button>
  </div>
</template>

<script>
import Vue from "vue"; // 别忘了引入
export default {
  name: "Home",
  data() {
    return {
      student: {
        name: "张三",
      },
      items: [1, 2, 3],
    };
  },
  methods: {
    btn() {
      Vue.set(this.student, "age", 18);
      Vue.set(this.items, 1, "two");
      console.log(this.student, this.items);
    },
    btns() {
      this.$set(this.student, "age", 18);
      this.$set(this.items, 1, "two");
      console.log(this.student, this.items);
    },
  },
};
</script>

这两个api的实现原理基本一模一样，都是使用了set函数。set函数是从../observer/index文件中导出的，区别在于Vue.set()是将set函数绑定在Vue构造函数上，this.set()是将set函数绑定在Vue原型上,多能解决视图和数据多同时变化。