计算属性computed侦听器watch

最新推荐文章于 2024-09-28 12:20:17 发布
最新推荐文章于 2024-09-28 12:20:17 发布
阅读量690 收藏 23
点赞数 9
分类专栏： Vue2 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/135991533
版权

文章目录

一、计算属性computed

1.1. 概念：

  • 基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。
  • 计算属性会对计算出来的结果缓存，再次使用直接读取缓存，只有依赖项变化了才会自动重新计算，并再次缓存

1.2. 语法

  • 声明在 computed 配置项中，一个计算属性对应一个函数
  • 使用起来和普通属性一样使用 {{ 计算属性名}}

在这里插入图片描述

1.3. 注意

  • computed配置项和data配置项和methods配置项是同级的
  • computed中的计算属性不能和data中的属性同名，使用方式和data中的属性一样
  • computed中计算属性内部的this指向的是Vue实例

1.4. 完整写法

  • 计算属性默认的简写，只能读取访问，不能 “修改”。
  • 如果要 “修改” → 需要写计算属性的完整写法（读取访问出发getter，修改出发setter）。
    在这里插入图片描述

1.5. 计算属性禁用箭头函数

注意，不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例(组件实例)，this.a 将是 undefined。

1.5. 案例

在这里插入图片描述

<!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>
    <style>
      table {
        border: 1px solid #000;
        text-align: center;
        width: 240px;
      }

      th,
      td {
        border: 1px solid #000;
      }

      h3 {
        position: relative;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h3>小黑的礼物清单</h3>
      <table>
        <tr>
          <th>名字</th>
          <th>数量</th>
        </tr>
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.num }}个</td>
        </tr>
      </table>

      <!-- 目标：统计求和，求得礼物总数 -->
      <p>礼物总数：{{ totalCount }} 个</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          // 现有的数据
          list: [
            {
              id: 1,
              name: "篮球",
              num: 1,
            },
            {
              id: 2,
              name: "玩具",
              num: 2,
            },
            {
              id: 3,
              name: "铅笔",
              num: 5,
            },
          ],
        },
        computed: {
          totalCount() {
            // 基于现有的数据，编写求值逻辑
            // 计算属性函数内部，可以直接通过 this 访问到 app 实例
            // console.log(this.list)

            // 需求：对 this.list 数组里面的 num 进行求和 → reduce
            let total = this.list.reduce((sum, item) => sum + item.num, 0);
            return total;
          },
        },
      });
    </script>
  </body>
</html>

1.6. 计算属性 vs 方法

computed计算属性

  • 作用：封装了一段对于数据的处理，求得一个结果

语法：

  • 写在computed配置项中
  • 作为属性，直接使用
  • js中使用计算属性： this.计算属性
  • 模板中使用计算属性：{{计算属性}}

methods方法：

  • 作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

  • 写在methods配置项中
  • 作为方法调用
  • js中调用：this.方法名()
  • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

计算属性的优势：

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，只有依赖项变化了才会自动重新计算，并再次缓存，methods方法渲染一次会出发一次方法调用

<!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>
    <style>
      input {
        width: 30px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      姓：<input type="text" v-model="firstName" /> + 名：
      <input type="text" v-model="lastName" /> = <span>{{ fullName }}</span
      ><br /><br />

      <button @click="changeName">改名卡</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          firstName: "刘",
          lastName: "备",
        },
        methods: {
          changeName() {
            this.fullName = "黄忠";
          },
        },
        computed: {
          // 简写 → 获取，没有配置设置的逻辑
          // fullName () {
          //   return this.firstName + this.lastName
          // }

          // 完整写法 → 获取 + 设置
          fullName: {
            // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
            //     会将返回值作为，求值的结果
            get() {
              return this.firstName + this.lastName;
            },
            // (2) 当fullName计算属性，被修改赋值时，执行set
            //     修改的值，传递给set方法的形参
            set(value) {
              // console.log(value.slice(0, 1))
              // console.log(value.slice(1))
              this.firstName = value.slice(0, 1);
              this.lastName = value.slice(1);
            },
          },
        },
      });
    </script>
  </body>
</html>

二、侦听器watch

2.1. 概述

watch是 vue 中常用的监听器，它主要用于侦听数据的变化，在数据发生变化的时候执行一些操作。

Vue官网很明确的建议我们这样使用watch侦听属性：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

2.2. 用法

watch: {
	被监听的数据: {
		handler(数据改变后的值, 数据改变之前的值) {
			相关代码逻辑...
		}
	}
}
  • 被监听的数据：data中定义的数据；
  • 数据改变后的值：该数据改变后的新值；
  • 数据改变之前的值：该数据改变之前的值。

