Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别
2024-10-19 11:35:00
一、 计算属性(computed)
1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。
例如:
<div id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</div>
运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。
因此可改写为:
<body>
<div id="app">
{{ changewords }} // 渲染 不用写()
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{},
// 计算属性
computed:{
changewords(){
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>
总结:
1.变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号 。
2.根据传入的变量的变化 进行结果的更新。
3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。
计算属性模糊查询的例子:
<body>
<div id="app">
<input type="text" v-model="mytext">
<ul>
<li v-for="data in datalistcom" :key="data">
{{ data }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
mytext:''
},
computed:{
datalistcom(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>
二、监听属性(watch)
上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。
当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。
例子 :
<body>
<div id="app">
<p>单价:<input type="text" v-model="price"></p>
<p>数量:<input type="text" v-model="number"></p>
<p>计算金额:{{sum}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
//监听某一个值或者状态发生变化 变化就会触发watch
watch:{
// 监听的参数的名字要一致
price(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
},
number(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
}
}
})
</script>
计算属性 和属性监听的区别:
1.计算属性变量在computed中定义,属性监听在data中定义。
2.计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。
最新文章
- 用RMAN备份EBS数据库的脚本
- B - I Hate It
- 【MVC学习笔记01】初窥奥秘
- linux下vim的常用指令
- 转:MVC2表单验证失败后,直接返回View,已填写的内容就会清空,可以这样做;MVC2输出文本;MVC2输出PDF文件
- 解决php json_encode 出现的中文转码、乱码问题
- iOS类别(Category)和扩展(Extension,匿名类)
- 修改sqlserver的数据库排序规则语句
- 针对Student表的DAO设计实例
- spring mvc 整合Quartz
- 自学华为IoT物联网_04 车联网常见问题及解决方案
- 2018-2019-2 20165302程上杰 Exp6 信息搜集与漏洞扫描
- [模板][P3796]AC自动机(加强版)
- Excel数据批量导入到SqlServer的方法
- Andorid之ActivityManager
- 安装php环境
- MATLAB等距扇形反投影分析
- express + vue 项目搭建
- HDU 1166 敌兵布阵 <;线段树 单点修改 区间查询>;
- 在CentOS 7上构建RAID5、LVM和SAMBAserver(5)——架设SAMBAserver