vue学习笔记（二）

一、vue生命周期

vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。

这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。

beforeCreate(){  //组件实例刚刚创建，还未进行数据观测和事件配置
                
},
created(){  //实例已经创建完成，并且已经进行数据观测和事件配置
                
},
beforeMount(){//模板编译之前，还没挂载
                
},
mounted(){ //模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
                    
},
beforeUpdate(){//组件更新之前
                
},
updated(){//组件更新之后
                
},
beforeDestroy(){//组件销毁之前
                
},
destroyed(){  //组件销毁之后
                    
}

这几个钩子中，最常用的是created()与mounted()。

二、计算属性

计算属性也是用来存储数据，但具有以下几个特点：

• 数据可以进行逻辑处理操作
• 对计算属性中的数据进行监视

1、基本用法

<div id="app">
    {{addZero}}
</div>
    
new Vue({
    el: '#app',
    data: {
        num: 8
    },
    computed: {
        //这是计算属性的get方法，用于取值
        addZero() {
            return this.num > 10 ? this.num : '0' + this.num;
        }
    }
})

这里的addZero和num一样，都是属性。不过addZero是依赖于num、进行计算后的值。一旦num的值发生变化，addZero的值也会随之变化。

 <div id="app">
    {{num}}----{{addZero}}
    <br>
    <button type="button" @click="change">点击改变num</button>
 </div>
    
 new Vue({
    el: '#app',
    data: {
        num: 8
    },
    methods: {
        change: () => {
            this.num++;
        }
    },
    computed: {
        addZero:() => {
            return this.num > 10 ? this.num : '0' + this.num;
        }
    }
 })

一旦我们点击按钮改变num的值，那么因为计算属性实时监测依赖项，addZero也会跟着发生变化。

2、计算属性 vs 方法

将计算属性的get函数定义为一个方法也可以实现和计算属性类似的功能。那么二者之间有什么区别？

• 区别一：计算属性是基于它的依赖进行实时更新的，方法则是调用才更新
• 区别二：计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。操作一个没有依赖项的值也是如此。

官方文档给出了下面这个例子：

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性存在缓存，这里的now值不会发生变化。

3. get和set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。

        <div id="app">
        {{num}}----{{addZero}}
        <br>
        <button type="button" @click="change(5)">点击改变num</button>
    </div>
    
   new Vue({
        el: '#app',
        data: {
            num: 8
        },
        methods: {
            change(newNumber) {
                this.addZero = newNumber;
            }
        },
        computed: {
            addZero: {
                get() {
                    return this.num > 10 ? this.num : '0' + this.num;
                },
                set(newNum) {
                    this.num = newNum
                }
            }
        }
    })

我们再change方法中改变addZero属性的值的时候会自动调用它的set方法。

三、实例属性和方法

vue中给实例和属性提供了若干属性和方法。

1、属性

获取属性的语法：实例名.属性名
以下是常用的属性：

• vm.$el: 获取vue实例关联的元素DOM，进而可以对其进行操作
• vm.$data: 获取数据对象data
• vm.$options：获取选项，自定义的选项也可以在这里获取。
• vm.$refs：获取所有添加ref属性的元素dom对象，进而可以对其进行操作

2、方法

vm.$mount()

手动挂载vue实例

var vm=new Vue({
    data:{
        msg:'Hello vue.js'
    }
 }).$mount('#app');

vm.$destroy()

销毁实例

vm.$destroy();  //销毁实例所占的内存空间

vm.$nextTick(callback)

在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM

var vm=new Vue({
    data:{
        msg:'Hello vue.js'
    }
 }).$mount('#app');
 
 //修改数据
 vm.msg='foo';
 
 console.log(vm.$refs.title.textContent);  //Hello vue.js
 vm.$nextTick(function(){
    console.log(vm.$refs.title.textContent); //foo
 });

DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！使用$nextTick方法等DOM更新完再获取数据。

vm.$set(target,key,value)

通过vue实例的$set方法为对象添加属性，可以实时监视。

<div id="app">
    {{user.name}}<br> {{user.age}}
    <br>
    <button type="button" @click="addAge">添加属性</button>
</div>
    
var vm = new Vue({
    data: {
        msg: 'Hello vue.js',
        user: {
            name: 'hedawei',
            gender: 'man'
        }
    },
    methods: {
        addAge() {
            /* this.user.age = 22; */
            this.$set(this.user, 'age', 22);
        }
    }
}).$mount('#app');

方法中使用原始的添加属性方法的话不会在模板中显示。使用$set方法会实时监控数据，然后添加。

vm.$watch(监听的属性，callback)

监控vue实例的变化

 vm.$watch('msg', (newValue, oldValue) => {
    console.log('msg被修改啦，原值：' + oldValue + '，新值：' + newValue);
 });

如果需要监控深度数据变化（例如监控一个对象中的某个属性），则需要在选项中添加{deep:true}

四、自定义指令

自定义指令分为自定义全局指令和自定义局部指令。

1、自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)。注：使用指令时必须在指名名称前加前缀v-，即v-指令名称。

简单示例：