2.3. watch监听单个简单数据类型

<template>
  <!--v-model 双向绑定模型数据-->
  <div>
    输入: <input type="text" v-model="num">
  </div>
</template>
 
<script>
export default {
  // vue页面的名称
  name: "Home",
  // 模型数据中加上绑定的值num
  data() {
    return {
      num: "",
    };
  },
  // 监听v-model中值的变化
  watch: {
    num: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`);
        console.log(`旧的值: ${oldVal}`);
        console.log("------------------");
      },
    }
  },
};
</script>

2.4. 监听复杂数据类型的某个属性的变化

<template>
<!--v-model 双向绑定模型数据-->
  <div>
    姓名: <input type="text" v-model="person.name">
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      // 模型数据有层级关系
      person: {
      	name: ""
      }
    };
  },
  watch: {
    // 监听复杂数据类型的某个属性的变化
   "person.name": {
      handler(newVal, oldVal) {
        console.log(`新的姓名: ${newVal}`);
        console.log(`旧的姓名: ${oldVal}`);
      },
    }
  },
};
</script>

2.5. immediate (立即处理 进入页面就触发)

immediate 设为true，进入页面会立即执行handler函数。

<template>
  <div>
    数字: <input type="text" v-model="num">
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      num: "",
    };
  },
  watch: {
    num: {
      handler(newVal, oldVal) {
        
      },
      // immediate 设为true，进入页面会立即执行handler函数。
      immediate: true
    }
  },
};
</script>

2.6. deep 深度监听

对象和数组都是复杂数据类型，复杂数据类型存的是地址值，地址没有变，不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值设为 true，使用deep属性可以监测到整个对象所有属性值的变化，某个属性发生变化，watch都会触发监听该对象。

<template>
<!--v-model 双向绑定模型数据-->
  <div>
    姓名: <input type="text" v-model="person.name">
  </div>
 <div>
    年龄: <input type="text" v-model="person.age">
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      person: {
      	name: "",
        age: ""
      }
    };
  },
  watch: {
   person: {
      // 当name或age发生改变时都能触发监听事件
      handler(newVal, oldVal) {
        alert("name or age have changed")
      },
      deep: true
    }
  },
};
</script>

2.7. 计算属性的简写

如果只是监听单个简单的数据，使用watch的简写形式就可以满足需求。

<template>
  <!--v-model 双向绑定模型数据-->
  <div>
    数字: <input type="text" v-model="num">
  </div>
</template>
 
<script>
export default {
  // vue页面的名称
  name: "Home",
  // 模型数据中加上绑定的值num
  data() {
    return {
      num: "",
    };
  },
  // 监听v-model中值的变化
  watch: {
    num: {
      handler(newVal, oldVal) {
        console.log(`新的数字: ${newVal}`);
        console.log(`旧的数字: ${oldVal}`);
        console.log("这里面可以将改变的值发送请求到后端，也可以做级联（下拉框的值的改变触发另一个下拉框值的改变），可以满足很多需求上的事情，");
      },
    }
  },
};
</script>

三、computed和watch的区别

computed主要用于对同步数据的处理，watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑

computed是计算属性

  • 支持缓存，只有依赖数据发生改变，才会重新进行计算
  • 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
  • computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
  • 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
  • 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch是侦听属性

  • 不支持缓存，数据变，直接会触发相应的操作；
  • watch支持异步；
  • 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
  • 当一个属性发生变化时，需要执行对应的操作；一对多；
扶苏1002
关注
专栏目录
vue的计算属性computed与侦听器watch
爱睡的虫虫
01-09 316
vue的计算属性computed和侦听器watch都是监听数据变化。 computed （计算） 其在vue单文件组件中就是对数据进行简单的一些逻辑计算，在项目开发中方便我们对原始数据处理。重要的是计算属性基于它的响应式依赖进行缓存的。只有当响应依赖关系变了即值发生变化了才会重新计算。否则，直接利用缓存，这样既避免多次调用函数又提升性能。 <div id="app"> {{txt}}...
vue学习之路（七）：watch监听和computed计算属性
qq_44860114的博客
11-24 1728
vue的watch监听 watch监听：在vue中，使用watch来响应数据的变化。watch监听分为浅监听和深监听。 **浅监听：**监听是简单的数据类型：数字，布尔值，字符串，普通数组 语法格式： 设有两个参数，一个是新的数据，一个是旧的数据 watch:{ //写法1 被监听的变量名称:function ( newVal , oldVal ) { 执行的程序 }, //写法2 被监听的变量名称 ( newVal , oldVal ) { 执行的程序
[vue]5-计算属性/watch监听
Pure_wu的博客
04-14 226
计算属性 ​ 前面的笔记提到了计算属性，这里单独讲一下计算属性 我们知道，在模板中可以直接通过插值语法显示一些data中的数据 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}} <div id="app"> <h2>{{name
Vue Watch可以监听Computed中的属性
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-28 834
然而，在某些情况下，我们可能还需要在Computed属性的值发生变化时执行一些额外的操作。本文将详细介绍如何使用Vue的Watch来监听Computed属性的变化，并通过多个示例展示其在实际开发中的应用。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。Vue中的Watch机制允许我们监听特定的属性变化，并在变化发生时执行指定的回调函数。将这两者结合起来，意味着我们可以监听Computed属性的变化，并在变化发生时执行一些逻辑处理。
6.数据监听watch 计算属性 computed
csdn570566705的博客
08-26 190
监听 ，计算属性
计算属性computed和监听属性watch
weixin_67867115的博客
04-10 875
一、计算属性：可以理解为能够在里面写一些计算逻辑的属性（数据缓存，当我们的数据没有变化时，不会再次执行计算的过程） computed: { name: { //获取计算属性 get: function () { return this.firstname + '-' + this.lastname },
数据监听watch和计算属性computed
weixin_44415461的博客
07-30 251
watch监听单个，computed监听多个 思考业务场景： 类似淘宝，当我输入某个人名字时，我想触发某个效果 利用vue做一个简单的计算器 当watch监听的是复杂数据类型的时候需要做深度监听（写法如下） watch:{ msg:{ handler(val){ if(val.text=='love'){ ...
Vue2-02 computed计算属性、watch侦听器
01-18
综上所述，Vue2中的`computed`计算属性和`watch`侦听器是实现数据动态响应和复杂业务逻辑的重要工具。它们各自有其适用场景，`computed`适合简单的数据计算，而`watch`则更适合处理数据变化后的副作用和复杂逻辑。在...
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
Vue学习笔记之计算属性与侦听器用法
10-15
在Vue.js框架中，计算属性（Computed Properties）和侦听器（Watchers）是两个关键特性，用于实现数据的动态响应和复杂逻辑处理。这两者都是Vue数据绑定系统的重要组成部分，有助于提高应用性能和代码可维护性。 1....
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
Vue计算属性与方法跟侦听器区别详解 Vue框架中，计算属性、方法和侦听器是三个常见的概念，但它们都有其特点和适用场景，下面我们将详细介绍它们的区别和使用场景。 一、计算属性（Computed Properties） 计算...
Vue3的监听属性watch和计算属性computed
qq_43151592的博客
04-18 1812
Vue3的监听属性watch和计算属性computed
watch 监听功能 computed 计算属性
m0_75222188的博客
04-19 512
​ \- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。​ 意思就是 (计算属性依赖的值发生变化时，会重新计算，如果依赖的值不发生变化，计算属性会使用之前缓存的值)侦听普通变量的变化是使用以上方法，当侦听的某个变量值是对象时则不起作用，这时需要使用deep深度监听。watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的。1.computed 阐述。
Watch（监听器）Computed（计算属性）Vuex（仓库）
m0_63914061的博客
08-15 1045
Vue中的Watch（监听器）Computed（计算属性）Vuex（仓库）
watch监听属性和计算属性的区别及用法
m0_46641774的博客
03-28 1283
watch监听属性和计算属性的区别及用法
Vue学习笔记五：数据监听watch计算属性computed
qq_45283247的博客
03-02 258
Vue学习笔记五：数据监听watch计算属性computed Vue版本：2.5.21 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
【Vue教程十一】监听属性watch 和 计算属性computed
qing_小诺的博客
07-20 373
一、监听属性watch 1、 使用这个属性可以监听data中指定数据的变化，然后触发这个watch对应的function函数： <template> <div> <input type="text" v-model="firstName" /> + <input type="text" v-model="lastName" /> = <input type="text" v-model="fullName" />
vue 计算属性computed与监听属性watch
Stephen__Wu的博客
06-14 678
有时在工作用用到计算属性和监听属性,可以写少很多行的代码,对开发效率有很大的提高; 计算属性 computed 计算属性时根据实例的数据项计算而来的结果 优点是可以使用缓存,性能高 使用实例,属性fullName是由firstName,lastName计算而来的 computed:{ fullName:function(){ return this....
计算属性和watch监听的区别
m0_73300433的博客
05-06 2437
Deep是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器。
Vue侦听器Watch的实战案例解析
本资源文件将分享Vue侦听器watch的精彩案例，通过实际代码示例深入探讨watch的不同用法，并对比计算属性（computed）与watch之间的差异。 知识点一：watch监视数据变化 Vue实例提供了一个watch属性，可以用来定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值