$set
vue中给obj复杂数据，动态添加属性。
已知watch obj需要deep，那么设置新属性让页面实时更新也要用$set。不知道就会找bug半天卡住。
理解watch能不能实现计算属性，就基本理解了
<!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>
网友评论