Vue零基础教程|从前端框架到GIS开发系列课程（四）计算属性与侦听器

前文

0帧起手《Vue零基础教程》，从前端框架到GIS开发系列课程

https://mp.youkuaiyun.com/mp_blog/creation/editor/144398425

Vue零基础教程|从前端框架到GIS开发系列课程（二）

https://mp.youkuaiyun.com/mp_blog/creation/editor/144399005

Vue零基础教程|从前端框架到GIS开发系列课程（三）模板语法
https://mp.youkuaiyun.com/mp_blog/creation/editor/144399165

计算属性

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) 作业

侦听器

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>