杂记 -- 关于ref、kepp-alive、nextTick、fetch

1、ref：定义一个普通的dom节点或一个vue的组件实例对象

定义方法：

<div class="page1">
    <button @click="linkPage2">点击</button>
    <p ref="p">我是p标签</p>
    <about ref="about"></about>
</div>

获取ref方法：vm.$refs.xxx (要在节点渲染后获取)

mounted(){
    console.log(this);//page1这个vue组件的实例对象
    console.log(this.$refs.p); //普通的dom节点
    console.log(this.$refs.about);//相当于子组件的实例对象
    this.$refs.about.data = 111;
    console.log(this.$refs.about.data);
}

2、keep-alive：缓存一个组件的数据，而不动态销毁

包含参数：

include:'string || reg',匹配到的会被缓存,跟name配合使用

exclude:'string || reg',匹配到的不会被缓存

用法：

<keep-alive inclue="page3">
     <router-view></router-view>
</keep-alive>

3、this.$nextTick(function(){},[Object obj]):类似于setTimeout等将任务放入异步的等待队列中，用与异步操作

用法:

<template>
    <div class="page1">
        <p ref="p">同步的:{{msg}}</p>
        <p>异步的:{{msg1}}</p>
        <button @click="changeMsg">点击</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            msg:123,
            msg1:123
        }
    },
    methods:{
        changeMsg(){
            this.msg = 233;
            let ctime = new Date();
            this.$nextTick( () => {
                this.msg1 = 233;
                console.log(new Date() - ctime);
            })
        }
    },
    created(){
        this.$nextTick( ()=> {   //异步，使在created中就可以操作dom节点
            console.log('异步操作');
            console.log(this.$refs.p);
        })
    }
}
</script>

4、fetch和ajax的区别

Ajax:基于XMLHttpRequest对象，发布异步请求的常用方法

Fetch:基于Promise,的异步的链式调用的使用，没有使用XMLHttpRequest对象

Axios:基于Promise并封装了XMLHttpRequest请求

两者区别：

1、fetch默认不会带有cookies，需要显示设置

2、fetch基于网络请求进行报错，服务端返回400,500是不会执行reject(拒绝状态)

3、fetch不能监控请求的进度，如XHR的readyState码