watch监听和computed计算属性
vue中必问,回答不清楚说明不了解,也会在日常中写错。
监听除去new关键词写时换成newVal外,监听值变化,做业务操作。
computed可以缓存结果,依赖a和b返回新c,具有返回数值。当需要新值c,并且依赖其余时要第一个想到。
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>法外狂徒张三</h3>
姓名:<input type="text" v-model="name">
诨号:<input type="text" v-model="txt">
<p>
显示: {{tip}}
</p>
ps:面试官问:watch不能实现computed的功能?
<p>
<input type="radio" name="a" value="不能" v-model="res">不能
<input type="radio" name="a" value="能" v-model="res">能
</p>
<p style="color:red" v-show="res==='不能'">没理解!!</p>
<p style="color:green" v-show="res==='能'">理解!!</p>
</div>
<script>
// 初始化vue
var app=new Vue({
el:'#app',
data() {
return {
res:'',//结果
name:'',
txt:'',
tip:''
}
},
computed: {
// 函数才有return
// 思考能不能直接tip() ? 而且不删除return中tip为什么会报错
},
watch:{
name:function(newVal,oldVal) {
console.log(1);
this.tip=this.txt+newVal
},
txt:function(newVal,odlVal) {
this.tip=newVal+this.name
}
}
})
</script>
</body>
</html>
···
网友评论