computed和watch之间的区别
computed和watch之间的区别
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，
这样this的指向才是vm或组件实例对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_watch实现</title>
<!--引入Vue-->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName"><br /><br />
名: <input type="text" v-model="lastName"><br /><br />
全名: <span>{{fullName}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
//设置异步任务定时处理
setTimeout(() => {
this.fullName = val + '-' + this.lastName
}, 1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
},
//coumputed无法进行异步任务
// computed:{
// fullName(){
// console.log('get被调用了');
// return this.firstName + '-' + this.lastName
// }
// }
})
</script>
</html>
