Vue中的静默刷新(利用v-if实现)

最新推荐文章于 2024-08-01 14:31:14 发布

smouns_

最新推荐文章于 2024-08-01 14:31:14 发布

阅读量1.2k

点赞数 5

分类专栏： element-ui vue 文章标签：前端前端框架

本文链接：https://blog.csdn.net/smouns_/article/details/121524218

版权

vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

element-ui

10 篇文章 1 订阅

订阅专栏

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

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

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

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

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

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

2.静默更新

适用场景:数据修改,页面未刷新组件内容的还原

//在html中实现点击修改对象obj 使添加的属性b可以同步刷新到页面上显示


<!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>