计算属性computed侦听器watch

最新推荐文章于 2024-02-25 08:23:50 发布

扶苏1002

最新推荐文章于 2024-02-25 08:23:50 发布

阅读量649

点赞数 9

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

本文链接：https://blog.csdn.net/qq_44741577/article/details/135991533

版权

Vue2 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、计算属性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

关注

9
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
计算属性computed侦听器watch

watch是 vue 中常用的监听器，它主要用于侦听数据的变化，在数据发生变化的时候执行一些操作。Vue官网很明确的建议我们这样使用watch侦听属性：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
复制链接

扫一扫