一、计算属性computed
computed是计算属性，也就是计算值，多用于计算值的场景不支持异步，当
computed内有异步操作时无效，无法监听数据的变化computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值才会重新调用对应的getter来计算。也就是说，只有依赖数据发生改变时，才会重新进行计算如果一个属性是由其他属性计算而来，这个属性依赖其他属性，一般用
computed如果
computed属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值，在computed中，属性都有一个get和set方法，当数据变化时调用set方法computed适用于计算比较消耗性能的计算场景可以当属性直接使用
<body> <script src="js/vue.js"></script> <div id="app"> <input type="text" v-model="num1" />+ <input type="text" v-model="num2" />= <input type="text" v-model="sum"> </div> <script> var vm = new Vue({ el: "#app", data: { num1: 0, num2: 0 }, computed:{ sum(){ let num3 = parseInt(this.num1)+parseInt(this.num2); return num3;//必须有return } } }) </script> </body> </html><body> <script src="js/vue.js"></script> <div id="app"> <input type="text" v-model="num1" />+ <input type="text" v-model="num2" />= <input type="text" v-model="sum"> </div> <script> var vm = new Vue({ el: "#app", data: { num1: 0, num2: 0 }, /* 计算属性 get:会在获取属性值的时候调用，当依赖的属性发生变化的时候，会调用 getter set：会在设置属性值的时候调用，当sum发生改变的时候，会调用setter, setter中如果引起num1或者num2发生变化，会再次调用getter */ computed: { sum: { get: function () { let num3 = parseInt(this.num1) + parseInt(this.num2); return num3; //必须有return }, set: function (newValue) { console.log(newValue) //this.num2 = newValue-this.num1; } } } }) </script> </body> </html>示例
<script src="js/vue.js"></script>
<body>
<div id="app">
<h2>总价：{{totalPrice}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
// 计算下面这些书籍的总价
books:[
{id: 101,name: 'Uinx编程技术',price: 108},
{id: 102,name: '代码大全',price: 99},
{id: 103,name: '深入理解计算机原理',price: 70},
{id: 104,name: '现代操作系统',price: 58},
]
},
// 计算属性，不同于方法，其类似于变量
computed: {
// 在定义计算属性时，一般不加动词get等，命名方式类似变量，在模板中也同变量一样使用
totalPrice: function(){
let result = 0;
for (i = 0; i < this.books.length; i++){
result += this.books[i].price;
}
return result;
}
}
})
</script>
</body>
</html>二、watch监听属性
watch是一个侦听的动作，用来观察和响应Vue实例上的数据变动
更多的是"观察"的作用，类似于某些数据的监听回调，用于观察
props、$emit或者本组件的值，当数据来回变化时来执行回调进行后续操作无缓存性，页面重新渲染时值不变化也会执行
watch支持异步
监听的函数接收两个函数，第一个参数是新值，第二个参数是旧值
当一个属性发生变化时，需要执行对应的操作
应用场景
根据tab的切换，不管在哪个页面修改了数据，点击切换的时候要提示未保存，是否确认离开。这里就用到侦听器了，监听数据的变化
数据变化时执行异步或开销较大的数据：
验证用户名是否可用：需求：输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用
<body>
<script src="js/vue.js"></script>
<div id="app">
<div>
<span>名：</span>
<span>
<input type="text" v-model="firstName">
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model="lastName">
</span>
</div>
<div>{{fullName}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: 'hello',
lastName: 'vue',
fullName: 'hello vue'
},
computed: {
// fullName: function(){
// return this.fullName = this.firstName + ' ' + this.lastName;
// }
},
watch: {
firstName(newval, oldval) {
//可以得到变化前后的值
console.log(newval,oldval);
this.fullName = newval + ' '+ this.lastName;
},
lastName(newval, oldval) {
//可以得到变化前后的值
console.log(newval,oldval);
this.fullName = this.firstName + ' '+ newval;
}
}
})
</script>
</body>
</html>三、computed计算属性和watch监听属性的区别
| computed计算属性 | watch监听属性 |
|---|---|
| get函数中必须要有return | watch中的函数return可有可无 |
| computed 计算属性名称可以自定义 | watch中的名称必须和data中的名称一致 |
| computed 计算属性具备缓存 | watch不具备缓存 |
| computed 计算属性适合处理一些复杂的数据运算 | watch适合处理一些消耗性能的需求，比如：Ajax请求等等 |
当要进行数值计算，而且依赖于其他数据，那么把这个数据设计为
computed如果需要在某个数据变化时做一些事情，使用
watch来观察这个数据变化
本文含有隐藏内容，请 开通VIP 后查看