vue 最新面试基础知识答疑〔2023版〕

1、 Vue组件之间的通信⽅式都有哪些?

• 父传子

  在父组件的子组件标签上绑定一个属性，挂载要传输的变量

  在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}

• 子传父

  在父组件的子组件标签上自定义一个事件，然后调用需要的方法

  在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

• 兄弟组件

  在src中新建一个Bus.js的文件，然后导出一个空的vue实例

  在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递

  在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

2、Vue项⽬中你是如何解决跨域的呢？

跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

• jsonp的原理

• ajax 请求受同源策略影响，不允许进行跨域请求，我们利用 script 标签的 src 属性不受同源策略的约束
  • 解决方式 jsonp、代理、反向代理、a链接处理跨域、Hash(哈希)值处理跨域、cors（ajax2）处理跨域
  • 通过服务端实现代理请求转发 以express框架为例
  • 通过配置nginx 实现代理

3、为什么data属性是⼀个函数⽽不是⼀个对象？

• 跟按引用传值有关。
• Vue 中的 data 是一个对象类型，对象类型的数据是按 引用传值 的。这就会导致所有组件的实例都 共享 同一份数据，这是不对的，我们要的是每个组件实例都是独立的
• 所以为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象

4、动态给vue的data添加⼀个新的属性时会发⽣什么？怎样解决

• 直接添加属性问题

  • 实例化⼀个vue 实例，定义data 属性和methods ⽅法
  • 数据虽然更新了（ console 打印出了新属性），但⻚⾯并没有更新

• 解决方案

Vue.set()
Vue.set( target, propertyName/index, value )
{Object | Array} target
{string | number} propertyName/index
{any} value
Vue.set( target, propertyName/index, value )
Object.assign

直接使⽤Object.assign() 添加到对象的新属性不会触发更新应创建⼀个新的对象，合并原对象和混⼊对象的属行

$forcesUpdated()

• 小结

  • 如果为对象添加少量的新属性，可以直接采⽤Vue.set()
  • 如果需要为新对象添加⼤量的新属性，则通过Object.assign() 创建新对象
  • 如果你实在不知道怎么操作时，可采取$forceUpdate() 进⾏强制刷新 (不建议)

4、你了解vue的diff算法吗？说说看?

diff算法: 基础虚拟DOM完成节点更新的方法

• 用js对象来表示真是的DOM树结构，创建一个虚拟DOM对象
• 当数据发生改变的时候，创建一个新的js的虚拟DOM对象
• 比较新旧对象的差异，记录下来，最终更新到真实的DOM树结构上

5、你有写过⾃定义指令吗？⾃定义指令的应⽤场景有哪些？

• 实现

  • 全局： vue.directive:{“”,{}}
  • 局部：directives:{指令名：{钩子函数}}
  • bind(){} 只调用一次，指令第一次绑定到元素时调用
    inserted(){} 被绑定元素插入父节点时调用
    update(){} 被绑定元素所在的模板更新时调用，而不论绑定值是否变化
    componentUpdated(){} 被绑定元素所在模板完成一次更新周期时调用
    unbind(){}只调用一次， 指令与元素解绑时调用

• 应用场景

  • 防抖—设置⼀个v-throttle ⾃定义指令来实现
  • 图片懒加载——设置⼀个v-lazy ⾃定义组件
  • 一键Copy的功能
  • 拖拽指令
  • ⻚⾯⽔印
  • 权限校验

6、Vue中的过滤器了解吗？过滤器的应⽤场景有哪些？

• 过滤器（ fiter ）

  是输送介质管道上不可缺少的⼀种装置，把⼀些不必要的东⻄过滤掉

• 小结

  ⼀个表达式可以使⽤多个过滤器。过滤器之间需要⽤管道符“|”隔开。其执⾏顺序从左往右，局部过滤器优先于全局过滤器被调⽤。

• 应⽤场景

  单位转换、数字打点、⽂本格式化、时间格式化

7、v-if和v-for的优先级是什么？

