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

vue面试专栏 专栏收录该内容
7 篇文章 0 订阅

一 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>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值