vue之更改数据触发视图更新小坑

最新推荐文章于 2023-03-27 09:34:53 发布

qq_32021429

最新推荐文章于 2023-03-27 09:34:53 发布

阅读量651

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_32021429/article/details/109893059

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

更改对象数据触发视图更新

Vue 是双向数据绑定（数据更新则视图更新；试图更新后数据自动更新）。
但是在执行某些操作之后发现，更改了数据，视图却没有更新

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 style="display: none;">{{name}}</h1>
    <h2>{{obj}}</h2>
    <h3>{{arr}}</h3>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        name: '测试',
        test: 1,
        obj: {
          a: 123
        },
        arr:[1,2,3,4]
      }
    });
     vm.obj.b = 100;  // 属性加上了，但是页面中的obj并没有变
     console.log(vm.obj);

    // 视图没有更新原因：vue对一开始设定的obj、obj.a、name都进行了劫持，但是对新添加的属性 obj.b 并没有进行劫持

  </script>
</body>
</html>

解决办法

方法一：更改整个obj的地址

因为obj是被劫持的，所以整个更改obj的地址会触发视图更新

// 这样新加的属性也会被劫持，后期更改其值会触发视图更新
    vm.obj = Object.assign({
      b: 100
    }, vm.obj);
    // Object.assign(obj1,obj2)：将obj2合并到obj1上，并返回obj1的地址

方法二：借助其他被vue劫持的数据（偏方，不推荐使用）

通过借助其他被劫持的数据的改变来实现触发视图更新，表面上视图是因为加了新数据而更新了，实际上视图的更新跟新加的数据没有直接关系。

 // 新加的属性并不会被劫持，后期再更改它的值也不会触发视图更新
    vm.obj.b = 104;
    vm.name = 1; // 这里要注意一下，name这个值必须在页面中用到，否则也是不起作用的（如果不需要展示，使用display:'none'来隐藏）。假如借助的是 test，则是无效的，因为没有在页面中使用到这个值 */
   // vm.obj.b = 100;
   // vm.test = 13;

方法三：使用官方推荐：实例.$set(目标对象, 新的属性名, 属性值)

   // 新加的属性被劫持，后期更改其值会触发视图更新
    vm.$set(vm.obj, 'b', 100);
    
     /* 
     更改数据触发视图更新需要满足条件：
       1、数据是被vue劫持的;  例如 vm.name
       2、视图中有用到对应的数据;  <h1 style="display: none;">{{name}}</h1>
     */

更改数组触发视图更新方法

// 对于数组来说，通过 索引、长度 来修改数组都不会触发视图的更新
 /*    vm.arr.length = 6;  
    vm.arr[3] = 34; */

//在不改变整个数组的地址的前提下，能触发视图更新的方法有：push pop unshift shift reverse splice sort
    vm.arr.push(100);
    vm.arr.splice(2,1,30); // 将下标为2的1个元素替换成30

qq_32021429

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue之更改数据触发视图更新小坑

更改对象数据触发视图更新Vue 是双向数据绑定（数据更新则视图更新；试图更新后数据自动更新）。但是某些操作发现，更改了数据，视图却没有更新<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1 st
复制链接

扫一扫