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原型上,多能解决视图和数据多同时变化。