-
1、computed（计算属性）、watch（侦听器）和methods的区别：
（1）coputed和watch是自动调用相关函数去实现数据的变动，当一个数据发生变动，所有依赖这个数据的相关数据都会发生变动
（2）methods是定义函数，需要手动调用
-
2、computed和watch的区别
computed适用于一个数据受多个数据影响，自动监听数据的变动，watch适用于一个数据影响多个数据，没有computed那么‘自动’
-
3、computed的使用
<template>
<div id=''>
<div class="computed">
<p>
<input type="text" v-model="num" placeholder="数字">
</p>
<p>+</p>
<p>
<input type="text" v-model="nums" placeholder="数字">
</p>
<p>=</p>
<p>{{count}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
num:0,
nums:0
}
},
computed: {
count(){
return parseInt(this.num)+parseInt(this.nums)
}
},
}
-
watch的使用
<template>
<div id=''>
<div class="watch">
<p><input type="text" v-model="name" placeholder="输入姓名"></p>
<p>{{nameOne}}</p>
<p>{{nameTwo}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name:"",
nameOne:"",
nameTwo:""
}
},
watch: {
name(newName){
if(newName==""){
this.nameOne="";
this.nameTwo=""
return;
}
this.nameOne=newName+"好帅";
this.nameTwo=newName+"好棒啊"
}
},
}
