计算属性
计算属性
这里的计算表示的是名词,代表computed
选项,被中文翻译到“计算属性”。
可以看作是使用Vue来修改文档中的模板。
基础例子
<div id='example1'>
<p>这里是基础的模本:{{message}}</p>
<p>这里是使用计算属性修改的内容:{{reversedMessage}}</p>
</div>
下面是Vue代码
var vm=new Vue({
el:"#example",
data:{message:"模板渲染内容"},
computed:{
reversedMessage:function(){
return this.message+"this表示该vm对象本身";
}
}
});
computed的缓存 vs Methods
下面用到的methods
也是Vue的一个属性,关于该属性的资料看这里。
上面的功能,也可以使用methods
方法进行修改,内容如下:
var vm=new Vue({
el:"#example",
data:{message:"这里还是一样的"},
methods:{
reversedMessage:function(){
return this.message+"这里是使用methods方法实现的";
}
}
});
不过上面不能使用模板语法的方式来调用了,而是要修改成这样的形式:
<p>{{ reversedMessage() }}</p>
可以看到这里像调用函数一样,调用了methods
里面的方法。两种实现方法实现了相同的功能,那么本质上有什么区别呢?区别在与缓存。
- computed,上面的例子中,reversedMessage与message是绑定在一起的,如果message发生改变,则reversedMessage也会重新计算,如果message不发生改变,则会直接读取上次的缓存值
- methods,则是每次都是按照计算方法计算新的值
看你需求了,用哪个。
computed属性 vs Watch属性
使用该属性可以监视Vue实例上数据的发生改变,所以也可以通过他来设置相应的值,但是其与computed
属性的区别,文档里面只是给了一个例子:
<div id='example2'>{{fullName}}</div>
var vm=new Vue({
el:"#example2",
data:{
firstName:"FirstName",
lastName:"LastName",
fullName:"FirstName LastName"
},
watch:{
firstName:function(val){
this.fullName=val+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+val;
}
}
});
但是使用computed
方法:
var vm=new Vue({
el:"#example2",
data:{
firstName:"FirstName",
lastName:"LastName"
},
computed:{
fullName:function(){
return this.firstName+this.lastName;
}
}
});
如果说上面的两个方法有什么区别的话,那么我个人感觉是computed
方法不需要管外部数据,只需要关注如何提交一个结果,而不像watch
需要关注是那个对象触发了改变。
computed的set
computed
属性默认是只有get
,但是也支持设置set
。
var vm=new Vue({
fullName:{
get:function(){
return "外部调用vm.fullName使就会得到该数据";
},
set:function(value){
this.fullName=value;
}
}
});
这样当外部调用vm.fullName='FirstName LastName'
时,就会自动调用set
后面的函数。
观察 watchers
这个例子是为了说明watch
这个属性的好处。
<div id='example3'>
<p>在下面输入一个问题,会调用一个api进行查询和回答:
<input v-model='question'>
</p>
<p>{{answer}}</p>
</div>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
var watcherExampleVM=new Vue({
el:"#example3",
data:{
question:"",
answer:"先输入内容,然后才能得到结果。"
},
watch:{
question:function(newQuestion){
this.answer="等待输入完成",
this.getAnswer()
}
},
methods:function(){
getAnswer:_.debounce(
function(){
var vm=this;
if(this.question.indexOf("?")===-1){
vm.answer="结尾一定要带 ? ";
return;
}
vm.answer="Thinking...";
axios.get("https://yesno.wtf/api")
.then(function(response){
vm.answer=_.capitalize(response.data.answer);
})
.catch(function(error){
vm.answer="API调用失败";
})
}
),500
}
});
首先上面那段代码我看不太懂,因为有调用一个新的js框架:Lodash,但是上面那段代码的意思就是,与computed
相比,watch
能提供更加丰富的内容显示。