各自的适用场景

计算属性临时快照

官方文档对于计算属性提到了一个重要的点子——“临时快照”(可能就是前面说的计算属性缓存),每当源状态发生变化时,就会创建一个新的快照。

有时候创建快照是没有意义的,对于间隔时间很短的源数据修改,比如输入框输入时页面上的一些变化。输入第一个字符到第二个字符之间的间隔时间,字符有长有短,每一次都要创建“临时快照”,这样是没有意义的,反而可能增加开销。

计算属性除了可以用于复杂的模板取值计算(普通函数也可以做,也不是它的特性),还可以计算一次而在页面上多次使用(这是计算属性的“临时快照”的优势)。

监听器的副作用

因此,上面说到的情况就更加适合用监听器来做,监听器不创建“临时快照”。监听器更适用于官方文档说的场景:“我们需要在状态变化时执行一些‘副作用’:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态”。

监听器的副作用就是被监测的数据源发生变化才被触发,而不能被其他数据源发生变化而受到影响。具体往下看,就是我说的监听器单一性。

深入思考两者区别

计算属性由于在计算过程中依赖了很多响应式数据,一旦某一个响应式数据发生变化,那么整个计算属性都将重新计算。我就自以为计算属性有共享性。

虽然监听器也可以依赖于很多响应式数据,但是监听器只负责一个数据源,而被依赖的其他响应式数据一旦发生变化,都无法触发这个监听器,即监听器的单一性。

监听器:单一性

Talk is cheap. Show me the code.

定义两个输入框需要绑定的响应式数据 inputcopyInput,监听器只负责监听 input,当监听器被触发时,新的值将赋值给 input,并且 input 也拼接给 copyInput(这里为了让两个产生联系而设计的无脑代码):

let input = ref("");
let copyInput = ref(""); watch(input, (newVal, oldVal) => {
input.value = newVal;
copyInput.value += input.value;
console.log("input value has changed.");
});

输入框绑定响应式数据,页面展示 copyInput:

<div class="demo1">
<div>CopyInput Value: {{ copyInput }}</div>
<div>
<span>Input: </span>
<input v-model="input" />
</div>
<div>
<span>CopyInput: </span>
<input v-model="copyInput" />
</div>
</div>

第一个输入框内(即绑定 input 的输入框)输入三次,监听器被触发 3 次,当第二个输入框的数据发生变化时,控制台不打印,也就是说,监听器里面被依赖的数据没有因为改变而被触发。

计算属性:共享性

计算属性里面被依赖的其中一个响应式数据发生了变化,整个计算属性都将被重新计算。那么,计算属性是否和上面提到的监听器一样呢?

let input = ref("");
let copyInput = ref(""); const result = computed(() => {
console.log("computed has changed.");
return (copyInput.value += input.value);
});
<div class="demo2">
<div>CopyInput Value Result: {{ result }}</div>
<div>
<span>Input: </span>
<input v-model="input" />
</div>
<div>
<span>CopyInput: </span>
<input v-model="copyInput" />
</div>
</div>

不管我改哪一个,只要是被计算属性依赖的数据源发生改变,这个计算属性都被触发,即共享性:

总结

(1)计算属性适合数据源发生变化间隔长,且页面使用它的次数多的情况;监听器适合数据源发生变化间隔短,或有异步操作,或有副作用的情况。

(2)如果不想其他响应式数据发生变化而导致被监测的源数据发生变化,那么就使用监听器。如果其他响应式数据发生变化,而被监测的源数据也一同发生变化,那么就使用计算属性。

声明

文章中所说的计算属性具有共享性和监听器具有单一性是为了方便理解他们之间的不同,博主擅自给的定义,可能存在不严谨的地方。

  1. 计算属性具有共享性:指的是计算属性里面的被依赖的响应式数据只要有一个发生变化,整一个计算属性都重新计算,牵一发而动全身。
  2. 监听器具有单一性:指的是监听器只负责它监听的那个数据源,如果发生变化,才会被触发,如果里面被依赖的其他数据源发生变化时,这个监听器不会被触发。

以上证明了我所阐述的观点,如果你有收货,请给我点个赞+收藏吧!

Vue 监听器和计算属性到底有什么不同?的更多相关文章

  1. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

  2. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  3. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...

  5. Vue中的计算属性和监听器(computed 与 watch)

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

  6. Vue基础之计算属性

    适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...

  7. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  8. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  9. vue学习笔记 计算属性(四)

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

随机推荐

  1. 深入C++04:模板编程

    模板编程 函数模板 模板意义:对类型也进行参数化: 函数模板:是不编译的,因为类型不知道 模板的实例化:函数调用点进行实例化,生成模板函数 模板函数:这才是要被编译器所编译的 函数模板.模板的特例化. ...

  2. YAML在线验证

    推荐一个网站:YAML在线验证https://www.bejson.com/validators/yaml_editor/

  3. Spring IOC 为什么能降低耦合

    有同学在学习 Spring 框架中可能会问这样的问题,为什么通过依赖注入就可以降低代码间的耦合呢?我通过 new 生产对象不也可以吗,不就是一行代码的不同,一个是 @Resource 注入,一个是 n ...

  4. MySQL十种锁,一篇文章带你全解析

    MySQL有两个核心的知识点,索引和锁.前几篇文章已经详细讲解了MySQL索引实现机制,今天再一起学习一下MySQL的锁. 1 为什么要加锁? 当多个事务并发操作同一批数据的时候,如果不加锁,就无法保 ...

  5. 从零打造一个Web地图引擎

    说到地图,大家一定很熟悉,平时应该都使用过百度地图.高德地图.腾讯地图等,如果涉及到地图相关的开发需求,也有很多选择,比如前面的几个地图都会提供一套js API,此外也有一些开源地图框架可以使用,比如 ...

  6. labview从入门到出家7(进阶篇)--队列的使用

    本节简单讲解队列在Labview中的使用,队列你可以认为就是一组先进先出的数据列表,在Labview中常用来缓存和传递数据.用了这么久的队列,个人认为有个方便的地方在于数据传递的把控,不管是局部变量还 ...

  7. 记一次 Druid 超时配置的问题 → 引发对 Druid 时间配置项的探究

    开心一刻 一天在路边看到一个街头采访 记者:请问,假如你儿子娶媳妇,给多少彩礼合适呢 大爷:一百万吧,再给一套房,一辆车 大爷沉思一下,继续说到:如果有能力的话再给老丈人配一辆车,毕竟他把女儿养这么大 ...

  8. java的方法(类似与C语言函数)

    package www.nihao; import java.util.Scanner; public class demo02 { public static void main(String[] ...

  9. 如何编写测试团队通用的Jmeter脚本

    平时学习.工作过程中,编写的一些jmeter脚本,相信大多数都遇到过这个问题.那就是:如果换一台电脑运行,文件路径不一样,会导致运行失败. 前不久,自己就真真切切遇到过一回,A同学写了个脚本用于压测, ...

  10. 近期碰到的一些面试题--WPF、C#、数据库

    最近想换工作的念头特别强烈,面了几家公司没有拿到满意的offer,心仪的公司面完锁HC,有点无奈,感觉今年有点卷,把碰到过的面试题总结下. WPF相关: 1.定义依赖属性需要注意哪些地方? (1)依赖 ...