vue面试四之vue定义全局变量和全局方法、Vue.observable API用过没？、vue强制刷新组件、 Vue中target和currentTarget的使用

一 vue定义全局变量和全局方法

1.1 定义common.vue 里面存储全局变量与方法，供各个vue文件使用

<script type="text/javascript">
    // 定义一些公共的属性和方法
    const httpUrl = 'http://39.105.17.99:8080/'
    function commonFun() {
        console.log("公共方法")
    }
    
    // 暴露出这些属性和方法
    export default {
        httpUrl,
        commonFun
    }
</script>

<template>
    {{globalHttpUrl}}
</template>

<script>
// 导入共用组件
import global from './common.vue'
export default {
  data () {
    return {
      username: '',
      password: '',
      // 赋值使用
      globalHttpUrl: global.httpUrl
    }
  },
 </script>

很显然上面的方式虽然能实现全局存储，但是如果每个vue文件都需要使用这个全局变量，那么每个vue文件都需要引用这个组件，这样代码的耦合性太高。

1.2 main.js中引入全局变量和方法，供各个vue文件使用

<script type="text/javascript">
    // 定义一些公共的属性和方法
    const httpUrl = 'http://39.105.17.99:8080/'
    function commonFun() {
        console.log("公共方法")
    }
    
    // 暴露出这些属性和方法
    export default {
        httpUrl,
        commonFun
    }
</script>

// main.js 文件
// 导入共用组件
import global from './common.vue'
Vue.prototype.COMMON = global

<template>
    {{globalHttpUrl}}
</template>

<script>
// 导入共用组件
import global from './common.vue'
export default {
  data () {
    return {
      username: '',
      password: '',
      // 赋值使用, 可以使用this变量来访问
      globalHttpUrl: this.COMMON.httpUrl
    }
  },
 </script>

同样，也可以main.js 中导入普通的js文件(不光只能导vue文件)，写法与上面一样

1.3 vuex
1.4 localstorage、cookie等本地存储

二 Vue.observable API用过没？

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

// 创建store目录，store目录下创建index.js
import Vue from 'vue'
export const store = Vue.observable({
  count: 0,
  name: '李四'
})

export const mutations = {
  setCount (count) {
    store.count = count
  },
  changeName (name) {
    store.name = name
  }
}




// 在组件中使用
<template>
    <div class="container">
      <button @click="setCount(count+1)">count增加</button>
    </div>
</template>

<script>
import { store, mutations } from '@/store/index'
export default {
    computed: {
        count () {
          return store.count
        }
     },

    methods () {
        // 将store中的mutations方法赋值拿到
        setCount: mutations.setCount
    }
}

</script>

体做法与vuex类似，但是比vuex省事了很多

三 vue强制刷新组件

背景： 在开发过程中，有时候会遇到这么一种情况，通过动态的赋值，虽然dom没有及时更新，但是能够获取到动态赋的值，这就需要我们手动进行强制刷新组件。(dom异步渲染，可参考之前文章)

1 比较好的例子：

2 如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。

	<template>
	    <comp v-if="update"></comp>
	    <button @click="reload()">刷新comp组件</button>
	</template>
	<script>
	import comp from '@/views/comp.vue'
	export default {
	    name: 'parentComp',
	    data() {
	        return {
	            update: true
	        }
	    },
	    methods: {
	        reload() {
	            // 移除组件
	            this.update = false
	            // 在组件移除后，重新渲染组件
	            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
	            this.$nextTick(() => {
	                this.update = true
	                // 做自己的一些事
	            })
	        }
	    }
	}
	</script>

3 this.forceUpdate();进行强制渲染
从搜索资料得出结果：因为数据层次（for循环太多）太多，render函数没有自动更新，需手动强制刷新。
调用强制更新方法this.forceUpdate()会更新视图和数据，触发updated生命周期。
我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.forceUpdate() )

四 Vue中target和currentTarget的使用

event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素。
例子：

<a href="javascript:;" @click="openPlays($event)" class="openplays-btn">展开
    <i class="iconfont">》》》》</i>
</a>

<script>
openPlays (e) {
      // 当使用currentTarget时，不管你点击的是a或者a之中的任何元素，其获取到的对象都为绑定事件的a；当使用target时，如果你点击到a元素则传a元素，如果点击到a之中的某个子级元素则传a之中的某个元素。
      console.log(e.target,e.currentTarget)
}
</script>

补充：Vue中的$event的用法：
场景1：获取原生DOM事件的事件对象
在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象 (上面的是例子)

场景2：事件注册所传的参数(子组件向父组件传值)
在子组件中通过$emit注册事件，将数据作为参数传入，在父组件中通过$event接收

// 子组件  Hello.vue
<template>
<button @click="$emit('hello', 'hello')">Hello</button>
<!-- $emit()的第一个参数是定义的事件名，第二个参数是要传入的数据 -->
</template>

<script>
export default {

}
</script>

// 父组件
<template>
<Hello @hello="showData($event)" />
<h4>{{data}}</h4>
</template>

<script>
import Hello from '@/components/Hello.vue'
import {
    ref
} from 'vue'
export default {
    components: {
        Hello
    },
    data(){
        return {
            data
        }
    },
    method:{ 
         showData(e){
            this.data = e
        }
    }
}
</script>