- computed也是vm的一个属性对象
- 在computed中，可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候，是把他们的名称直接当作属性来使用的，并不会把计算属性当作方法使用
- 注意事项
- 注意一：计算属性在引用的时候一定不要加()去调用，直接把它当作普通属性去使用就好了
- 注意二：只要计算属性function内部所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值
- 注意三：计算属性的求值结果，会被缓存起来，方便下次直接使用，如果计算属性方法中，所有来的任何数据都没有发生过变化，则不会重新对计算属性求值
- 代码demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08使用computed监控数据动态变化</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="first"> +
<input type="text" v-model="second"> =
<input type="text" v-model="full">
<p></p>
{{ full }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
first: '',
second: '',
},
method:{},
computed:{
full(){ //full方法名会被当做data属性来使用，并且first和second有任何变化都会调用full方法更新数据
console.log('11111') //用来测试full值发生变化只会计算一次，页面其他地方使用的时候直接从缓存里读取
return this.first + "----" + this.second
}
}
})
</script>
</body>
</html>
- method，watch和computed的区别：
- computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用
- methods方便表示一个具体的操作，主要书写业务逻辑
- watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些待定数据的变化，从而进行某些具体的业务逻辑操作；可以看做是computed和methods的结合体
网友评论