vue.set
介绍:
向响应式对象中添加一个属性, 并确保这个新属性同样是响应式的, 且触发视图更新. 它必须用于向响应式对象上添加新属性.
他的意思就是说, 当 vue 的一个实例对象更新时, vue 是无法检测到实例变化的, 所以也不会触发视图更新, 我们来看一个例子:
- <template>
- <div>
- <Button @click="add"> 增加数组的东西 </Button>
- <div>{{set}}</div>
- </div>
- </template>
- <script>
- import Vue from 'vue';
- export default{
- data () {
- return {
- set:{a:111,b:222}
- }
- },
- methods: {
- add(){
- this.set.c = 333;
- console.log(this.set);
- }
- }
- </script>
- <style>
- </style>
我们来看一下没有点击按钮之前页面的效果:
这时候我们点击一下按钮, 触发:
this.set.c = 333;
这时候我们查看一下控制台打印:
我们可以发现 c:333 已经添加到了实例对象中, 我们来看一下现在的页面上的内容:
页面中的内容没有改变, 也就是说虽然实例对象已经改变了, 但是 vue 并不会触发视图更新.
下面我们来看一下 Vue.set 命令, 修改一下上边的代码.
- <template>
- <div>
- <Button @click="add"> 增加数组的东西 </Button>
- <div>{{set}}</div>
- </div>
- </template>
- <script>
- import Vue from 'vue';
- export default{
- data () {
- return {
- set:{a:111,b:222}
- }
- },
- methods: {
- add(){
- Vue.set(this.set,'c','333');
- }
- }
- </script>
- <style>
- </style>
然后我们点击一下按钮, 查看一下页面:
由此我们可以看到, 使用 Vue.set 便可以对视图进行更新.
除了使用 Vue.set 之外, 我们还可以使用 this.$set, 这也是全局 Vue.set 方法的别名.
您的批评是对我最大的鼓励, 欢迎指正.
来源: http://www.bubuko.com/infodetail-3133696.html