Vue基础-Options API

总结

3.1. 计算属性 computed

3.1.1. 复杂数据的处理方式

• mustache插值语法自己写逻辑
• methods完成逻辑

3.1.2. 计算属性用法

• computed: { fullname() {} }

3.1.3. computed和methods区别

• computed底层会缓存, 性能更高

3.1.4. computed的完整写法

• set
• get

3.2. 侦听器 watch

3.2.1. 基本侦听watch

• watch: { message(newValue, oldValue) {} }
• 注意: 对象类型
  • Proxy对象 -> Vue.toRaw(newValue)

3.2.2. 侦听的选项

• deep
• immediate

3.2.3. 其他的写法

• "info.name"
• 别的写法
• created -> this.$watch()

computed计算属性使用

复杂data的处理方式

• 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

• 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示；

  • 比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示；
  • 在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算；
  • 在模板中放入太多的逻辑会让模板过重和难以维护；
  • 并且如果多个地方都使用到，那么会有大量重复的代码；

• 我们有没有什么方法可以将逻辑抽离出去呢？

  • 可以，其中一种方式就是将逻辑抽取到一个method中，放到methods的options中；
  • 但是，这种做法有一个直观的弊端，就是所有的data使用过程都会变成了一个方法的调用；
  • 另外一种方式就是使用计算属性computed；

认识计算属性computed

• 什么是计算属性呢？
  • 官方并没有给出直接的概念解释；
  • 而是说：对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性；
  • 计算属性将被混入到组件实例中
    • 所有 getter 和 setter 的 this 上下文自动地绑定为组件实例；

• 计算属性的用法：

  • 选项：computed
  • 类型：{ [key: string]: Function | { get: Function, set: Function } }

• 那接下来我们通过案例来理解一下这个计算属性。

• 我们来看三个案例：

• 案例一：我们有两个变量：firstName和lastName，希望它们拼接之后在界面上显示Hello World；

• 案例二：我们有一个分数：score

  • 当score大于60的时候，在界面上显示及格；
  • 当score小于60的时候，在界面上显示不及格；

• 案例三：我们有一个变量message，记录一段文字：比如

  • 某些情况下我们是直接显示这段文字；
  • 某些情况下我们需要对这段文字进行反转；

• 我们可以有三种实现思路：
  • 思路一：在模板语法中直接使用表达式；
  • 思路二：使用method对逻辑进行抽取；
  • 思路三：使用计算属性computed；

• 思路三的实现：computed实现
  • 注意：计算属性看起来像是一个函数，但是我们在使用的时候不需要加()，这个后面讲setter和getter时会讲到；
  • 我们会发现无论是直观上，还是效果上计算属性都是更好的选择；
  • 并且计算属性是有缓存的；

