Vue学习笔记[03]-计算属性和方法
2019-10-10 本文已影响0人
神楽花菜
什么是vue的方法
vue的方法和之前的el,data一样,是vue实例的options参数,可以随vue的实例构造传入.下面是两个例子介绍了methods的基本用法:
<!--未使用methods的例子-->
<body>
<div id="app">
<button @click='counter++'>click me {{counter}} times!</button>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
counter:0,
}
})
</script>
在上一个例子中,我们没有使用methodsoptions,因为我们的事件处理足够简单,基于vue的响应式,我们可以动态的改变button标签中的counter变量的值.可是一旦事件处理的函数十分冗长,我们就不适合在html标签中写入方法.还好methods可以拯救我们:
<body>
<div id="app">
<button @click='addCounter()'>click me {{counter}} times!</button>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
counter:0,
},
methods:{
addCounter:function(){
this.counter++;
}
}
})
</script>
这里的methods中封装了让counter增加的方法,效果和之前的一样.
有时,我们需要对html中呈现的内容做一些处理,例如把姓和名连接在一起,我们可以这样做
<body>
<div id="app">
<li>name:{{firstname}} {{lastname}}</li>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
firstname: 'Sam',
lastname: 'Smith',
},
})
</script>`
也可以借助方法来实现
<body>
<div id="app">
<li>name:{{firstname}} {{lastname}}</li>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
firstname: 'Sam',
lastname: 'Smith',
},
methods:{
getFullName:function(){
return this.firstname + ' ' + this.lastname;
}
}
})
</script>`
另一种方法使用 计算属性(computed) 来实现.
计算属性
计算属性也是一种vue的options,其中一般定义一些需要格式化或者处理的属性.
<html>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<body>
<div id="app">
<li>name:{{firstname}} {{lastname}}</li>
<li>Name:{{getFullName()}}</li>
<li>Name:{{fullName}}</li>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
firstname: 'Sam',
lastname: 'Smith',
},
methods: {
getFullName: function () {
return this.firstname + ' ' + this.lastname;
}
},
computed: {
fullName: function () {
return this.firstname + ' ' + this.lastname;
}
}
})
</script>
</html>
那么,methods和computed有什么区别呢?
首先,computed中更加偏向于同firstname和lastname一样作为属性存在,在使用时也不需要加()在阅读时更加统一.
其次,计算属性是有一定缓存的,这意味着在使用计算属性时,若属性的值未发生变化,只需调用一次计算属性的方法.而在methods中定义的方法没有缓存,无论值是否改变,都需要多次调用.来看下面的例子:
<body>
<div id="app">
<li>Name:{{getFullName()}}</li>
<li>Name:{{getFullName()}}</li>
<li>Name:{{getFullName()}}</li>
<li>Name:{{getFullName()}}</li>
<li>Name:{{getFullName()}}</li>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
firstname: 'Sam',
lastname: 'Smith',
},
methods: {
getFullName: function () {
console.log('被调用');
return this.firstname + ' ' + this.lastname;
}
},
})
</script>
image
<body>
<div id="app">
<li>Name:{{fullName}}</li>
<li>Name:{{fullName}}</li>
<li>Name:{{fullName}}</li>
<li>Name:{{fullName}}</li>
<li>Name:{{fullName}}</li>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
firstname: 'Sam',
lastname: 'Smith',
},
computed: {
fullName: function () {
console.log('被调用');
return this.firstname + ' ' + this.lastname;
}
},
})
</script>
</html>
image
因为计算属性的值未发生变化,所以计算属性的方法只被调用了一次.通过在控制台输入vm.firstname = 'OtherName'后可发现计算属性的方法又被调用了.同时HTML中显示的内容仍然被响应式的修改.
