本文摘自PHP中文网,作者angryTom,侵删。
本篇文章介绍了vue中的计算属性computed和监听属性watch的区别,希望对学习vue前端框架的同学有帮助!一、 计算属性(computed)
1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。
例如:
1 2 3 | <p id= "app" >
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</p>
|
运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。
因此可改写为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。
计算属性模糊查询的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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。
例子 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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:{
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。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。
以上就是Vue中Computed和Watch的用法及区别的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
es6 filter()方法如何实现?用法介绍
js实现滑动进度条
vue和react监听数据的区别是什么?
vue 3.2发布啦,站起来继续学!
原生js和js的区别是什么
一个实例入门vue计算属性、方法、侦听器
简单实用的进度条加载组件loader.js
js如何实现滑动门效果
为什么vue不使用ajax
js写后端用什么框架
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Vue中Computed和Watch的用法及区别