Vue中watch与computed的区别
2024-10-13 02:04:14
一、 计算属性（computed）
1.计算属性是为了模板中的表达式简洁，易维护，符合用于简单运算的设计初衷。对于运算过于复杂，冗长，且不好维护，因此我们对于复杂的运算应该 使用计算属性的方式去书写。
下面来看代码体验一下吧
<div id="app">
<h1>
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</h1>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
myname: 'xiaowu3'
}, })
</script>
由上可以看出在html标签中的代码过多，不方便于我们进行对代码的管理，因此我们可以利用计算属性computed对其进行简化
<div id="app">
<h1>
{{ changewords}}
</h1>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
myname: 'xiaowu3'
},
computed: {
changewords() {
return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
}
} })
</script>
总结：
1.变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号 。
2.根据传入的变量的变化 进行结果的更新。
3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次 计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算 一次，为了进行不必要的资源消耗，选择用计算属性。
二、监听属性（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>
const app = new Vue({
el: "#app",
data: {
price: 100,
number: 1,
sum: 100
},
//监听某一个值或者状态发生变化 变化就会触发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
} else {
this.sum = this.price * this.number
}
}
}
})
</script>
三.它们的使用场景
computed ：
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子： 如购物车商品结算的时候
watch：
当一条数据影响多条数据的时候就需要用watch
如搜索数据
最新文章
- js原型继承的几种方式
- Mac系统上用Node做APNS
- Session丢失的解决办法小结
- HBase的数据迁移（含HDFS的数据迁移）
- mialx配置qq邮箱发送邮件
- [saiku] 配置spring-security 允许 iframe加载saiku首页
- GridView導出Excel
- autofac meta
- SQL Prompt Snippet Manager 妙用
- 【Lucene4.8教程之一】使用Lucene4.8进行索引及搜索的基本操作
- LLVM每日谈21 一些编译器和LLVM/Clang代码
- 7、Objective-C中的各种遍历（迭代）方式
- 强大的API测试工具Hitchhiker v0.9 基于UI的断言测试，回顾2017
- Python基础_函数闭包、调用、递归
- IDEA: Call Hierarchy
- SyntaxError: JSON.parse: bad control character in string literal at line 1 column 16 of the JSON data
- mac下查看和设置环境变量
- iOS 坐标转换
- 装饰者模式——Java设计模式
- python之路之函数02