做网站美工 电脑配件要多大,贵阳做网站的大公司有哪些,超炫酷网站欣赏,西安高校定制网站建设1.computed 1#xff09;computed拥有缓存性#xff0c;多次调用会直接从缓存中获取#xff0c;而不会重新执行#xff0c;只有相依赖的数据发生改变才会重新计算#xff0c;所以说computed性能很高。 例#xff1a;下面是同时调用三次计算属性firstTotal和三次函数first…1.computed 1computed拥有缓存性多次调用会直接从缓存中获取而不会重新执行只有相依赖的数据发生改变才会重新计算所以说computed性能很高。 例下面是同时调用三次计算属性firstTotal和三次函数firstTotalFun()的运行结果。可以发现函数被执行了三次而计算属性只被执行了一次。 代码
templateview classcontainerview classitemview商品/viewinput typetext v-modelfirstGoods/viewview classitemview价格/viewinput typetext v-modelfirstPrice/viewview classitemview数量/viewinput typetext v-modelfirstNum/viewview classitemview总价格/viewview{{firstTotal}}, {{firstTotalFun()}}/viewview{{firstTotal}}, {{firstTotalFun()}}/viewview{{firstTotal}}, {{firstTotalFun()}}/view/view/view
/template
script setup
import { computed,ref } from vue;
let firstNum ref(0)
let firstGoods ref()
let firstPrice ref(0)
//计算属性
const firstTotal computed((){console.log(computed调用了);return firstPrice.value*firstNum.value})//普通函数
const firstTotalFun (){console.log(Function调用了)return firstPrice.value*firstNum.value
}
/script2computed是只读的不要去修改它会报警告。 结果 代码 3computed只能进行同步操作 4computed在页面初始化加载的时候就会被立刻调用 5必须要有返回值return如果代码只有一行也可以使用简写。
//正常写法
const firstTotal computed((){return firstPrice.value*firstNum.value})
//简写
const firstTotal computed(()firstPrice.value*firstNum.value)2.watch 1watch可以监听到前一次的值和最新值。 结果 代码
let firstWatch ref(0);
watch(firstWatch, (newValue,oldValue){console.log(调用了watch:,newValue,oldValue)
});2如果需要监听对象类型具体属性的变化需要设置deep:true,或者使用 “对象.value”。如下
let goods ref({name:,price:0,num:0});
//法一
watch(goods, (newValue,oldValue){console.log(调用了watch:,newValue,oldValue)
},{deep:true});
//法二
watch(goods.value, (newValue,oldValue){console.log(调用了watch:,newValue,oldValue)
};运行结果 3watch属性可以使用异步。call一些api 4) watch在页面初始化加载的时候不会被立刻调用只有在监听的数据发生变化的时候才会调用。如果想要让他立刻调用可以添加immediate: true
watch(source,(newValue, oldValue) {// 初始化的时候执行且当 source 改变时再次执行},{ immediate: true }
)watchEffect 1watchEffect资料上说不需要指定具体属性只要是watchEffect里面使用的数据都可以进行深层次的监听可以监听到对象中每个属性的变化。但是经过测试发现只会监听使用到的对象的具体的属性如下图代码我在watchEffect方法中打印了goods.value和goods.value.name,但只有当我在name输入框中输入数据的时候才会出现打印结果price,和num输入框都无法触发监听。不知为啥欢迎交流。
let goods ref({name:,price:0,num:0});
watchEffect((){console.log(调用了watchEffect,goods.value.name,goods.value)
})2) 可以进行异步操作 3在页面初始化加载的时候会被立刻调用与watch的immediate类似。
补充 computed是多对一一般多个属性变化会影响到一个属性的时候用computed。computed不可以使用异步。 watch是一对多一般有一个属性变化会影响到多个数据的时候使用watch。watch可以使用异步。
