003-读书笔记-Vue官网计算属性与监听器

dadong 发布于2019-08-21 17:16 / 2080人阅读

摘要：监听器监听器的作用就是监视实例中的内容变化的。需要监听哪个属性，就把属性的名字写在监听器中。总结监听器的一般写法监听器的完整写法，指定两个参数参考内容计算属性和观察者

1.计算属性 1-1 计算属性概述

计算属性也是 Vue 实例的属性，和 data 方法中返回的对象中的属性是等同的存在。通常来说，计算属性可以简单理解：

计算属性其实就是 Vue 实例的一个属性

计算属性一般依赖传统的 Vue 实例属性

计算属性一般是通过运算得到的属性

如果要更加深入的理解计算属性，可以往下看。

1-2 搭建HTML结构

由于计算属性有几个特性，需要做一些测试，虽然这些测试可以在 vue-devtools 中调试查看，但是肯定没有在页面上看着更直观，因此，搭建一下简单的 HTML 结构，更好的查看最终的执行效果：

展示的效果如下图：

现在基本结构已经搭建完成了，下面就是写一些 JavaScript 代码来操作这些属性了。

1-3 计算属性的简单使用

为了递进式的了解计算属性，首先我们来看看，计算属性是如何通过常规属性计算得到一个新的属性的。

这里沿用官网给出的例子，将常规属性反转得到计算属性。

这个时候，聚焦到的 DOM 元素有 文本框1号 文本框中输入 计算属性的值，会发现计算属性会随着常规属性的输入，输出常规属性的反转形式：

可以发现，上面的计算属性是一个函数，返回值就是计算属性的值，而计算得到的值是依赖 Vue 的实例属性 inpVal

1-4 计算属性的get与set

get说明：

上面的计算属性只是一种简写方式，完整的写法如下：

    computed: {
      comInpVal: {
        get() {
          return this.inpVal.split("").reverse().join("")
        }
      }
    }

其实在写计算属性的时候，默认指定的是计算属性的 get 方法。因此，可以得出两个结论：

在计算属性不需要设置值的时候，可以只写出 get 方法，并使用简写的形式

计算属性的 get 方法必须指定返回值，返回值作为计算属性的最终值

set说明：

既然存在了 get 方法来获取值，是不是就存在 set 方法来设置值呢？答案是肯定的，这也是结构中 文本框2号 存在的意义。

现在我们在 文本框2号 中输入内容，会发现谷歌人员开发工具中会报错。

[Vue warn]: Computed property "comInpVal" was assigned to but it has no setter.

从报错信息中，说明了没有指定 setter，因此不能对计算属性进行值的设置。如果我非要设置，并且还不让它报错，怎么办？
这个时候就可以指定 set 方法了。

下面我们指定 set 方法，通过计算属性的设置来得到常规属性的反转值：

    computed: {
      comInpVal: {
        get() { // get方法：获取值
          return this.inpVal.split("").reverse().join("")
        },
        set(val) { // set方法：设置值
          this.inpVal = val.split("").reverse().join("")
        }
      }
    }

这个时候，再次在 文本框2号 中输入内容，不会出现任何错误。至此，获取计算属性的值和设置计算属性的值都已经学习完成了。

2.监听器

监听器的作用就是监视 Vue 实例中的内容变化的。

2-1 搭建简单的HTML结构

这次我们查看效果的时候，主要是在谷歌开发工具中的控制台中，因此，搭建一个简单的结构就好：

2-2 简单使用监听器

下面我们补充一下监听器，用来监听 inpVal 属性：

通过代码会发现，监听器写在 watch 中。需要监听哪个属性，就把属性的名字写在监听器中。

在输入框中不断输入内容，就会看到随着内容的输入，控制台中的内容也是不断变化的。

2-3 监听器的第一个参数

在代码中可以看到，监听器是一个函数，如果是函数，那么应该就可以存在参数，下面指定第一个参数。

    watch: {
      inpVal(newVal) {
        console.log(this.inpVal === newVal)
      }
    }