<div id="app">
    <!-- 插值语法表达式直接进行拼接 -->
    <!-- 1.拼接名字 -->
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>

    <!-- 2.显示分数等级 -->
    <h2>{{ scoreLevel }}</h2>

    <!-- 3.反转单词显示文本 -->
    <h2>{{ reverseMessage }}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.姓名
          firstName: "kobe",
          lastName: "bryant",

          // 2.分数: 及格/不及格
          score: 80,

          // 3.一串文本: 对文本中的单词进行反转显示
          message: "my name is why"
        }
      },
      computed: {
        // 1.计算属性默认对应的是一个函数
        fullname() {
          return this.firstName + " " + this.lastName
        },

        scoreLevel() {
          return this.score >= 60 ? "及格": "不及格"
        },

        reverseMessage() {
          return this.message.split(" ").reverse().join(" ")
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>

计算属性 vs methods

• 在上面的实现思路中，我们会发现计算属性和methods的实现看起来是差别是不大的，而且我们多次提到计算属性有缓存的。
• 接下来我们来看一下同一个计算多次使用，计算属性和methods的差异：

 <div id="app">
    <!-- 1.methods -->
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>

    <!-- 2.computed -->
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>

    <!-- 修改name值 -->
    <button @click="changeLastname">修改lastname</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          firstName: "kobe",
          lastName: "bryant"
        }
      },
      methods: {
        getFullname() {
          console.log("getFullname-----")
          return this.firstName + " " + this.lastName
        },
        changeLastname() {
          this.lastName = "why"
        }
      },
      computed: {
        fullname() {
          console.log("computed fullname-----")
          return this.firstName + " " + this.lastName
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
    
    //打印结果
    //getFullname-----
    //getFullname-----
    //getFullname-----
    //computed fullname-----
  </script>

计算属性的缓存

• 这是什么原因呢？
  • 这是因为计算属性会基于它们的依赖关系进行缓存；
  • 在数据不发生变化时，计算属性是不需要重新计算的；
  • 但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算；

计算属性的setter和getter

• 计算属性在大多数情况下，只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数。
  • 但是，如果我们确实想设置计算属性的值
  • 这个时候我们也可以给计算属性设置一个setter的方法；

  <div id="app">
    <h2>{{ fullname }}</h2>

    <button @click="setFullname">设置fullname</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          firstname: "coder",
          lastname: "why"
        }
      },
      computed: {
        // 语法糖的写法
        // fullname() {
        //   return this.firstname + " " + this.lastname
        // },
        
        // 完整的写法:
        fullname: {
          get: function() {
            return this.firstname + " " + this.lastname
          },
          set: function(value) {
            const names = value.split(" ")
            this.firstname = names[0]
            this.lastname = names[1]
          }
        }
      },
      methods: {
        setFullname() {
          this.fullname = "kobe bryant"
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>

源码如何对setter和getter处理呢？（了解）

• 你可能觉得很奇怪，Vue内部是如何对我们传入的是一个getter，还是说是一个包含setter和getter的对象进行处理的呢？
• 事实上非常的简单，Vue源码内部只是做了一个逻辑判断而已；

认识侦听器watch

• 什么是侦听器呢？

  • 开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；
  • 当数据变化时，template会自动进行更新来显示最新的数据；
  • 但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；

• 侦听器的用法如下：

  • 选项：watch
  • 类型：{ [key: string]: string | Function | Object | Array}

侦听器案例

• 举个栗子（例子）：
  • 比如现在我们希望用户在input中输入一个问题；
  • 每当用户输入了最新的内容，我们就获取到最新的内容，并且使用该问题去服务器查询答案；
  • 那么，我们就需要实时的去获取最新的数据变化；

  <div id="app">
    <h2>{{message}}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // Proxy -> Reflect
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          message: "Hello Vue",
          info: { name: "why", age: 18 }
        }
      },
      methods: {
        changeMessage() {
          this.message = "你好啊, 李银河!"
          this.info = { name: "kobe" }
        }
      },
      watch: {
        // 1.默认有两个参数: newValue/oldValue
        message(newValue, oldValue) {
          console.log("message数据发生了变化:", newValue, oldValue)
        },
        info(newValue, oldValue) {
          // 2.如果是对象类型, 那么拿到的是代理对象
          // console.log("info数据发生了变化:", newValue, oldValue)
          // console.log(newValue.name, oldValue.name)

          // 3.获取原生对象
          // console.log({ ...newValue })
          console.log(Vue.toRaw(newValue))
        }
      }
    })

    // 2.挂载app
    app.mount("#app")

侦听器watch的配置选项

• 我们先来看一个例子：
• 当我们点击按钮的时候会修改info.name的值；
• 这个时候我们使用watch来侦听info，可以侦听到吗？答案是不可以。
• 这是因为默认情况下，watch只是在侦听info的引用变化，对于内部属性的变化是不会做出响应的：
  • 这个时候我们可以使用一个选项deep进行更深层的侦听；
  • 注意前面我们说过watch里面侦听的属性对应的也可以是一个Object；
• 还有另外一个属性，是希望一开始的就会立即执行一次：
  • 这个时候我们使用immediate选项；
  • 这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次；

 <div id="app">
    <h2>{{ info.name }}</h2>
    <button @click="changeInfo">修改info</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          info: { name: "why", age: 18 }
        }
      },
      methods: {
        changeInfo() {
          // 1.创建一个新对象, 赋值给info
          // this.info = { name: "kobe" }

          // 2.直接修改原对象某一个属性
          this.info.name = "kobe"
        }
      },
      watch: {
        // 默认watch监听不会进行深度监听
        // info(newValue, oldValue) {
        //   console.log("侦听到info改变:", newValue, oldValue)
        // }

        // 进行深度监听
        info: {
          handler(newValue, oldValue) {
            console.log("侦听到info改变:", newValue, oldValue)
            console.log(newValue === oldValue)
          },
          // 监听器选项:
          // info进行深度监听
          deep: true,
          // 第一次渲染直接执行一次监听器
          immediate: true
        },
        "info.name": function(newValue, oldValue) {
          console.log("name发生改变:", newValue, oldValue)
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>

侦听器watch的其他方式

export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // 侦听根级属性
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // 字符串方法名称
    b: 'someMethod',
    // 该回调将会在被侦听的对象的属性改变时调动，无论其被嵌套多深
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // 侦听单个嵌套属性：
    'c.d': function (val, oldVal) {
      // do something
    },
    // 该回调将会在侦听开始之后立即调用
    e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // 你可以传入回调数组，它们将会被逐一调用
    f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('handle2 triggered')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('handle3 triggered')
        }
        /* ... */
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b changed')
    },
    handle1() {
      console.log('handle 1 triggered')
    }
  },
  created() {
    this.a = 3 // => new: 3, old: 1
  }
}j

作业

五. 什么是计算属性？和method有什么区别？

六. 如何在Vue中侦听一个数据的改变？