版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/soulwyb/article/details/86228326
computed： 用来做计算返回结果
示例：
<!DOCTYPE html>
<head>
<title>计算属性，方法，监听器</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{FullName}}
{{age}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
FirstName: 'Dell',
LastName: 'Lee',
age: 28
},
computed: {
FullName: function() {
console.log("计算了一次");
return this.FirstName + ' ' + this.LastName;
}
}
})
</script>
</html>这样不需要设置FullName就可以得出结果返回到页面上
计算属性有缓存机制,在相关计算元素没有改变的情况下 是不会触发计算属性重新计算的
属性。通过方法来调用。 示例：
注意：插值表达式中的表达式加了“()”
<!DOCTYPE html>
<head>
<title>计算属性，方法，监听器</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{FullName()}}
{{age}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
FirstName: 'Dell',
LastName: 'Lee',
age: 28
},
// 方法
methods: {
FullName: function() {
console.log("计算了一次");
return this.FirstName + ' ' + this.LastName;
}
}
})
</script>
</html>使用方法监听数据的话。不会有缓存机制 不管跟自己有关没关的数据 更改了 它都重新计算一次
wacth监听：
用watch监听。效果跟计算属性一样。就是代码比较冗余
示例：
<!DOCTYPE html>
<head>
<title>计算属性，方法，监听器</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{FullName}}
{{age}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
FirstName: 'Dell',
LastName: 'Lee',
FullName: 'Dell Lee',
age: 28
},
// 监听
watch: {
FirstName: function() {
console.log("计算了一次");
this.FullName = this.FirstName + ' ' + this.LastName
},
LastName: function() {
console.log("计算了一次");
this.FullName = this.FirstName + ' ' + this.LastName
}
}
})
</script>
</html>使用监听的时候一开始不会调用（因为是现成的数据，除非一开始渲染页面的时候就修改了被监听的数据 比如生命周期函数中的代码）
在所监听的数据发生改变的时候才会触发
