computed和watch

简介: computed和watch

1、模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性

计算属性与methods区别:

computed是带缓存的,如果被依赖的变量不发生变化,则下次调用computed时不会重新计算结果。但是methods则是每次调用都会重新运行以得出实时的结果。

methods调用需要加()

import { computed, ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
    const computed = computed(() => {
      return count.value * 2;
});

2、

侦听属性,(有两个参数,new,old,分别代表改变后和改变前的值)

侦听属性的命名,必须是data,computed,props中的变量名

(计算属性监测的是某个值的依赖的变化,侦听属性监测的是值自身的变化)

import { computed, watch, ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
watch( count , ()=>{
// 逻辑代码
    })
    return { count, computed };
  },
};
相关文章
|
5月前
|
缓存 JavaScript API
在vue中,computed 和 watch 的区别和运用的场景?
在vue中,computed 和 watch 的区别和运用的场景?
67 0
|
监控 JavaScript
computed的使用
一、 computed是什么? 对于任何复杂逻辑,你都应当使用计算属性。 computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义. 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
|
2月前
|
缓存 JavaScript API
理解掌握 `watch`、`computed`、`watchEffect`
【8月更文挑战第5天】理解掌握 `watch`、`computed`、`watchEffect`
33 5
|
15天前
|
缓存
Vue3 的 computed 和 watch 函数有哪些不同?
Vue3 的 computed 和 watch 函数有哪些不同?
|
3月前
|
缓存 JavaScript
计算属性(computed)和侦听器(watch)
计算属性(computed)和侦听器(watch)
43 0
|
5月前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
5月前
|
缓存 JavaScript
对比vue中watch和computed
watch 和 computed 都是用于监听数据变化并执行相应操作的选项,但它们的使用场景和优劣势有所不同。在实际开发中,应根据具体需求选择合适的选项。
|
缓存 JavaScript
Vue 中 computed 和 watch 的区别
Vue 中 computed 和 watch 的区别
84 0
|
5月前
|
缓存 监控 JavaScript
Vue中的watch和computed有什么区别?
Vue中的watch和computed有什么区别?
39 0