vue中computed和watch的区别,以及适用场景

computed:通过属性计算而得来的属性

  1、computed内部的函数在调用时不加()。

  2、computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。

  3、computed中的函数必须用return返回。

  4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了,就是data中的属性发生改变,从而触发computed中的函数,形成死循环了。

  5、当computed中的函数所依赖的属性没有发生改变,那么调用当前函数的时候会从缓存中读取。

  

  使用场景:当一个值受多个属性影响的时候------------购物车商品结算

watch:属性监听

  1、watch中的函数名称必须要和data中的属性名一致,因为watch是依赖data中的属性,当data中的属性发生改变的时候,watch中的函数就会执行。

  2、watch中的函数有两个参数,前者是newVal,后者是oldVal。

  3、watch中的函数是不需要调用的。

  4、watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变。也就是说,watch想要监听引用类型数据的变化,需要进行深度监听。"obj.name"(){}------如果obj的属性太多,这种方法的效率很低,obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。

  5、特殊情况下,watch无法监听到数组的变化,特殊情况就是说更改数组中的数据时,数组已经更改,但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100,this.$set(this.arr,0,100)-----修改arr第0项值为100。

  6、immediate:true    页面首次加载的时候做一次监听。

  使用场景:当一条数据的更改影响到多条数据的时候---------搜索框

  

区别:

  1、功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。

  2、是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。

  3、是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。

  4、使用场景:computed----当一个属性受多个属性影响的时候,使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候,使用watch-------搜索框。

  

  

原文地址:https://www.cnblogs.com/wuqilang/p/11241604.html

时间: 2024-08-30 16:00:21

vue中computed和watch的区别,以及适用场景的相关文章

Vue中computed和watch的区别

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

vue中assets和static的区别

Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点 不相同点: assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化.而压缩后的静态资源文件最终也都会放置在s

vue中$route 和$router的区别

在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url); $router和$route的区别傻傻的分不清 1.先说$router这个就是router的实例, 在创建vueRouter实例 const router=new VueRouter({ routes }) $router就是这个实例 而$route是$router中的一个一个对象 只想要导航到name,query,params等 原文地址:ht

简述vue中v-if和v-show的区别

vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的 v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中不存在这个dom元素,以此达到隐藏的效果:    所以v-if在每次切换的时候都会重新创建或者销毁元素,有较高的切换性能消耗: 而且v-if是惰性的,如果在初始渲染时条件为假,那就什么也不做,直到条件第一次变为真时,需要渲染时才会开始渲染条件块 v-show v-show则是无论你的初始条件是什么,

Vue中Computed和Watch的用法及区别

一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <p id="app"> {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} </p> 运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. 因此可改写为: <body> <div id="app"

Vue中computed VS watch 区别 及computed VS method区别

computed VS watch 先来看官网中对计算属性(computed)的解释: 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 详情见官网URL https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7 官网中对侦听器(watch)的解释: 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue

vue中computed和watch

computed 计算属性 能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发.在操作数据的时候,会派生出另一个事情 get是获取的时候执行的操作.set是修改时候执行的操作 应用场景: 比如在用户输入框改变数据的时候过滤数字: 通过数据的变化,来进行累计: 通过单选按钮的变化,来进行判断是否全选等等 优点:指定看哪个数据,就只看哪个数据 PS:需要注意的是  函数名,不要和data中的数据一样. <div id="app"> 全选 <input

vue中computed和watch的用法

computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化.这里的这个总金额使用computed属性来进行计算是最好的选择 wa

vue中computed计算属性与methods对象中的this指针

this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和computed中的成员为实现化对象属性了,而methods中定义的方法为实现化对象方法了.这时this指针指向的是这个实现化对象. let v = new Vue({ el: '.test', data: { title: "121213" }, methods: { msg() { al