第三阶段 Vue day04

watch

watch 能干什么

            1. 监听数据的变化，然后去干些事情

 key:value  key是要监听的数据，value是要处理的函数

// 普通模式

f1:function(n,o){   // newVal oldVal

       this.ff = n+this.f2;

 },

 // 对象形式

            f1:{

                handler:function(newVal,oldVal){

                    this.ff = newVal+this.f2;

                },

                immediate:true,  // 立即执行一遍（适用于有默认值的）

                deep:true,     // 是否是深度监听（适用于监听对象，数组）

            },

            f2:{

                handler:function(newVal,oldVal){

                    this.ff = this.f1+newVal;

                },

                immediate:true,

            },

// 只监听一个（监听数据中的一个）

            'person.age'(){

                console.log(666);

            }

computed:{  // 也能完成监听的事

            ff(){

                return this.f1+this.f2

     }

}

 watch与computed的对比：

            1,computed 能做的事情，watch都能做

            2，推荐使用computed的原因

                2.1 代码量更小

            3，computed 必须要有返回值，watch没这个概念

            4，watch中可以有异步代码，computed中不能有异步

computed与methods的对比：

            1. computed能做的事情，methods都能做

            2. computed 有缓存

class和style

class

            1.可以本身有一个class，然后再绑定一个class，Vue会将两个class拼接使用

 <div class="app">

        <!-- 其他标签属性没有这种拼接的特点 -->

        <!-- <p class="box" :class="box2">邱</p> -->

        <!-- class字符串用法 -->

        <div class="box" :class="'box1'">邱</div>

        <!-- class对象用法  key:类名 value:boolean -->

        <div class="box" :class="{box1:isAdd,box2:xxx}">邱</div>

        <!-- class数组用法  -->

        <div class="box" :class="['box2',xxx,{box1:age>18}]">邱</div>

   

        <!-- style 对象的用法(样式对象)。key：css属性，需要转换为驼峰写法 -->

        <div class="box" :style="{fontSize:fontSize+'px'}">黄</div>

        <div class="box" :style="{fontSize:fontSize2}">黄</div>

        <!-- :style 数组的用法 ，每一项是个样式对象 -->

        <div class="box" :style="[{fontSize:'20px'},{backgroundColor:'red'}]">黄</div>

    </div>

<script>

    const app = new Vue({

        el:'.app',

        data:{

            isAdd:true,

            xxx:true,

            age:17,

            fontSize:18,

            fontSize2:'20px',

            // a:'color'

        }

    })

</script>

生命周期

生命周期的概念

            1，Vue会在一些阶段完成的时候，知道帮我们触发一些函数。

            2，这些函数就叫

        Vue2.x 中有 8 个生命周期钩子函数

 beforeCreate(){
            console.log('邱能出来不？');
        },
        created(){
            console.log('邱出来了');       // （常用） 1,初始数据请求
        },
        beforeMount(){
            console.log('DOM未经Vue预编译');
        },
        mounted(){
            console.log('DOM经过Vue预编译');     // （常用） 1,初始数据请求  2，绑定全局事件 3，定时器 4，操作真实DOM
        },
        beforeUpdate(){
            console.log('页面尚未和数据保持更新，数据是新的，页面是旧的');
        },
        updated(){
            console.log('页面是新的，数据是新的');
        },
        beforeDestroy(){
            console.log('快要死了');        // （常用） 1，收尾工作 2，解绑一些全局事件 3，clear清理工作
        },
        destroyed(){
            console.log('死掉了');
        }