Vue中computed和watch的区别
computed 计算属性1.computed 它是一个计算属性,会计入缓存中,优先从缓存中加载2.只有依赖数据发生改变,才重新计算3.如果一个属性是有多个属性计算而来,这个属性依赖多个属性(也就是多对一或者一对多),一般用computed4.如果computed计算属性是一个函数,那么会触发get()方法,该方法返回computed属性的属性值5.在computed中,每个属性都对应一个get/
·
computed 计算属性
1.computed 它是一个计算属性,会计入缓存中,优先从缓存中加载
2.只有依赖数据发生改变,才重新计算
3.如果一个属性是有多个属性计算而来,这个属性依赖多个属性(也就是多对一或者一对多),一般用computed
4.如果computed计算属性是一个函数,那么会触发get()方法,该方法返回computed属性的属性值
5.在computed中,每个属性都对应一个get/set()方法,当数据发生改变时,会触发set()
上面说了computed会进行缓存,那么它是基于什么来进行的???
computed是基于响应式依赖进行缓存的
响应式依赖:data中的数据获取props中的属性
watch侦听器
watch监听属性,用于监听data里面的数据变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<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 type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
侦听器
*/
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
fullName: 'Jim Green'
},
// computed: {
// fullName: function(){
// return this.firstName + ' ' + this.lastName;
// }
// },
watch: {
// firstName: function(val) {
// this.fullName = val + ' ' + this.lastName;
// },
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
</body>
</html>
更多推荐
已为社区贡献4条内容
所有评论(0)