vue2计算属性、方法、及侦听笔记

1. 计算属性：基于它们的依赖进行缓存。只有在依赖发生变化时，计算属性才会重新求值。

<div id="app">
    <p>{{reverseMessage}}</p>
</div>

const vm = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue !',
                checkedNames:[],
                msg:'',
            },
            computed:{
                reverseMessage:function () {
                    return this.message.split('').reverse().join('');
                }
            }
        });

2. 方法：每当触发事件时，调用方法总是会执行函数。对于一个需要对巨大数组进行计算的情况，不管数据改变与否，都要执行一次方法，显然性能不佳。

<div id="app">
    <p>{{reverseMsg()}}</p>
</div>
const vm = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue !',
                checkedNames:[],
                msg:'This is a world'
            },
            computed:{
                reverseMessage:function () {
                    return this.message.split('').reverse().join('');
                }
            },
            methods: {
                reverseMsg: function () {
                    return this.msg.split('').reverse().join('');
                }
            }
        });

3. 侦听属性：Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="app">
    <input type="checkbox" v-model="check" name="sel"><label>添加</label> 
</div>

const vm = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue !',
                checkedNames:['beijing'],
                msg:'This is a world',
                check:false
            },
            computed:{
                reverseMessage:function () {
                    return this.message.split('').reverse().join('');
                }
            },
            methods: {
                reverseMsg: function () {
                    return this.msg.split('').reverse().join('');
                }
            },
            watch:{
                check() {
                    if(this.check){
                        this.checkedNames.push('shanghai');
                    }else{
                        this.checkedNames.splice(1,1);
                    }
                    console.log(this.checkedNames);
                }
            }

        });