• 作用

  • v-if ：
    指令⽤于条件性地渲染⼀块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染
  • v-for：
    指令基于⼀个数组来渲染⼀个列表。 v-for 指令需要使⽤item in items形式的特殊语法，其中items是源数据数组或者对象，⽽item则是被迭代的数组元素的别名 建议设置key 并且保证每个key 值是独⼀⽆⼆的 便于diff 算法进⾏优化

• 优先级

  v-for 优先级⽐v-if ⾼

• 注意事项

  • 永远不要把v-if v-for同时⽤在同⼀个元素上，带来性能⽅⾯的浪费（每次渲染都会先循环再进⾏条件判断）
  • 如果避免出现这种情况，则在外层嵌套template （⻚⾯渲染不⽣成dom 节点)，在这⼀层进⾏v-if判断，然后在内部进⾏v-for循环
  • 如果条件出现在循环内部，可通过计算属性computed 提前过滤掉那些不需要显示的项

8、说说你对keep-alive的理解是什么？

• keep-alive是Vue提供给我们一个内置组件，
• 作用：保存我们路由切换时组件的状态 , 比如列表页面进入详情，我们想保存列表滚动的位置，我们就可 使用keep-alive保存列表页面的滚动位置。
• 组件使用keep-alive以后会新增两个生命周期 actived() deactived(),
• 有两个参数— include - 包裹的组件名会被缓存,exclude 包裹的组件名都不会被缓存

9、你知道vue中key的原理吗？说说你对它的理解？

key是给每⼀个vnode的唯⼀id，也是diff的⼀种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

• 作用
  • 在列表渲染时使用key属性
  • 使用key属性强制替换元素
  • 更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的

10、vue生命周期

• 创建 beforeCreate created

  • beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
  • created() 最早开始使用 data和methods中数据的钩子函数

• 挂载 beforeMount mounted

  • beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
  • mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数

• 更新 beforeUpdate updated

  • beforeUpdate() 当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新
  • updated() 数据更新完成以后触发的方法，DOM节点已经更新

• 销毁 beforeDestroy destroyed

  • beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
  • destroyed()已经销毁完毕

11、说说你对vue的mixin的理解，有什么应⽤场景？

• 理解

  • Mixin 是⾯向对象程序设计语⾔中的类，提供了⽅法的实现。其他类可以访问mixin 类的⽅法⽽不必成为其⼦类
  • Mixin 类通常作为功能模块使⽤，在需要该功能时“混⼊”，有利于代码复⽤⼜避免了多继承的复杂
  • mixin （混⼊），提供了⼀种⾮常灵活的⽅式，来分发组件中的可复⽤功能
  • 本质其实就是⼀个js 对象，它可以包含我们组件中任意功能选项，如data 、 components 、 methods 、 created 、 computed 等等

• 使用场景

  我们经常会遇到在不同的组件中经常会需要⽤到⼀些相同或者相似的代码，这些代码的功能相对独⽴，这时，可以通过Vue 的mixin 功能将相同或者相似的代码提出来。
  mixin （混⼊）来分发 Vue 组件中的可复⽤功能
  倘若有些公共组件使用频率很高，使用mixin（混入）就可以很方便地引入公用部分

12、Vue中的$nextTick有什么作⽤？

• 效果：

  通过 this.$nextTick 我们可以注册一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行

• 为什么用？

  • Vue 中的数据更新是 延迟异步更新 的？就是说当我们修改了数据之后，页面并不会马上就更新，所以如果我们修改了数据之后，马上就获取页面中的数据，你会发现他还是原来的数据因为页面还没有更新，使用场景之一、需要在视图更新之后，基于新的视图进行操作。
  • 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在 Vue.nextTick() 的回调函数中。原因是在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将DOM操作的 js 代码放进Vue.nextTick() 的回调函数中。

13、vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

所谓权限控制，就是用户只能访问到被分配的资源 前端权限是请求的发起权，请求的发起可能有下面两种形式触发。

• 页面加载触发
• 页面上的按钮点击触发 前端权限控制可以分为四个⽅⾯： 接⼝权限 按钮权限 菜单权限 路由权限

14、v-if和v-show有什么区别？使用场景是什么？

• 当条件为真的时候 没有区别 当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制
• v-if 更适合数据的筛选和初始渲染 v-show更适合元素的切换