Vue.directive('hello',{
    bind(){ //常用！！
        alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
    },
    inserted(){
        alert('被绑定元素插入到DOM中时调用');
    },
    update(){
        alert('被绑定元素所在模板更新时调用');
    },
    componentUpdated(){
        alert('被绑定元素所在模板完成一次更新周期时调用');
    },
    unbind(){
        alert('指令与元素解绑时调用，只调用一次');
    }
 });

这里定义了一个名为hello的指令，指令定义函数提供了几个钩子函数，分别在不同的时期生效。我们像下面这样使用这个指令:

<p v-hello>hello vue.js</p>

大多数情况下，我们只需要使用bind与update钩子函数。vue里提供了函数的简写形式：

Vue.directive('hello', function () {
    alert("hello vue.js");
})  

钩子函数有两个常用的参数el和binding。el是绑定的DOM对象，binding是一个对象，包含若干属性。

拿到DOM对象，我们就可以对DOM进行一些操作。

<p v-hello="msg">hello vue.js</p>

Vue.directive('hello', function (el,binding) {
    el.style.color = "red";
    
    //属性name是指令的名字（不带v-）
    console.log(binding.name);     //hello
    //属性value是传递给指令的值
    console.log(binding.value);   //alice
    //属性expression是指令值的字符串形式（个人感觉就是类似变量名）
    console.log(binding.expression);  //msg
    //属性arg是传递给指令的参数(和传值写在一起容易令初学者困惑，下面分开写  
    //合在一起写的写法是<p v-hello:123="msg">hello vue.js</p>)
    //<p v-hello:123>hello vue.js</p>
    console.log(binding.arg);       //123
    //属性modifiers是一个包含修饰符的对象。
    //与传参传值合在一起的写法是 <p v-hello:123.bar="msg">hedawei</p>
    //<p v-hello.bar>hello vue.js</p>
    console.log(binding.modifiers);    //{bar:true}
})  

 var vm = new Vue({
    el: '#app',
    data: {
        msg: 'alice'
    }
 })

2、局部自定义指令

局部自定义指令写在实例的directives选项中。

  var vm = new Vue({
    el: '#app',
    data: {
        msg: 'alice'
    },
    methods: {
    },
    directives: {
        word: function(el, binding) {
            console.log(binding.name);
        }
    }
 })

其他用法与全局自定义指令一致。

五、过度（动画）

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画：transition、animation属性。

1、基本用法

使用transition组件，将要执行动画的元素包含在该组件内：

    <transition name="fade">
        运动的元素
</transition>   

我们需要为其定义一个name属性，以便后面为其添加css样式。

动画有6个CSS类名，下面结合例子说明：

<style>
        button {
            display: block;
            margin: 20px auto;
        }
        
        p {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
        
        .fade-enter-active,
        .fade-leave-active {   //定义整个过渡期间的效果
            transition: all 2s ease;
        }
        
        .fade-enter-to {    //定义过渡进入的最终效果
            opacity: 1;
            width: 100px;
            height: 100px;
        }
        
        .fade-leave-to {    //定义过渡离开的最终效果
            opacity: 0;
            width: 50px;
            height: 50px;
        }
        
        .fade-enter {      //定义过渡进入的开始效果
            opacity: 0;
            width: 50px;
            height: 50px;
        }
    </style>
    
    <div id="app">
        <button type="button" @click="flag = !flag">点 击</button>
        <transition name="fade">
            <p v-show="flag">
            </p>
        </transition>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                flag: false
            }
        });
    </script>

2、钩子函数

vue中给过渡的不同时期提供了不同的钩子函数。

<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
        <p v-show="flag">
        </p>
</transition>
        
 new Vue({
        ...
    methods: {
        beforeEnter(el) {
            alert('动画进入之前');
        },
        enter(el) {
            alert('动画进入');
        },
        afterEnter(el) {
            alert('动画进入之后');
        },
        beforeLeave(el) {
            alert('动画离开之前');
        },
        leave(el) {
            alert('动画离开');
        },
        afterLeave(el) {
            alert('动画离开之后');
        }
    }
 });

在这不同的时期，我们可以取到过渡元素的DOM对象，从而对其进行操作。

3、多元素过渡

上面的<transition></transition>标签只适用于单元素过渡。若要对多元素进行过渡，则需要使用<transition-group></transition-group>标签，并且绑定key属性，设置不同的值。

    <button type="button" @click="flag = !flag">点 击</button>
    <transition-group name="fade">
        <p v-show="flag" :key="1">
        </p>
        <p v-show="flag" :key="2">
        </p>
    </transition-group>

4、结合第三方库一起使用（animate.css）

我们可以使用vue的自定义过渡类名结合第三方动画库实现自定义动画效果。这六个自定义类名和vue内置的类名类似:

• enter-class
• enter-active-class
• enter-to-class
• leave-class
• leave-active-class
• leave-to-class
  示例：

 p {
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
 }

 <div id="app">
    <button type="button" @click="flag = !flag">点 击</button>
    <transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
        <p v-show="flag">
        </p>
    </transition>
</div>

 <script>
    new Vue({
        el: '#app',
        data: {
            flag: false
        }
    });
 </script>

未完待续。。。