昨天介绍了computed的基本使用方式，今天多讲一点点有关methods的，
大家准备好了吗ε٩(๑> ₃ <)۶з

计算属性缓存Computed Caching vs 方法Methods

我们昨天写的例子(翻转字串)，其实也可以用methods达到一样的效果欧⁽⁽◟(∗ ˊωˋ ∗)◞ ⁾⁾

<div id="app">
        <p>原本的字串: "{{ message }}"</p>
        <p>methods倒转过後的字串: "{{ reversedMessage1() }}"</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
           message: 'Hello'
        },
        methods:{
            reversedMessage1: function () {
               console.log('methods')
                return this.message.split('').reverse().join('')
            }
        }
    });
</script>

可以看到跟昨天computed出来的结果一样。

那两者的差异是什麽呢ヾ(´･ ･｀｡)ノ”

Methods是一个function要用呼叫的，像上面范例 reversedMessage1( ) ，每呼叫一次就会重新执行，但如果没有显示在画面上就不会自动更新(可以呈现连动或不连动的状态)，且不管资料是否相依都会计算。

Computed可以看作是一个参数属性，直接丢出来就可以使用显示(直接双大括弧)，显示上比较容易辨别，当原始资料来源没有变动，就只会执行一次，把结果cache住，只後不管要呼叫读取几次都会直接给一样的答案，原始资料改变才会再run一次(响应式依赖)，效率会比较高，但如果找不到可以响应的资料，就不会连动，所以computed内一定至少有一个vue的连动资料型。

computed不会连动的情形

<div id="app">
    <p>computed:{{dateComputed}}</p>
    <p>methods:{{dateMethods()}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
         data: {
            message: 'Hello'
        },

        computed: {
            dateComputed: function(){
                return Date.now()
            }
        },
        methods:{
            dateMethods: function(){
                return Date.now()
            }
        }
    });
</script>

我们在console里面分别读取vm.dateComputed跟vm.dateMethods会发现computed中的数字(时间)一直停留在执行时的样子，而methods中的则会随着时间改变，这就是因为computed中没有相依的data。

两个一起执行看看，观察一下console吧o(｀ω´ )o

我们在computed跟methods中都加入console.log()让我们能在控制台观察牠们有无被执行。

<div id="app">
    <p>原本的字串: "{{ message }}"</p>
    <p>computed倒转过後的字串: "{{ reversedMessage }}"</p>
    <p>methods倒转过後的字串: "{{ reversedMessage1() }}"</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        computed: {
            reversedMessage: function () {
                console.log('computed')
                return this.message.split('').reverse().join('')
            }
        },
        methods:{
            reversedMessage1: function () {
                console.log('methods')
                return this.message.split('').reverse().join('')
            }
        }
    });
</script>

我们在console输入vm.reversedMessage会得到computed中的内容”olleH”但computed并没有再执行一次。
但当我们输入vm.reversedMessage1( )我们不只会得到methods中的内容”olleH”，也会在console中看到methods有被执行。
如果是改变message的内容，则两者都会重新执行!

补充:
如果computed跟methods方法名称设一样的话会发生什麽事勒(๑•﹏•)⋆* ⁑⋆*

我们来试试看，把上面的例子两个都设为reversedMessage

<div id="app">
    <p>原本的字串: "{{ message }}"</p>
    <p>computed倒转过後的字串: "{{ reversedMessage }}"</p>
    <p>methods倒转过後的字串: "{{ reversedMessage() }}"</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        computed: {
            reversedMessage: function () {
                console.log('computed')
                return this.message.split('').reverse().join('')
            }
        },
        methods:{
            reversedMessage: function () {
                console.log('methods')
                return this.message.split('').reverse().join('')
            }
        }
    });
</script>

看结果我们会发现methods会优先於computed，所以computed会没办法执行!!

但大家还是记得名称要设不一样喇，补充结束(๑¯∀¯๑)