Vue 改变数组中对象的属性不重新渲染View的解决方案

在解决问题之前，我们先来了解下 vue响应性原理： Vue最显著的一个功能是响应系统-- 模型只是一个普通对象，修改对象则会更新视图。
受到javascript的限制，Vue不能检测到对象属性的添加或删除，因为vue在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。
但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上：如下代码:

Vue.set(obj, '_isHover', true);

或者可以使用vm.$set的实列方法，也是Vue.set方法的别名：

this.$set(obj, '_isHover', false);

问题： 页面上多个item项， 当我鼠标移动上去的时候，我想在该数组中的对象添加一个属性 isHover=true, 当鼠标移出的时候，我想让该属性变为 isHover=false,然后希望改变对象的属性的时候让其重新渲染view层，重新执行rowClasses方法，然后该方法会判断 isHover是否等于true，如果为true的话，让其增加一个类名。
代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>演示Vue</title>

    <style>

      * {margin: 0; padding: 0;}

      ul, li {list-style: none;}

      #app {width: 800px; margin: 20px auto; border:1px solid #ccc; border-bottom: none;}

      #app li {height: 32px; line-height: 32px; border-bottom: 1px solid #ccc;}

      #app li.bgColor {background-color: red;}

    </style>

  </head>

  <body>

    <div id='app'>

      <ul>

        <li

          v-for="(item, index) in items"

          @mouseenter.stop="handleMouseIn(index)"

          @mouseleave.stop="handleMouseOut(index)"

          :class="rowClasses(index)"

        >

          <span>{{item.name}}</span>

        </li>

      </ul>

    </div>

  </body>

  <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script>

  <script type="text/javascript">

    new Vue({

      el: '#app',

      data: {

        items: [

          {name: 'kongzhi'},

          {name: 'longen'},

          {name: 'tugenhua'}

        ]

      },

      computed: {

      },

      methods: {

        rowClasses (index) {

          return [

            {

              [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover

            }

          ]

        },

        handleMouseIn(index) {

          if (this.$data.items[index]._isHover) {

            return;

          }

          console.log(111); // 可以执行到

          this.$data.items[index]._isHover = true;

        },

        handleMouseOut(index) {

          this.$data.items[index]._isHover = false;

        }

      }

    });

  </script>

</html>

查看效果

可以看到鼠标移动上去的时候 没有效果。

解决的方案如下：

1. 使用 Object.assign

鼠标移动上去的时候 代码可以改成如下:

this.$data.items[index]._isHover = true;

this.$data.items = Object.assign({}, this.$data.items);

鼠标移出的时候，代码改成如下：

this.$data.items[index]._isHover = false;

this.$data.items = Object.assign({}, this.$data.items);

代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>演示Vue</title>

    <style>

      * {margin: 0; padding: 0;}

      ul, li {list-style: none;}

      #app {width: 800px; margin: 20px auto; border:1px solid #ccc; border-bottom: none;}

      #app li {height: 32px; line-height: 32px; border-bottom: 1px solid #ccc;}

      #app li.bgColor {background-color: red;}

    </style>

  </head>

  <body>

    <div id='app'>

      <ul>

        <li

          v-for="(item, index) in items"

          @mouseenter.stop="handleMouseIn(index)"

          @mouseleave.stop="handleMouseOut(index)"

          :class="rowClasses(index)"

        >

          <span>{{item.name}}</span>

        </li>

      </ul>

    </div>

  </body>

  <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script>

  <script type="text/javascript">

    new Vue({

      el: '#app',

      data: {

        items: [

          {name: 'kongzhi'},

          {name: 'longen'},

          {name: 'tugenhua'}

        ]

      },

      computed: {

      },

      methods: {

        rowClasses (index) {

          return [

            {

              [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover

            }

          ]

        },

        handleMouseIn(index) {

          if (this.$data.items[index]._isHover) {

            return;

          }

          console.log(111); // 可以执行到

          this.$data.items[index]._isHover = true;

          this.$data.items = Object.assign({}, this.$data.items);

        },

        handleMouseOut(index) {

          this.$data.items[index]._isHover = false;

          this.$data.items = Object.assign({}, this.$data.items);

        }

      }

    });

  </script>

</html>

查看效果

2. 使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上。

鼠标移动上去的时候 代码可以改成如下:

this.$set(this.$data.items[index], '_isHover', true);

鼠标移出的时候，代码改成如下：

this.$set(this.$data.items[index], '_isHover', false);

所有的代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>演示Vue</title>

    <style>

      * {margin: 0; padding: 0;}

      ul, li {list-style: none;}

      #app {width: 800px; margin: 20px auto; border:1px solid #ccc; border-bottom: none;}

      #app li {height: 32px; line-height: 32px; border-bottom: 1px solid #ccc;}

      #app li.bgColor {background-color: red;}

    </style>

  </head>

  <body>

    <div id='app'>

      <ul>

        <li

          v-for="(item, index) in items"

          @mouseenter.stop="handleMouseIn(index)"

          @mouseleave.stop="handleMouseOut(index)"

          :class="rowClasses(index)"

        >

          <span>{{item.name}}</span>

        </li>

      </ul>

    </div>

  </body>

  <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script>

  <script type="text/javascript">

    new Vue({

      el: '#app',

      data: {

        items: [

          {name: 'kongzhi'},

          {name: 'longen'},

          {name: 'tugenhua'}

        ]

      },

      computed: {

      },

      methods: {

        rowClasses (index) {

          return [

            {

              [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover

            }

          ]

        },

        handleMouseIn(index) {

          if (this.$data.items[index]._isHover) {

            return;

          }

          console.log(111); // 可以执行到

          this.$set(this.$data.items[index], '_isHover', true);

        },

        handleMouseOut(index) {

          this.$set(this.$data.items[index], '_isHover', false);

        }

      }

    });

  </script>

</html>

查看效果

Vue 改变数组中对象的属性不重新渲染View的解决方案的更多相关文章

  1. array排序（按数组中对象的属性进行排序）

    使用array.sort()对数组中对象的属性进行排序 <template> <div> <a @click="sortArray()">降序& ...

  2. 利用KVC的方式更方便地获取数组中对象的属性的最值平均值等

    直接上代码 输出结果也在相应的代码里标注出来了 //main.m文件 #import <Foundation/Foundation.h> #import "Student.h&q ...

  3. JS 取Json数据中对象特定属性值

    解析JSON JSON 数据 var str = '[{"a": "1","b": "2"}, {"a&quo ...

  4. 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大

    仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图 ​ 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...

  5. js sort方法根据数组中对象的某一个属性值进行排序（实用方法）

    js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...

  6. js对象数组中的某属性值 拼接成字符串

    js对象数组中的某属性值 拼接成字符串 var objs=[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, {id:4,name:'赵六' ...

  7. JavaScript中对象的属性

    在JavaScript中,属性决定了一个对象的状态,本文详细的研究了它们是如何工作的. 属性类型 JavaScript中有三种不同类型的属性:命名数据属性(named data properties) ...

  8. Day_12【集合】扩展案例1_利用集合的知识对长度为10的int数组进行去重,产生新数组,不能改变数组中原来数字的大小顺序

    分析以下需求,并用代码实现 1.定义一个长度为10的int数组,并存入10个int类型的数据,其中有一些数据是重复的 2.利用集合的知识对数组进行去重,产生新数组,不能改变数组中原来数字的大小顺序 3 ...

  9. java 对list中对象按属性排序

    实体对象类 --略 排序类----实现Comparator接口,重写compare方法 package com.tang.list; import java.util.Comparator; publ ...

随机推荐

  1. Strust2框架笔记01_XML配置_action编写

    目录 1.Struts2概述 1.1 什么是Struts2 1.2 Web层框架基于前端控制器模型设计 2. Struts2入门案例 2.1 Struts2的开发环境 2.2 解压开发包 2.3 创建 ...

  2. Java 雇员管理小练习（理解面向对象编程）

    在学习集合框架的时候,初学者很容易练习到学生管理系统.雇员管理体统等练习题.在学习集合框架之前,基本上Java基本语法都学完了,集合框架也从侧面的检验对前面学习的理解.下面用一个曾经做过的练习题,回顾 ...

  3. 性能监控(5)–JAVA下的jstat命令

    jstat的基本语法为 Usage: jstat -help|-options jstat -<option> [-t] [-h<lines>] <vmid> [& ...

  4. webpack2利用插件clean-webpack-plugin来清除dist文件夹中重复的文件

    配置文件如下 /** * Created by oufeng on 2017/5/6. */ const webpack = require('webpack'); const path = requ ...

  5. switch和if语句

    if :基本语法: 1.单分支语句 : if(条件){代码块}else{代码块} 2.多分支语句 :if(条件){代码块} else if(条件){代码块}else{代码块} * 不要忘记添加else ...

  6. php服务器代理解决浏览器跨越问题

    详见代码 <?php $url = $_SERVER["QUERY_STRING"]; switch ($_SERVER['REQUEST_METHOD']) { case ...

  7. ES6模块化与常用功能

    目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...

  8. JMeter 查看结果树监听器响应数据中文显示乱码解决方法

    查看结果树监听器响应数据中文显示乱码解决方法 by:授客 QQ:1033553122   问题描述 使用监听器-查看结果树(View Results Tree Listener)过程中发现,响应数据面 ...

  9. 《ASP.NET MVC企业实战》(三)MVC开发前奏

    ​ 在上一篇“<ASP.NET MVC企业级实战>(二)MVC开发前奏”中跟随作者大概了解了一些C#3.0和3.5中的新特性.本篇继续以这样的方式来学习C#中的一些特性.   一.C#3. ...

  10. Android Studio 通过一个登录功能介绍SQLite数据库的使用

    前言: SQLite简介:是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在 ...