Vue中 watch 和 computed 区别和使用场景

在 vue 的项目中，经常用到 watch 和 computed 这两个属性。两个都是数值改变触发改变的属性，他们之间有什么区别？

1、区别

Computed：

computed：是计算属性，依赖其它属性值；
computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会从新计算 computed 的值；
不支持异步，当 Computed 中有异步操作时，无法监听数据的变化
如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用 computed；
如果 computed 属性的属性值是函数，那么默认使用 get 方法，函数的返回值就是属性的属性值；在 computed 中，属性有一个 get 方法和一个 set 方法，当数据发生变化时，会调用 set 方法。

Watch：

watch：更多的是「观察」的做用，用于监听data中的数据变化，只在被监听的属性值发生变化时执行；
watch不支持缓存，当一个属性发生变化时，它就会触发相应的操作；
watch支持异步监听
watch监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
watch监听数据必须是 data 中声明的或者父组件传递过来的 props 中的数据，当发生变化时，会触发其他操作
watch函数有两个的参数：

immediate：组件加载立即触发回调函数

deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。

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

2、使用场景

Computed：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
computed擅长处理的场景：一个数据受多个数据影响，如购物车计算价格

Watch：

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用watch选项允许我们执行异步操作。这些都是计算属性无法做到的。
watch擅长处理的场景：一个数据影响多个数据，如搜索数据

Vue中 watch 和 computed 区别和使用场景相关推荐

Vue中methods与computed区别
核心区别 computed是属性访问,method是函数调用 computed带有缓存功能,method没有实例: <script>Vue.createApp({data() {retu ...
关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
Vue中watch、computed、updated三者的区别以及使用方法
1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中new V ...
Vue中watch、computed、updated的区别
watch watch:侦听器,监听某个数据的变化然后执行相对应的方法,来响应数据的变化,尤其是当需要数据变化时执行异步操作或着开销较大时,这个方式是最有用的 <div id="wat ...
Vue中methods、computed和watch属性联系及区别
methods属性当我们在Vue中想要调用函数或者方法时,可以在methods中调用方法,如下: <template><div><h1>methods属性< ...
vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
实现 VUE 中 MVVM - step10 - Computed
看这篇之前,如果没有看过之前的文章,移步查看: 实现 VUE 中 MVVM - step1 - defineProperty 实现 VUE 中 MVVM - step2 - Dep 实现 VUE 中 ...
关于vue中watch和computed
computed:计算属性通过属性计算的来的属性 1.computed里面的函数建议有返回值,不建议去修改data中的属性 2.在使用computed中的方法时,是不需要加() 3.compu ...
Vue 中data 和 data() 区别
Vue 中data 和 data() {return {};}区别一般简单Vue实例(常见教程视频中) new Vue({el: "#id",data: {message: &q ...

Vue中 watch 和 computed 区别和使用场景

1、区别

2、使用场景

Vue中 watch 和 computed 区别和使用场景相关推荐

最新文章

热门文章