计算属性

计算属性

实现倒叙：

        <h1>{{name.split('').reverse().join('')}}</h1>
        <h1>{{reverse()}}</h1>
        <h1>{{name | res(1, 2, 3, 4)}}</h1>
        <h2>{{name2}}</h2>

{{name.split('').reverse().join('')}}

    methods: {
        reverse(){
            return this.name.split('').reverse().join('');
        }
    },

    filters: {
        res(val,n1,n2,n3,n4){
            return val.split('').reverse().join('');
        }
    }

只要name不发生变化，本函数就永远不会执行； DOM模板中使用的一直都是name2的缓存值 name2完全依赖于name

    computed: {
        //计算属性
        name2(){
            //简写方式
            return this.name.split('').reverse().join('');
        }
    }

只要函数用某些变量，那么计算属性就用这些变量

    name5: {
        //全写的内容：有一个get函数和set函数
        //简写只相当于一个get函数
        //这两个函数，可以只写一个get,但不能只写一个set
        get(){
            console.log('get');
            return this.name;//get的return值就是name5的值
        },
        set(val){
            console.log(val,'set');//val就是设置给name5的内容
        }
    }

有一个缺点

    computed:{
        name2(){
            //不支持异步;卸载异步函数中的变量 跟 name2 不存在依赖关系
            setTimeout(()=>{                    
                this.str =  this.name + 'computed';
            },0)
            console.log(this.name);
        }
    }

watch

• 性能没有computed高
• 能够使用异步

v-if

决定该标签是否要加载 会引发重绘

    <h1 v-if="isShow == 1">显示标签</h1>
    <h2 v-else-if="isShow == 2">标签2</h2>
    <h2 v-else>v-else</h2>

显示哪个标签看isShow属性的值 v-if v-else v-else-if 用的时候需要紧挨着，中间不能掺杂不相干的元素

v-show

决定元素是否隐藏 只能引发回流

    <h3 v-show="0">v___show</h3>

相当于

<h3 style="display: none;">v___show</h3>