当前位置： 首页 > article >正文

《Vue零基础教程》（5）计算属性和侦听器好讲解

article 2024/12/5 3:24:16

1 计算属性

1) 什么是计算属性

计算属性就是基于现有属性计算后的属性

2) 计算属性的作用

计算属性用于对原始数据的再次加工

3) 案例

需求

实现如下效果

使用表达式实现
<!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>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 需求: 实现字符串的反转
          eg. abc 转换成  cba 
    -->
    <div id="app">
      请输入一个字符串: <input type="text" v-model="msg" /> <br />
      <!-- 反转字符串的思路
        1. 取出字符串中的每个字符 msg.split('') 形成一个数组
        2. 反转数据. msg.split('').reverse() 形成一个反转数组
        3. 将反转数组拼接. msg.split('').reverse().join('')
      -->
      <!-- 不推荐!! 在模板中书写复杂的表达式 -->
      <h3>反转后的字符串: {{msg.split('').reverse().join('')}}</h3>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '',
        },
      })
    </script>
  </body>
</html>
使用方法实现
<!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>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 需求: 实现字符串的反转
          eg. abc 转换成  cba 
    -->
    <div id="app">
      请输入一个字符串: <input type="text" v-model="msg" /> <br />
      <!-- 反转字符串的思路
        1. 取出字符串中的每个字符 msg.split('') 形成一个数组
        2. 反转数据. msg.split('').reverse() 形成一个反转数组
        3. 将反转数组拼接. msg.split('').reverse().join('')
      -->
      <!-- 不推荐使用方法
        原因: 没有缓存, 每次调用方法, 代码会执行一次
      -->
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
      <h3>反转后的字符串: {{reverseMsg()}}</h3>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '',
        },
        methods: {
          reverseMsg() {
            console.log('反转函数被执行了...')
            // 返回 反转后的字符串
            return this.msg.split('').reverse().join('')
          },
        },
      })
    </script>
  </body>
</html>
使用计算属性实现
<!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>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 需求: 实现字符串的反转
          eg. abc 转换成  cba 
    -->
    <div id="app">
      请输入一个字符串: <input type="text" v-model="msg" /> <br />
      <!-- 反转字符串的思路
        1. 取出字符串中的每个字符 msg.split('') 形成一个数组
        2. 反转数据. msg.split('').reverse() 形成一个反转数组
        3. 将反转数组拼接. msg.split('').reverse().join('')
      -->
      <!-- 推荐使用 计算属性
        1. 有缓存的. 当计算属性生成一次后, 挂载到vm实例. 
          后继的访问, 直接使用vm实例上的属性
        2. 方便调试
      -->
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
      <h3>反转后的字符串: {{reverseMsg}}</h3>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '',
        },
        computed: {
          // 编写一个函数, 这个函数会被做为该计算属性的getter
          reverseMsg() {
            console.log('计算属性被执行了...')
            // 该函数的返回值, 做为访问计算属性的结果
            return this.msg.split('').reverse().join('')
          },
        },
      })
    </script>
  </body>
</html>

4) 特点

  1. 有缓存
  2. 调试方便

5) 作业

2 侦听器

1) 什么是侦听器

可以通过watch配置项, 监听data中已经存在的属性的改变

2) 语法

watch: {
  // 监听data中的firstName属性
  firstName() {
   // 执行一系列的操作
  },
},

示例

<!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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      姓: <input type="text" v-model="lastName" /> <br />
      名: <input type="text" v-model="firstName" /> <br />
      全名(侦听器实现): {{fullName}}
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            lastName: '',
            firstName: '',
            fullName: '',
          }
        },
        watch: {
          // 侦听lastName的变化, 当lastName变化时, 执行该函数
          lastName() {
            this.fullName = this.lastName + this.firstName
          },
          // 侦听firstName的变化, 当firstName变化时, 执行该函数
          firstName() {
            this.fullName = this.lastName + this.firstName
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

3) 特点

在watch对应的回调函数中, 可以获取到新值和 旧值

示例

const vm = new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: '',
  },
  // 使用watch这个配置项
  watch: {
    // 在watch对应的回调函数中, 可以得到新值和旧值
    // 对于简单数据类型, 可以获取新旧值
    // 对于引用数据类型, 不能获取旧值
    firstName(newValue, oldValue) {
      // 一对多: 监听某一个属性的改变, 做一系列的操作
      console.log('firstName改变了...')
      console.log('新的值:', newValue)
      console.log('旧的值:', oldValue)
    },
  },
})

