4.15 vue中watch computed
在 Vue.js 中，computed 是一种计算属性，它能够根据依赖的数据动态计算出一个新的值。
computed 属性可以定义为一个函数，该函数返回需要计算的值。
当它所依赖的数据发生变化时，Vue.js 会自动重新计算这个值并将其更新到组件上。
computed 与watch，methods的区别
与 computed 对应的还有另外两种常见的属性，分别是 methods 和 watch。
其中，methods 可以定义一些计算逻辑，但它们返回的值不能缓存，每次都会重新计算；
而 watch 则用于监听某个数据的变化并执行一些操作，但它不能返回数据值。
computed 属性还可以通过 get 和 set 方法来实现对计算属性的输入输出控制。
get 方法表示当访问计算属性时要执行的代码，
set 方法则表示当给计算属性赋值时要执行的代码
demo1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed set get</title>
</head>
<body>
<!--View-->
<div id="box">
<input v-model="fullInputName" />
<div>{{fullName}}</div>
</div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
//Model
const user = {
data(){
return{
firstName: "Jack",
lastName: "Jobs", //乔布斯
fullInputName:''//---这里如果直接定义fullName会覆盖computed中的get方法
}
},
computed: {
fullName: {
get(){
console.log('get called...');
return this.firstName + " " + this.lastName;
},
set(value) {
console.log("set called.");
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
},
watch:{
fullInputName(value){
console.log('----watch');
this.fullName = value;
}
}
}
//ViewModel
const app = Vue.createApp(user);
const rc = app.mount("#box");
</script>
</html>
demo2
<template>
<div>
<h2>test</h2>
<input type="text" v-model="fullInputName" />
<div>{{fullName}}</div>
</div>
</template>
<script>
export default {
data(){
return {
firstName:'张',
lastName:'三',
fullInputName:""
}
},
created(){
console.log('test-created');
},
methods:{
},
computed:{
fullName:{
get(){// 上面页面渲染,{{fullName}} 会调取这里get方法
console.log('调用 fullName get方法');
return this.firstName + " " + this.lastName;
},
set(value){
console.log("调用 fullName set方法");
var arr = value.split(" ");
this.firstName = arr[0] ? arr[0] : '';
this.lastName = arr[1] ? arr[1] : '';
}
}
},
watch:{
fullInputName(value){
this.fullName = value;// fullName改变会调取computed，fullName,set方法
}
}
}
</script>
<style scoped>
</style>
demo3
<template>
<div>
<h2>test</h2>
<p>商品价格:{{price}} 元</p>
<p>商品折扣:{{discount}}</p>
<p>折后价格:{{lastPrice}}</p>
</div>
</template>
<script>
export default {
data(){
return {
price:20.00,
rate:0.8
}
},
created(){
console.log('test-created');
setInterval(() => {
this.chgPrice();
},5000)
},
methods:{
chgPrice(){
this.price++;
}
},
computed:{// computed中方法，页面直接渲染可以使用;
discount:{// 有set和没有set这里格式不同;
get(){
return this.rate * 10 + " 折";
},
set(){
}
},
lastPrice(){
return (this.price * this.rate).toFixed(2);
}
},
watch:{
}
}
</script>
<style scoped>
</style>
相信坚持的力量，日复一日的习惯.
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
2018-04-04 微信测试账户
2018-04-04 crontab 定期拉取代码
2018-04-04 git revert HEAD