15、什么是虚拟DOM?如何实现一个虚拟DOM

虚拟dom是利用js描述元素与元素的关系。 好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能。

16、vue3有了解过吗？能说说跟vue2的区别吗？

• 性能提升

  更小巧，更快速；支持摇树优化。支持 Fragments 和跨组件渲染；支持自定义渲染器

• API 变动

  • 除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变或者将通过另外构建一个兼容包 来兼容2.x。
  • 模板语法的 99% 将保持不变。除了 scoped slot 语法可能会有一些微调之外变动最大的部分将是渲染函数 (render) 中的虚拟 DOM 的格式。

• 重写虚拟 DOM (Virtua DOM Rewrite)

  随着虚拟 DOM 重写，减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点

17、说说你对vuex的理解？

• 用途：

  实现组件之间数据的共享。

• 为什么用：

  在 Vue 中我们可以通过属性和事件实现父子之间的传值，但需要一级一级的传值，如果层级较深，只通过属性和事件传值非常的麻烦，所以需要一个专门的工具来对数据进行管理，以方便的实现各层级组件之间数据的共享。

• 组成部分（中主要有 6 部分组成）：

  • state：定义数据
  • mutations：定义操作数据的方法，简单的操作，不能是异步的
  • actions：定义操作数据的复杂的方法，比如AJAX等异步代码
  • getters：先处理state中的数据，然后返回处理之后的结果，有点类似过滤器
  • modules：分模块使用
  • plugins：插件

18、说⼀下watch,methods和computed的区别

• computed

  具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用

• methods

  是没有缓存的，只要调用，就会执行，一般结合事件来使用

• watch

  没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

19、为何v-for要用key

快速查找到节点，减少渲染次数，提升渲染性能；

20、描述vue组件声明周期

• 单组件声明周期图

  • 挂载：beforeCreate => created => beforeMount => mounted
  • 更新：beforeUpdate => updated
  • 销毁：beforeDestroy => destroyed

• 父子组件生命周期图

  • 挂载： parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child mounted => parent mounted
  • 更新： parent beforeUpdate => child beforeUpdate => child updated => parent updated
  • 销毁： parent beforeDestroy => child beforeDestroy => child destroyed => parent destroyed
    从以上能够看出：
  • 挂载时，子组件是在父组件 before mount 后开始挂载，并且子组件先 mounted，父组件随后；
  • 更新时，子组件是在父组件 before update 后开始更新，子组件先于父组件更新；
  • 销毁时，子组件是在父组件 before destroy 后开始销毁，并且是子组件先销毁，父组件随后；

21、vue组件如何通信

• 父子组件props和this.$emit
• ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值($parent / $children与ref类似)
• 事件总线bus：使用一个 空的 VUE 实例作为事件总线，自定义事件event.$on event.$off event.$emit
• provide inject组件通信
• vuex
• $attrs和$listeners 仅仅是传递数据，而不做中间处理，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

常见使用场景可以分为三类：

• 父子通信：
  • 父向子传递数据是通过 props，子向父是通过 events($emit)；
  • 通过父链 / 子链也可以通信 $parent / $children；
  • ref 也可以访问组件实例；
  • provide / inject API；
  • $attrs/$listeners；
  • vuex
• 兄弟通信：
  • 事件总线Bus；
  • Vuex
• 跨级通信：
  • 事件总线Bus；
  • Vuex；
  • provide / inject API
  • $attrs/$listeners

22、描述组件渲染和更新的过程

• vue 组件初次渲染过程

  • 解析模板为 render 函数
  • 触发响应式，监听 data 属性的 getter 和 setter
  • 执行 render 函数， 生成 vnode，patch(elem,vnode)

• vue 组件更新过程

  • 修改 data， 触发 setter （此前在getter中已被监听）
  • 重新执行 render 函数，生成 newVnode，patch(vnode, newVnode)

23、双向数据绑定v-model的实现原理

双向数据绑定最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的；
先是从data里面的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。
调用方法都可以默认获取e事件，e.target.value是获取调用该方法的DOM对象的value值。把value值在赋给data里的msg，就是实现了双向数据绑定的原理了。

24、对mvvm的理解