4) 深度监听

默认情况下watch配置项只会对data中第一层的数据进行侦听.

如果第一层的数据是引用类型(如, 数组, 对象). 需要开启深度监听

示例

<!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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      姓: <input type="text" v-model="lastName" /> <br />
      名: <input type="text" v-model="firstName" /> <br />
      <!-- 侦听器: 一因多果(关注一个已经存在的属性的改变) -->
      <!-- 
        1. 如果是基本类型数据, 可以获取到新旧值
        2. 默认是浅层次的侦听
        3. 如果是引用类型, 如果需要深层次数据的改变, 开启深度侦听
       -->
      全名(侦听器实现): {{fullName}}
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            lastName: '',
            firstName: '',
            fullName: '',
            obj: { name: 'xiaoming' },
          }
        },
        watch: {
          // 侦听lastName的变化, 当lastName变化时, 执行该函数
          lastName(newValue, oldValue) {
            console.log('新的值: ', newValue)
            console.log('旧的值: ', oldValue)
            this.fullName = this.lastName + this.firstName
          },
          // 侦听firstName的变化, 当firstName变化时, 执行该函数
          firstName() {
            this.fullName = this.lastName + this.firstName
          },
          // obj() {
          //   console.log('obj被修改了')
          // },
          obj: {
            handler() {
              console.log('obj被修改了...')
            },
            deep: true,
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

5) 回调执行的时机

默认情况下

watch在DOM更新之前调用. 得到的是 DOM更新之前的数据

可以通过flush: 'post'设置在DOM更新之后调用回调

示例

<!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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            msg: 'hello',
          }
        },
        watch: {
          // 默认情况下. watch在DOM更新之前调用. 得到的是 DOM更新之前的数据
          // msg() {
          //   console.log(app.innerHTML)
          // },
          msg: {
            handler() {
              console.log('更新之后的DOM', app.innerHTML)
            },
            flush: 'post',
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

3 计算属性 VS 侦听器

  1. 是否会在vm实例中挂载新属性?
    1. computed会
    2. watch不会
  1. 对应关系
    1. computed是多对一, 可以同时监听多个值改变, 最终计算得到一个新的属性
    2. watch是一对多, 主要监听一个属性的变化, 执行多种逻辑
  1. 能否获取新旧值?
    1. computed不能
    2. watch能

4 综合作业


http://www.kler.cn/a/422138.html

相关文章：

  • 【C++】栈和队列的模拟实现（适配器模式）
  • Python几种常用数据结构（重制版）
  • Hutool：Java开发者的瑞士军刀
  • 代码随想录第36天
  • Android笔记【12】脚手架Scaffold和导航Navigation
  • 408——数据结构（持续更新）
  • 【Linux|计算机网络】HTTPS工作原理与安全机制详解
  • 说说Elasticsearch查询语句如何提升权重？
  • Leetcode 303 Range Sum Query - Immutable
  • 靶机dpwwn-01
  • vue3项目最新eslint9+prettier+husky+stylelint+vscode配置
  • Qt 面试题复习10~12_2024-12-2
  • Android Folding
  • kafka 配置消息编码格式、解决消费者中文乱码
  • uniapp动态表单
  • Llama模型分布式训练（微调）
  • 在RK3588/RK3588s中提升yolov8推理速度
  • WPF_2
  • IOS ARKit进行图像识别
  • 05云计算HCIA学习笔记
  • Git操作学习2
  • Simulink的SIL软件在环测试
  • Modern Effective C++ 条款二十九三十：移动语义和完美转发失败的情况
  • 基于Matlab实现三维点坐标生成点云（源码+数据）
  • IDEA中Maven相关使用
  • IDEA中更改了项目模块名，IDEA丢失该模块的问题