Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

目录
  • 计算属性computed
  • 侦听属性watch

计算属性computed

支持缓存，只有依赖数据发生改变，才会重新进行计算

不支持异步，当computed内有异步操作时无效，无法监听数据的变化

computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch

不支持缓存，数据变，直接会触发相应的操作；

watch支持异步；

监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

当一个属性发生变化时，需要执行对应的操作；一对多；

监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

  • immediate：组件加载立即触发回调函数执行
  • deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

监听的对象也可以写成字符串的形式

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue Computed底层原理深入探究

    今天面了家小公司,上来直接问 computed 底层原理,面试官是这样问的,data 中定义了 a 和 b 变量.computed 里面定义了 c 属性,c 的结果依赖与 a 和 b,模板中使用了变量 c.假设改变了 a,请问底层是如何收集依赖,如何触发更新的? <div>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{ c }}</div> data(){ return { a: 'foo', b: 'bar' } }

  • vue中computed和watch的使用实例代码解析

    vue中computed和watch的使用实例代码解析

    需求: 1.点击按钮实现天气的切换: 2.用watch进行监视天气产生变化的数据: 实现代码(helloworld.vue实现代码): <template> <!-- 准备好一个容器--> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> &

  • Vue中computed计算属性和data数据获取方式

    Vue中computed计算属性和data数据获取方式

    目录 computed计算属性和data数据获取 解决方法一 解决方法二 computed计算属性取对象的值,第一次报错undefined 报错和打印值 解决方案 computed计算属性和data数据获取 获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"> <h1 class="detailHead">{{ActiveData.tit

  • Vue的computed计算属性你了解吗

    Vue的computed计算属性你了解吗

    目录 computed计算属性 1.什么是计算属性 2.为什么要用计算属性 3.compute.methods和watch三者的区别 4.案例:遍历数组对象的时候进行监视 总结 computed计算属性 1.什么是计算属性 计算属性 本质是方法,只是在使用这些 计算属性 的时候,把他们的名称直接当作 属性 来使用,并不会把 计算属性 当作方法去调用,不需要加小括号 ()调用. 2.为什么要用计算属性 当你需要一个属性是需要经过一些计算的,比如你要一个discounted折扣后的钱属性,现在有pr

  • 关于vue中计算属性computed的详细讲解

    关于vue中计算属性computed的详细讲解

    目录 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 附:计算属性的 getter 与 setter 总结 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下,computed默认使用的是getter属性 3.computed的响应式依赖(缓存) 1. computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新.下面代码中,

  • Vue3中的 computed,watch,watchEffect的使用方法

    Vue3中的 computed,watch,watchEffect的使用方法

    目录 一.computed 二.watch vu2 的写法 Vue3 中这样写 三.watchEffect 一.computed <template> 姓:<input v-model="person.firstName"><br/><br/> 名:<input v-model="person.lastName"><br/><br/> <span>全名:{{person.

  • Vue3 响应式系统实现 computed

    Vue3 响应式系统实现 computed

    目录 前言 实现 computed 总结 前言 上篇文章我们实现了基本的响应式系统,这篇文章继续实现 computed. 首先,我们简单回顾一下: 响应式系统的核心就是一个 WeakMap --- Map --- Set 的数据结构. WeakMap 的 key 是原对象,value 是响应式的 Map.这样当对象销毁的时候,对应的 Map 也会销毁. Map 的 key 就是对象的每个属性,value 是依赖这个对象属性的 effect 函数的集合 Set.然后用 Proxy 代理对象的 ge

  • Vue3 计算属性computed的实现原理

    目录 computed 的函数签名 computed 的实现 ComputedRefImpl 类 总结 版本:3.2.31 computed 的函数签名 // packages/reactivity/src/computed.ts // 只读的 export function computed<T>( getter: ComputedGetter<T>, debugOptions?: DebuggerOptions ): ComputedRef<T> // 可写的 ex

  • Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    目录 计算属性computed 侦听属性watch 计算属性computed 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

  • vue中provide inject的响应式监听解决方案

    目录 provide inject的响应式监听解决 vue监听赋值及provide与inject provide inject的响应式监听解决 提示:provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. 所以传值传对象即可 provide(){     return {       provObj: {         uuidList:{}       }     }   }, this._provided.p

  • vue中的事件触发(emit)及监听(on)问题

    目录 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 案例 vue emit事件无法触发问题 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 1.使用 $on(eventName,callback) 监听事件 2.使用 $emit(eventName,[…args]) 触发事件 $emit 和 $on 必须都在实例上进行触发和监听. // on监听emit触发的事件 created:function(){     this.$on('e

  • Vue中的计算属性与监听属性

    Vue中的计算属性与监听属性

    目录 一.为什么要使用计算属性 什么是计算属性 二.计算属性和方法的区别 1.区别 2.计算属性使用场景 三.修改计算属性的值 总结 四.监听属性 1.监听普通属性 2.监听属性和计算属性的区别 3.监听复杂对象 一.为什么要使用计算属性 什么是计算属性 计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程. 依赖固定的数据类型(响应式数据),不能是普通的传入的一个全局数据. 在数据量比较大的时

  • 详解Vue的监听属性

    详解Vue的监听属性

    目录 Vue监听属性 什么是监听属性? 监听属性和计算属性的区别? 监听属性的使用 深度监听 立即调用 总结 Vue监听属性 什么是监听属性? 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应,监听属性,意思就是可以监视其他数据的变化. 监听属性和计算属性的区别? 计算属性是依赖的值改变后重新计算结果更新DOM,会进行缓存. 属性监听的是属性值,当定义的值发生变化时,执行相对应的函数. 最主要的用途区别: 计算属性不能执行异步任务.计算属性一般不会用来向服务器请求或者执行异步任

  • vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有依赖的那个值发生改变,他才会重新计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

  • Vue监听属性和计算属性

    Vue监听属性和计算属性

    目录 一.watch监听属性 1.购物车 2.全选与取消全选 二.计算属性 1.computed 2.methods 3.setter 一.watch监听属性 这个属性用来监视某个数据的变化,并触发相应的回调函数执行. 基本用法添加watch属性,值为一个对象.对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行. 回调函数有2个参数: newVal,数据发生改变后的值. oldVal,数据发生改变前的值. 计数器: <!DOCTYPE html

  • Vue中使用计算属性的知识点总结

    计算属性 有些时候,我们在模板中放入了过多的逻辑,从而导致模板过重,且难以维护.例如: <div id="app"> {{ message.split('').reverse().join('') }} </div> 碰到这样的情况,我们必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,而且,一旦我们想要在模板中多次使用翻转字符串时,会更加麻烦. 所以,当我们处理复杂逻辑时,都应该使用计算属性. 基础用法 计算属性是Vue配置对象中的属性,

随机推荐