在文本框中输入内容的时候，会发现，控制台中输入的结果始终是 true，这说明，第一个参数就是监视的属性值。
因此，如果只需要得到最终的结果的情况下，参数可以省略不写。

2-4 监听器的第二个参数

监听器的第一个参数是新输入的值，那第二个参数就是旧值。让我们写出两个参数对比一下：

    watch: {
      inpVal(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }

在输入框中输入内容，会发现控制台中输出的效果如下：

1
12 1
123 12

可以发现，在 123 输入的时候，12 是前一个值。这个时候，就很清楚的知道，123 是新值，前一个值是旧值。

2-5 总结

监听器的一般写法：

    watch: {
      inpVal() {
        // ...
      }
    }

监听器的完整写法，指定两个参数：

    watch: {
      inpVal(newVal, oldVal) {
        // ...
      }
    }

3.参考内容

计算属性和观察者

云服务器 GPU云服务器 vue的计算属性读书笔记编程思想读书笔记大数据时代读书笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89336.html

004-读书笔记-Vue官网 Class与Style的绑定

摘要：绑定绑定，使用，简写的形式是。绑定比较灵活，可以使用表达式字符串对象或数组。绑定字符串绑定字符串的时候只能绑定一个，不能绑定多个。 1.绑定Class 绑定Class，使用 v-bind:class，简写的形式是 :class。绑定Class比较灵活，可以使用表达式、字符串、对象或数组。 1-1 搭建结构首先，新建一些 class 样式： .colorRed { colo...

hufeng 2019-08-21 17:16 评论0 收藏0
002-读书笔记-Vue官网认识数据与指令

摘要：首先把改成的形式这是一段测试文字绑定最后的显示效果如下，如果要看具体的形式，可以在谷歌人员开发工具中自行查看指令的组成部分经过上面的介绍，应该对指令有一个大概的认识，下面就来对指令的每一项进行说明。这篇笔记主要用来说明 Vue 中数据的定义和指令的一些特性，后续会做更深入的说明。 1.Vue中的data函数 1-1 使用data函数由于使用的是单文件组件，因此 Vue 组件中的数据...

hqman 2019-08-21 17:15 评论0 收藏0
007-读书笔记-Vue官网插件

摘要：插件的定义与使用插件的定义需要注意的点定义一个对外公开的方法方法有两个参数第一个参数的构造器，第二个参数是一个可选的对象必须，插件对外公开的方法构造器可选参数，是一个对象添加全局方法或属性添加全局方法或属性添加全局资源指令过滤器过渡等添 1.插件的定义与使用 1-1 插件的定义需要注意的点：定义一个对外公开的install方法 install方法有两个参数：第一个参数Vue的构造...

468122151 2019-08-22 11:13 评论0 收藏0
006-读书笔记-Vue官网混合

摘要：混合中的钩子函数同名钩子函数都会执行如果组件中存在钩子函数，混合中也存在相同的钩子函数，那么两个钩子函数都会执行。最终的执行结果多个混合的钩子函数多个混合的钩子函数，会根据混合使用的顺序来执行。 1.认识混合混合(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式混合的作用：抽取多个组件的共同部分，增强组件的可复用性混合的实质：混合对象类似一个Vue实例，可以包含V...

kk_miles 2019-08-22 11:13 评论0 收藏0
005-读书笔记-Vue官网自定义指令

摘要：自定义指令的使用在组件中定义一个自定义指令，作用将当前节点中字体颜色设置为红色。参考内容自定义指令 1.自定义指令的使用在组件中定义一个自定义指令，作用：将当前DOM节点中字体颜色设置为红色。在自定义指令中简化了钩子函数，下面的钩子函数相当于 bind 和 unbind 的缩写： export default { name: app, directives: ...

teren 2019-08-22 11:13 评论0 收藏0