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 }; }, };