vue.js 计算属性 学习笔记

版权声明：如果觉的本文好的话，点个赞，您的鼓励是我最大的动力。 https://blog.csdn.net/boysky0015/article/details/82951327

<div id='app'>
	{{ message.split('').reverse().join('') }
</div>

在这个地方模板不再是简单的声明式逻辑。这里是想要反转字符串message。当你想要在模板中多次引用此处的反转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
提问：
（1）当你想要在模板中多次引用此处的反转字符串时，就会难以处理。
看一下下面这两种写法的区别：
<1>第一种写法

<div id="app">
    计算前的属性：{{ message }}
    <div>
        计算后的属性：{{ reversedMessage }}
    </div>
</div>
var app = new Vue({
   el: '#app',
   data: {
      message: '旁边有个小姐姐很漂亮'
   },
   computed: {
       reversedMessage: function() {
           return this.message.split('').reverse().join('');
       }
   },
})

<2>第二种写法：

<div id="app">
   计算前的属性：{{ message }}
    <div>
        计算后的属性：{{ reversedMessage() }}
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
           message: '旁边有个小姐姐很漂亮'
        },
        
        methods: {
            reversedMessage: function() {
                return this.message.split('').reverse().join('');
            }
        },
    })
</script>

第一种写法用的是计算属性 computed，因此我的理解是调用时用属性的方式。
第二种写法用的是方法methods，因此我的理解是调用时用方法的方式。
computed和methods的区别：
computed是基于它们的依赖进行缓存的，只在相关依赖发生改变时才会重新求值。
而使用methods，在重新渲染的时候，函数总会重新调用执行。

computed setter
computed默认只有getter，不过需要时你可以使用setter。

<div id="app">
    计算前的属性：{{ message }}
    <div>
        计算后的属性：{{ reversedMessage }}
    </div>
    <div>
        {{ site }}
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: '旁边漂亮的女孩',
            url: 'www.baidu.com',
            message: '旁边有个小姐姐很漂亮'
        },
        computed: {
            reversedMessage: function() {
                return this.message.split('').reverse().join('');
            },
            site: {
                get: function() {
                	return this.name + ' ' + this.url;
                },
                set: function(newValue) {
                    let names = newValue.split(' ');
                    this.name = names[0];
                    this.url = names[names.length - 1]
                }
            }
        },
    })
    //调用setter，app.name app.url 也会相应的更新。
    app.site = '一定要有所作为 www.google.com';
    document.write('name: '+ app.name );
    document.write('<br />');
    document.write('url: '+app.url);
</script>

提问：
（1）这个set有什么作用呢？
回答：可以改变app.site 的值。