Vue.js 官方文档摘记 计算属性

计算属性

计算属性

这里的计算表示的是名词，代表

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属性

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

能提供更加丰富的内容显示。