vue的方法methods、计算属性computed和过滤器filters专栏。
1.三者功能使用
<div id="app">
<p>原字符串: {
{
message }}</p>
<p>methods字符串: {
{
messageMet()}}</p> //--> methods字符串：!boonuR
<p>conputed反转字符串: {
{
messageCom }}</p> //--> conputed字符串：!boonuR
<p>filters反转字符串: {
{
message | messageFil }}</p> //--> filters字符串：!boonuR
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods:{
messageMet(){
return this.message.split('').reverse().join('')
}
},
computed: {
// 提供的函数将用作messageCom的getter
// 值依赖于 vm.message，在 vm.message 发生改变时，vm.messageCom也会更新。
messageCom(){
return this.message.split('').reverse().join('')
}
},
filters: {
messageFil (val) {
return val.split('').reverse().join('')
}
},
})
</script>
2.比较异同
methods与computed的 异同
- 同：响应功能一致
- 异：
methods在重新渲染时函数会重新调用执行；computed基于依赖缓存，只有相关依赖发生改变时才会重新取值
computed与filters的异同
- 同：所有值都需要return出去
- 异：如下表所示：
| 方面 | computed | filters |
|---|---|---|
| 依赖实例 | 依赖于一个固定的vue实例 ，在某一个实例中使用 | 不依赖于实例。可以 定义一个全局过滤器，在多个实例中使用 |
| 参数/变量 | 不接受额外参数，依赖于data属性中的变量 | 不要求是data中的变量，可以是临时变量。可接受额外参数 |
| 缓存 | 有缓存管理机制，可减少页面调用次数 | 无缓存机制，调用次数，取决于页面中有所多少过滤器 |
| 可读可写 | 计算属性虽默认为只读，但可以定义为对象，开启可读可写模式 | 只能读取操作 |
| 使用 | 计算属性被作为一个类属性调用 | 过滤器被作为一个特殊方法处理 |