vue中forceupdate的使⽤
vue中$forceUpdate的使⽤
登录 2019-03-28 简单总浏览：46今⽇浏览：4
怎么给数组赋值
vue中的$forceUpdate是强制更新的意思，之前没太怎么⽤过，最近看了下，觉得还挺有意思的，⼀起来看看是咋⽤的。
深结构数据
⾸先我们知道在vue中，数据的绑定都不⽤我们操⼼，例如在data中有⼀个msg的变量，你修改它，那么在页⾯上，msg的内容就会⾃动发⽣变化。但是如果对于⼀个复杂的对象，例如⼀个对象数组，你直接去给数组上某⼀个元素增加属性，或者直接把数组的length变成0，vue 就⽆法知道发⽣了改变。
=> (⼆维码)
上⾯的demo就是⼀个对象数组，我们尝试直接给某个item增加⼀个属性，发现页⾯上没有效果；直接将length变成0来清空数组，也没有效果，关键代码如下：
1. change: function(index) {//增加性别属性
2.    this.list[index].sex = '男';
3. },
4. clear: function() {//清空数组
5.    this.list.length = 0;
6. }
其实呢，上⾯的写法没有效果，是因为没有按照vue的规范去写，因为vue⽂档⾥⾯写了，对于深层的，最好⽤$set⽅法，这样vue就可以知道发⽣了变化，同时vue也不建议直接修改length，可以给⼀个空数组来置空。
=> (⼆维码)
上⾯是我们按照vue的规范去写的，是可以实现变化的，关键代码如下：
1. change: function(index) {//增加性别属性
2.    this.$set(this.list[index],'sex','男')
3. },
4. clear: function() {//清空数组
5.    this.list=[];
6. }
可是如果我们不想利⽤$set去设置，⾮要按照我们第⼀种⽅式去写，可以实现么？答案是可以的，就是利⽤$forceUpdate了，因为你修改了数据，但是页⾯层没有变动，说明数据本⾝是被修改了，但是vue没有监听到⽽已，⽤$forceUpdate就相当于按照最新数据给渲染⼀下。
=> (⼆维码)
关键代码如下：
1. change: function(index) {
2.    this.list[index].sex = '男';
3.    this.$forceUpdate();
4. },
5. clear: function() {
6.    this.list.length = 0;
7.    this.$forceUpdate();
8. }
$children
$children表⽰当前页⾯的组件个数，但是如果直接在页⾯上引⽤{{$children}}，往往得不到正确的结果：
=> (⼆维码)
这个和vue内部的实现机制有关，（vue不同版本可能不⼀定有此问题），可以看到，当我们⽤$forceUpdate之后，就会得到正确的结果。当然，⼀般我们也不会这么去使⽤，我们可以在data⾥⾯定义⼀个变量，在mounted之后给变量赋值this.$children.length；或者直接在mounted之后使⽤$forceUpdate强制刷新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。