m->model，v->view，vm->viewModel。
dom通过监听事件操作vue里的data，反之vue中的data通过指令操作dom，这就是所说数据驱动视图，这就是mvvm的理解。

25、computed有何特性

缓存，data不变不会重新计算，提高性能；

26、VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？

• 为什么要封装组件？

  主要就是为了解耦，提高代码复用率。

• 什么是组件？

  • 页面上可以复用的都称之为组件 它是 HTML、CSS、JS 的聚合体。
  • 组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。
  • 组件中的 data 为什么是一个函数？
  • 让每个返回的实例都可以维护一份被返回对象的独立的拷贝。

27、ajax请求应该放在哪个生命周期？

mounted，因为 js 是单线程，ajax异步获取数据

28、何时使用beforeDestroy？

• 解绑自定义事件、event.$off
• 清除定时器
• 解绑自定义dom事件，如windom.scroll等

29、什么是作用域插槽？

在solt组件中有自己的data，把它传给使用的地方;

30、vue-router常用路由模式

hash默认，h5 histroy需要服务端支持；

31、如何配置vue-router异步加载

component:() => import(‘./component’)

32、监听data变化的核心api是什么？

• vue2.0核心api是Object.defineProperty；
• vue3.0是启用provy实现响应式

33、vue如何监听数据变化？

vue中的watch监听数据变化

34、vue为何是异步渲染，$nextTick 何用？

• 因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以考虑性能问题，Vue会在本轮数据更新之后，再去异步更新视图
• $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

35、vue常见性能优化方式？

• 合理使用 v-if 和 v-show；
• 合理使用 computed；
• v-for 加 key；
• 自定义事件，dom 事件及时销毁；
• 合理使用异步组件；
• 合理使用 keepalive；
• data 层级不要太深；
• 使用 vue-loader 在开发环境做模板编译；
• 前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名）；
• 使用 ssr；

36、vue中子组件调用父组件的方法?

• 直接在子组件中通过this.$parent.event来调用父组件的方法。
• 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
• 父组件把方法传入子组件中，在子组件里直接调用这个方法。

37、vue中父组件调用子组件的方法?

• 父组件利用ref属性操作子组件方法。
  父组件：

<child ref="childMethod"></child>

子组件：

method: {
   test() {
      alert(1)
   }
 }

• 在父组件里调用 test 即 this.$refs.childMethod.test()

38、vue页面级组件之间传值?

• 使用vue-router通过跳转链接带参数传参。
• 使用本地缓存localStorge。
• 使用vuex数据管理传值。

39、$route 和 $router 的区别是什么？

• $router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
• $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部对象，包含path，params，hash，query，fullPath，matched，name等路由信息参数。

40、路由守卫

• 全局导航钩子（跳转前进行判断拦截） 全局路由守卫

  • router.beforeEach(to, from, next),全局前置守卫
  • router.beforeResolve(to, from, next),全局的解析守卫
  • router.afterEach(to, from ,next) 全局的后置守卫

• 组件内钩子 路由独享的守卫

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

• 单独路由独享组件
  beforeEnter 组件内的守卫

41、vue组件中data为什么函数返回一个对象

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data。如果单纯的写成对象形式，就使得所有组件实例共用了一份 data，造成了数据污染。

42、vue中哪些数组方法可以直接对数组修改实现视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
• vue数组对象修改触发视图更新

43、有哪些指令？v-if 和 v-show 区别，v-if、v-for 优先级

• v-html //html
• v-text //元素里要显示的内容
• v-bind：data //绑定动态数据 ：data
• v-on：click //绑定事件 @click
• v-for
• v-if //条件渲染指令
• v-model //双向绑定，用于表单
• v-show 通过 css display 控制显示和隐藏，v-if 组件真正的渲染好饿销毁，而不是显示和隐藏，频繁切换状态使用 v-show 否则v-if
• v-for 和 v-if 不应该一起使用，必要情况下应该替换成 computed 属性。原因：v-for 比 v-if 优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

44、computed、watch（自动监听、深度监听）、methods区别

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的。

不同点：

• computed：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。
• methods：只要发生重新渲染， method 调用总会执行该函数。
• watch监听对象需要深度监听，默认是浅监听

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed。

