03-计算属性

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>{{nowMethods()}}</p>
</div>

<div id="demo">{{ fullName }}</div>


注意点：
    我们可以将同一函数定义为一个方法而不是一个计算属性。
    两种方式的最终结果确实是完全相同的。
    不同的是计算属性是基于它们的响应式依赖进行缓存的


<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        //计算属性
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            },

            //计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
            fullName: {
                // getter
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        },
        //方法
        methods: {
            nowMethods: function () {
                return new Date().toLocaleString()
            }
        }
    })

    var demoVm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        //侦听属性
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
</script>