Vue静默刷新

最新推荐文章于 2024-05-18 17:11:58 发布

原创最新推荐文章于 2024-05-18 17:11:58 发布 · 719 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端框架

在Vue开发中，遇到修改对象数据但视图未更新的情况。这是因为Vue无法检测到对象属性的动态添加。解决方法包括使用$set方法显式添加响应式属性，或者采用$nextTick进行静默更新，等待DOM更新后再显示，从而避免手动查找和设置每个属性。

在使用vue框架时,常常会出现一种状况,修改了对象数据,但是视图没变

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除,因为Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在data上存在才能让 Vue 将它转换为响应式的。

所以此时就需要解决此类问题

1.可以使用$set方法,来向对象添加响应式属性

语法: this.$set(对象,属性名,修改后的值)

但是此方法,有一个不是很友好的地方,就是你得知道是哪个数据出现了问题,才能手动设置,这样我们在处理繁多的数据时,就需要找到对应的数据,所以这里就推荐使用一种比较巧妙的方法.

2.静默更新

适用场景：数据修改了，页面没更新
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" v-if="bol">
      <h3>{{obj}}</h3>
      <button @click="btnClick">修改obj</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          bol: true,
          obj: {
            a: 1
          }
        },
        methods: {
          btnClick () {
            this.obj.b = Date.now()
             this.bol = false
            this.$nextTick(() => {
              this.bol = true
            }) 
            /* this.$set(this.obj, 'b', Date.now())
            console.log(this.obj); */
          }
        }
      })
    </script>
  </body>
</html>

使用$nextTick方法,因为dom元素在更新时，会重新读取数据，所以使用$nextTick等待dom更新完成之后再显示，就可以解决这个问题啦