vue知识点

provide/inject(刷新页面/当前路由)

他们成对出现，用于父级组件向下传递数据。
简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

父组件

<template>
  <div>
<childOne></childOne>
  </div>
</template>

<script>
  import childOne from '../components/test/ChildOne'
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }

子组件

<template>
  <div>
    {{demo}}
    <childtwo></childtwo>
  </div>
</template>

<script>
  import childtwo from './ChildTwo'
  export default {
    name: "childOne",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      childtwo
    }
  }
</script>

此方法 可用于 刷新当前路由
若刷新整个页面 将其父组件使用到 App.vue，子组件使用到具体页面。
如刷新部分页面(header,disebar,main,只刷新main部分) 将其父组件使用到router-view 位置，子组件使用到具体页面。

父组件

<router-view v-if="isRouterActive" ></router-view>
provide() {
    return {
      reload: this.reload
    };
  },
data(){
	return{
  		isRouterActive: true
 	}
},
methods: {
    reload() {
      this.isRouterActive = false;
      this.$nextTick(function() {
        this.isRouterActive = true;
      });
    }
  }

子组件

inject: ["reload"],
methods: {
    XXX(){
	    ....
	    this.reload()
	}
  }

刷新
location.reload()
this.$router.go(0)
这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好

vm.$forceUpdate()//强制刷新，解决页面不会重新渲染的问题，主要是数据更新

路由后退控制（pushState）

当路由后退到某一页时，不可后退（例如后退到登录页时不可后退）

mounted(){
        history.pushState(null, null, document.URL); 
        window.addEventListener('popstate', function() { 
            history.pushState(null, null, document.URL); 
        });
    },

存储当前历史记录点pushState、
替换当前历史记录点replaceState、
监听历史记录点popstate。

history.pushState(data,title,url);
其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；
不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

replaceState用法类似，例如：history.replaceState(“首页”,"",location.href+ “#news”);

两者区别：pushState会改变history.length，而replaceState不改变history.length

popstate
可以理解为监听浏览器后退、前进的操作，只要后退或者前进就会触发。

Vue.nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

生命周期

computed data props methods 在beforecreated 和 created 之间完成

父子组件的生命周期

一、加载渲染过程

父beforeCreate–> 父created–>父beforeMount–>子 beforeCreate–> 子 created–>子 beforeMount–>子 mounted–>父mounted

二、子组件更新过程

父beforeUpdate --> 子 beforeUpdate–> 子 updated–> 父updated

三、销毁过程

父beforeDestroy --> 子 beforeDestroy–> 子 destroyed–> 父destroyed

keep-alive

生命周期顺序为 mounted–>activated–>deactivated(首次) activated–>deactivated(非首次)
所以获取数据的为了简化代码，可以将其放在activated中

Props：

include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

base64编码和解码

window.atob()解码
window.btoa()编码

下载文本到txt

npm install file-saver --save

var FileSaver = require('file-saver');
var blob = new Blob([this.text], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

下载文件

//导出文件
      exportfile(){
        let eleLink = document.createElement('a');
        eleLink.style.display = 'none';
        eleLink.href = this.downurl;
        // 受浏览器安全策略的因素，动态创建的元素必须添加到浏览器后才能实施点击
        document.body.appendChild(eleLink);
        // 触发点击  
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      }

监听路由变化

方法一：通过 watch

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

重置data数据

Object.assign(this.$data, this.$options.data())

vue组件的销毁与重建

<v-detection :detectionid="detectionid" v-if="hackReset"></v-detection>

声明hackReset，利用true或者false实现重建或者销毁`

     this.hackReset = false;//销毁组件
     this.$nextTick(() => {
       this.hackReset = true;//重建组件
     });

axios 全局使用

1. npm install axios

import axios from 'axios'
Vue.prototype.$axios = axios

2. npm install axios vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

调用 this.$axios

匹配地址栏地址

/containerRunConfigure\/appMessage/.test(window.location.href)
this.$router