vue中Watch 和 Computed 的区别是什么？

Watch 和 Computed 的区别

监听属性watch:

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数；
详解watch中immediate、handler和deep属性
- handle:watch中需要具体执行的方法
- immediate：组件加载立即触发回调函数执行，
- deep 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数据中的对象内容的改变，注意监听数据的变动不需要这么做。注意：deep无法监听到数组的变动的对象的新增，参考vue数组变异，只有以响应式的方式触发才会被监听到。
```
data(){return {docData: {'doc_id': 1,'tpl_data': 'abc'}}
},
watch: {docData: {handler(newVal) {//当immediate：true,将会加载立即触发回调函数执行change_number会加1this.change_number++},deep: true,immediate: true},//使用字符串的形式监听对象属性   'docData.doc_id': {handler(newVal, oldVal) {......},deep: true},
}
```

计算属性computed :

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

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

data(){return {message: 'hello'，firstName: 'Foo',lastName: 'Bar'}
},
computed:{// 计算属性的getterreversedMessage(){return this.meessage.split('').reverse().join('')}fullName: {// getterget() {return this.firstName + ' ' + this.lastName},// setterset(newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}
}

vue中Watch 和 Computed 的区别是什么？相关推荐

关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
实现 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中watch、computed、updated三者的区别以及使用方法
1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中new V ...
Vue中watch、computed、updated的区别
watch watch:侦听器,监听某个数据的变化然后执行相对应的方法,来响应数据的变化,尤其是当需要数据变化时执行异步操作或着开销较大时,这个方式是最有用的 <div id="wat ...
vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
Vue中methods、computed和watch属性联系及区别
methods属性当我们在Vue中想要调用函数或者方法时,可以在methods中调用方法,如下: <template><div><h1>methods属性< ...
Vue中data和computed的区别
First data 和 computed都是响应式的,先看看官方的说法: Data: Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data ...
Vue中methods与computed区别
核心区别 computed是属性访问,method是函数调用 computed带有缓存功能,method没有实例: <script>Vue.createApp({data() {retu ...

vue中Watch 和 Computed 的区别是什么？

Watch 和 Computed 的区别

监听属性watch:

计算属性computed :

vue中Watch 和 Computed 的区别是什么？相关推荐

最新文章

热门文章