watch用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。

45、ref 的作用？

• 获取dom元素 this.$refs.box
• 获取子组件中的data this.$refs.box.msg
• 调用子组件中的方法 this.$refs.box.open()

46、什么是vuex？vuex核心包括？怎么修改state中数据？在项目中哪里使用？

vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）

vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）

state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数据，然后在 mutations 里面同步的更改数据

应用场合：购物车的数据共享、登入注册

47、路由传参以及接受参数的方式

• 路由传参方法？
  query传参和params传参
  • 声明式导航
    不带参跳转 对应的地址为/foo
    url字符串拼接传参 对应的地址为/foo?id=123
    query方式对象形式传参 对应的地址为/foo?id=123
    params方式对象形式传参 对应地址为 /path/123 , 注意params和query一起使用params会失效，params与name一起使用
  • 编程式导航(路由实例对象router=new VueRouter())
    字符串router.push(‘home’)
    对象router.push({ path: ‘home’ })
    命名的路由 对应路径为/path/123
    router.push({ name: ‘user’, params: { userId: ‘123’ }})
    带查询参数，变成 /register?plan=123
    router.push({ path: ‘register’, query: { plan: ‘123’ }})
• 接收参数
  • this.$route.params.id
  • this.$route.query.xxx

48、vue常用的修饰符

• .stop - 调用 event.stopPropagation()，禁止事件冒泡。
• .prevent - 调用 event.preventDefault()，阻止事件默认行为。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• v-model 指令常用修饰符：
• .number - 输入字符串转为数字
• .trim - 输入首尾空格过滤
• .lazy

49、vue如何监听键盘事件中的按键？

在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

<input v-on:keyup.13="submit">

对于一些常用键，还提供了按键别名：

<input v-on:keyup.13="submit">

• 全部的按键别名：

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

• 修饰键：

  • .ctrl
  • .alt
  • .shift
  • .meta

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件

<!-- 按下Alt + 释放C触发 -->

<input @keyup.alt.67="clear">

<!-- 按下Alt + 释放任意键触发 -->

<input @keyup.alt="other">

<!-- 按下Ctrl + enter时触发 -->

<input @keydown.ctrl.13="submit">

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

50、解决非工程化项目初始化页面闪动问题

vue页面在加载的时候闪烁花括号 {}，v-cloak 指令和css规则如 [v-cloak]{display:none} 一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。{{name}} data:{ name:''}

css样式

[v-cloak] {
      display: none;
}

html 代码

<!--html代码-->
<div id="app" v-cloak>
    <ul>
      <li v-for="item in tabs">{{item.text}}</li>
    </ul>
  </div>

51、vue弹窗后如何禁止滚动条滚动？

• 在有弹出框的页面中，加上以下方法，弹出框出现时调用禁止滚动方法stopScroll()，弹出框去掉是调取允许滚动方法canScroll()即可，代码如下

methods : {
   //禁止滚动
   stopScroll(){
     var mo=function(e){e.preventDefault();};
     document.body.style.overflow='hidden';
     document.addEventListener("touchmove",mo,false);//禁止页面滑动
   },
 
  /***取消滑动限制***/
   canScroll(){
     var mo=function(e){e.preventDefault();};
     document.body.style.overflow='';//出现滚动条
     document.removeEventListener("touchmove",mo,false);
   }
 }

• 在全局js即main.js中，设置全局函数，在使用到的页面分别调用即可，代码如下：

//弹出框禁止滑动
 Vue.prototype.stopScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false)// 禁止页面滑动
 }
  
//弹出框可以滑动
 Vue.prototype.canScroll = function () {
  var mo = function (e) {
   e.preventDefault()
  }
  document.body.style.overflow = ''// 出现滚动条
  document.removeEventListener('touchmove', mo, false)
 }

具体页面的调用方法如下：
//当需要禁止弹出框底部内容滑动时调用： this.stopScroll()

//当需要页面恢复滑动功能时调用： this.canScroll()

52、vue-cli中自定义指令的使用

• 全局注册

Vue.directive(‘name’, {})

• 局部注册

directives: {
  name: {}
}