关注
客服
刷新
更多
编辑
回到顶部
回到底部
客服二维码

vue面试题一

1.那首先谈谈你对Vue的理解吧?

关键点: 渐进式 JavaScript 框架、核心库加插件、动态创建用户界面(异步获取后台数据,数据展示在界面)

特点: MVVM 模式;代码简洁体积小,运行效率高,适合移动PC端开发;本身只关注 UI (和 react 相似),可以轻松引入 Vue 插件或其他的第三方库进行开发。

2.你刚刚说到了MVVM,能详细说说吗?

全称: Model-View-ViewModel , Model 表示数据模型层。 view 表示视图层, ViewModel 是 View 和 Model 层的桥梁,数据绑定到 viewModel 层并自动渲染到页面中,视图变化通知 viewModel 层更新数据。
MVVM是把MVC的Controller和MVP的Presenter改成了ViewModel。
View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。

MVC是应用最广泛的软件架构之一,一般MVC分为:

Model( 模型 )、Controller( 控制器 )、View( 视图 )。

这主要是基于分层的目的,让彼此的职责分开。View一般通过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本联系都是单向的。

MVVM 和 MVC 的区别:
mvc 中 Controller演变成 mvvm 中的 viewModel,
1、View 传送指令到 Controller
2、Controller 完成业务逻辑后,要求 Model 改变状态
3、Model 将新的数据发送到 View,用户得到反馈
mvvm 通过数据来显示视图层而不是节点操作。
Mvvm主要解决了
mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

Mvp
MVP 模式将 Controller 改名为Presenter,同时改变了通信方向。
1、各部分之间的通信,都是双向的。
2、View 与 Model 不发生联系,都通过 Presenter 传递。
3、View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

3.vue是如何实现响应式数据的呢?

Vue2: Object.defineProperty 重新定义 data 中所有的属性, Object.defineProperty 可以使数据的获取与设置增加一个拦截的功能,拦截属性的获取,进行依赖收集。拦截属性的更新操作,进行通知。

具体的过程:首先Vue使用 initData 初始化用户传入的参数,然后使用 new Observer 对数据进行观测,如果数据是一个对象类型就会调用 this.walk(value) 对对象进行处理,内部使用 defineeReactive 循环对象属性定义响应式变化,核心就是使用 Object.defineProperty 重新定义数据。

4.那vue中是如何检测数组变化的呢?

数组就是使用 object.defineProperty 重新定义数组的每一项,那能引起数组变化的方法我们都是知道的, pop 、 push 、 shift 、 unshift 、 splice 、sort 、 reverse 这七种,只要这些方法执行改了数组内容,我就更新内容就好了,是不是很好理解。

1.是用来函数劫持的方式,重写了数组方法,具体呢就是更改了数组的原型,更改成自己的,用户调数组的一些方法的时候,走的就是自己的方法,然后通知视图去更新。

2.数组里每一项可能是对象,那么我就是会对数组的每一项进行观测,(且只有数组里的对象才能进行观测,观测过的也不会进行观测)

vue3:改用 proxy ,可直接监听对象数组的变化。

5.那你说说Vue的事件绑定原理吧

· 原生 DOM 的绑定:Vue在创建真实DOM时会调用 createElment ,默认会调用 invokeCreateHooks 。会遍历当前平台下相对的属性处理代码,其中就有 updateDOMListeners 方法,内部会传入 add() 方法

· 组件绑定事件,原生事件,自定义事件;组件绑定之间是通过Vue中自定义的 $on 方法实现的。

6.v-model中的实现原理及如何自定义v-model

v-model 可以看成是 value+input 方法的语法糖(组件)。原生的 v-model ,会根据标签的不同生成不同的事件与属性。解析一个指令来。

自定义:自己写 model 属性,里面放上 prop 和 event

7.为什么Vue采用异步渲染呢?

Vue 是组件级更新,如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以为了性能, Vue 会在本轮数据更新后,在异步更新视图。核心思想 nextTick 。

dep.notify() 通知 watcher进行更新, subs[i].update 依次调用 watcher 的 update , queueWatcher 将watcher 去重放入队列, nextTick( flushSchedulerQueue )在下一tick中刷新watcher队列(异步)。

8.了解nextTick吗?

作用vue中的nextTick主要用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick就
可以获取数据更新后最新DOM的变化

异步方法,异步渲染最后一步,与JS事件循环联系紧密。主要使用了宏任务微任务(setTimeout、promise那些),定义了一个异步方法,多次调用nextTick会将方法存入队列,通过异步方法清空当前队列。

9.说说Vue的生命周期吧

beforeCreate(创建前) 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

created(创建后) 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观 测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始, $el 属性目前不可见

beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

10.什么是vue生命周期?

Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

11.父子组件生命周期调用顺序

渲染顺序:先父后子,完成顺序:先子后父

更新顺序:父更新导致子更新,子更新完成后父

销毁顺序:先父后子,完成顺序:先子后父

12.Vue组件通信

父子间通信:父亲提供数据通过属性 props传给儿子;儿子通过 $on 绑父亲的事件,再通过 e m i t 触 发 自 己 的 事 件 ( 发 布 订 阅 ) 第 二 种 : 子 传 父 : 主 要 通 过 emit 触发自己的事件(发布订阅) 第二种:子传父:主要通过 emitemit来实现
具体实现:子组件通过通过绑定事件触发函数,在其中设置this. e m i t ( ‘ 要 派 发 的 自 定 义 事 件 ’ , 要 传 递 的 值 ) , emit(‘要派发的自定义事 件’,要传递的值), emit()emit中有两个参数一是要派发的自定义事件,第二个参数是要传递的值 然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参数

第三种:兄弟之间传值有两种方法:
方法一:通过event bus实现
具体实现:创建一个空的vue并暴露出去,这个作为公共的bus,即当作两个组件的桥梁,在两个 兄弟组件中分别引入刚才创建的bus,在组件A中通过bus. e m i t ( ’ 自 定 义 事 件 名 ’ , 要 发 送 的 值 ) 发 送 数 据 , 在 组 件 B 中 通 过 b u s . emit(’自定义事件名’,要发送的值) 发送数据,在组件B中通过bus. emitBbus.on(‘自定义事件名‘,function(v) { //v即为要接收的值 })接 收数据

13.如何从真实DOM到虚拟DOM

涉及到Vue中的模板编译原理,主要过程:
1.将模板转换成 ast 树, ast 用对象来描述真实的JS语法(将真实DOM转换成虚拟DOM)
2.优化树
3.将 ast 树生成代码

14.Computed watch 和 method

computed:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;
支持缓存,只有依赖数据发生改变,才会重新进行计算;
不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
computed属性值会默认走缓存,计算属性是基于他们的相应依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

watch:Watch是监听data和计算属性中的新旧变化
不支持缓存,数据变,会直接触发相应的操作;
watch支持异步;
监听数据必须是data中声明过或者父组件传递过来的props中的数据。

method:只要把方法用到模板上了,每次一变化就会重新渲染视图,性能开销大
运用场景:
当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;
当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

15.v-if 和 v-show 区别

v-if 的显示隐藏是将DOM元素整个添加或删除,v-show 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的
v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐

16.v-for和v-if为什么不能连用

v-for 会比 v-if 的优先级更高,连用的话会把 v-if 的每个元素都添加一下,造成性能问题。

17.v-html 会导致哪些问题

XSS 攻击
v-html 会替换标签内部的元素

18.描述组件渲染和更新过程

渲染组件时,会通过 vue.extend() 方法构建子组件的构造函数,并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程,核心就是 diff 算法。

19.组件中的data为什么是函数

一个组件可能在很多地方使用,也就是会创建很多个实例,如果data是一个对象的话,对象是引用类型,一个实例修改了data会影响到其他实例,所以data必须使用函数,为每一个实例创建一个属于自己的data,使其同一个组件的不同实例互不影响。

20.为什么要使用异步组件?

1.节省打包出的结果,异步组件分开打包,采用jsonp的方式进行加载,有效解决文件过大的问题。
2.核心就是包组件定义变成一个函数,依赖 import() 语法,可以实现文件的分割加载。

21.action 与 mutation 的区别

mutation 是同步更新, $watch 严格模式下会报错

action 是异步操作,可以获取数据后调用 mutation 提交最终数据
1、流程顺序
“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。
2、角色定位
基于流程顺序,二者扮演不同的角色。
Mutation:专注于修改State,理论上是修改State的唯一途径。
Action:业务代码、异步请求。
3、限制
角色不同,二者有不同的限制。
Mutation:必须同步执行。
Action:可以异步,但不能直接操作State。

22.插槽与作用域插槽的区别

插槽

创建组件虚拟节点时,会将组件儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}

渲染组件时会拿对应的 slot 属性的节点进行替换操作。(插槽的作用域为父组件)

作用域插槽

作用域插槽在解析的时候不会作为组件的孩子节点。会解析成函数,当子组件渲染时,会调用此函数进行渲染。

普通插槽渲染的作用域是父组件,作用域插槽的渲染作用域是当前子组件。

23.谈谈对keep-alive的了解

keep-alive 可以实现组件的缓存,当组件切换时不会对当前组件进行卸载。常用的2个属性 include/exclude ,2个生命周
Ai te v tei d kou lou de
期 activated , deactivated di ai ke t v tei d
activated
在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
deactivated
在组件被停用时调用。
配合router-view 使用
有些时候可能需要将整个路由页面一切缓存下来,也就是将 进行缓存。

提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高;
对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated。

24.Vue双向数据绑定的原理

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法;
Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或修改的属性) descriptor (具体的改变方法)

数据改变视图跟着改变

25.防抖和节流的理解

防抖的含义是:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

实现方式: 每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法
缺点: 如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟

节流的含义是:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。

与防抖的区别是:同样的时间间隔500ms,节流保证在500ms内一定会执行回调,而在防抖的场景下,如果触发的时间间隔小于500ms,则不会执行回调,直到触发间隔大于500ms。

实现方式: 设置一个变量flag来记录是否有指定回调函数在等待调用

26.Vue性能优化

编码优化:

事件代理
keep-alive k bu lai f
拆分组件
key 保证唯一性
路由懒加载、异步组件
防抖节流

27.v-for为什么要加key?

为了提升渲染速度。当两个元素位置发生改变时vue不会对整个列表进行重新渲染,而只是更换一下dom的顺序,这样可以减少资源消耗。

28.vuex是什么?怎么使用?哪种功能场景使用它?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。
vuex的流程
页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。最后通过getter把对应值跑出去,在页面的计算属性中,通过,mapGetter来动态获取state中的值
用户的登录状态,多个组件多个页面都会用到它。
购物车中的信息等等

29.vuex有哪几种属性

  1. state:vuex的基本数据,用来存储变量
  2. geeter:从基本数据(state)派生的数据,相当于state的计算属性
  3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数(handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
  4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
  5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
    主 要 流 程 : 组 件 通 过 dispatch 到
    actions,actions是异步操作,再actions中通过commit到mutations,mutations再通过逻辑操作改
    变state,从而同步到组件,更新其数据状态,而getters相当于组件的计算属性对,组件中获取到的
    数据做提前处理的.再说到辅助函数的作用
    action和mutation的区别 1、流程顺序
    “相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。
    角色定位Mutation:专注于修改State,理论上是修改State的唯一途径。Action:业务代码、异步请求。
    限制
    Mutation:必须同步执行。
    Action:可以异步,但不能直接操作State。

30.如何理解 HTTP 状态码

1xx: 表示目前是协议处理的中间状态,还需要后续操作。
2xx: 表示成功状态。
3xx: 重定向状态,资源位置发生变动,需要重新请求。
4xx: 请求报文有误。
5xx: 服务器端发生错误。

31.Cookie、LocalStorage 与 SessionStorage的区别在哪里?

Cookie可以设置失效时间,但没有自己的存取取的方法,需要时封装,每次请求时跟随请求发送

localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持,如果你的网站需要支持 IE6+,那以 userData 作为你的 polyfill 的方案是种不错的选择。
sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
localStorage 是持久化的存储机制
sessionStorage 是绘画期间的存储机制
Token 只应该在当前网站打开期间生效 所以用sessionStorage 保存

32.谈谈你对 Webpack 的理解

webpack 是一款模块加载,资源打包工具.
优势:
以commonJS的形式来书写脚本,对AMD、CMD的支持也很全面,方便旧项目的迁移
关于 CommonJS , AMD , CMD 的理解
能被模块化的不止是JS
能替代部分grunt/gulp的工作,例如打包,压缩混淆,图片转base64等
扩展性强,插件机制完善,支持React热拔插(react-hot-loader)
主要特征:
同时支持 ComminJS 和 AMD 模块
灵活性和扩展性
按需加载
打包
开发时在内存中完成打包,性能更快,完全可以支持开发过程的实时打包需求
1.对 source map 有很好的支持

33.Hash和history的区别

hash表示的是地址栏URL中#符号(也称作为锚点), hash虽然会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面.
由于hash值变化不会引起浏览器向服务器发出请求, 而且hash改变会触发hashchange事件, 浏览器的进后退也能对其进行控制, 所以在HTML5之前, 基本都是使用hash来实现前端路由.
history利用了HTML5新增的pushState()和replaceState()两个api, 通过这两个api完成URL跳转不会重新加载页面
同时history模式解决了hash模式存在的问题. hash的传参是基于URL的, 如果要传递复杂的数据, 会有体积限制, 而history模式不仅可以在URL里传参, 也可以将数据存放到一个特定的对象中

34.git相关:

  1. 你们公司项目是如何管理的?
    答:主要通过git来进行项目版本控制的
  2. 说几个git常用命令?
    答:我工作中常用的有git add ,git status,git commit –m,git push,git pull git checkout -b dev创建并切换 git branch查看分支等
  3. 说一下多人操作同一个文件,如果出现冲突该如何解决?
    答:当遇到多人协作修改同一个文件时出现冲突,我先将远程文件先git pull下来,手动修改
    冲突代码后,再git add ,git commit,git push再上传到远程仓库。如果pull也pull不下来提示冲突的话,可以先通过git stash暂存下来,然后再pull拉取,然后git stash pop,取出原来写的,
    手动修改,然后提交

35.Ajax相关:

  1. 说一下你是如何与后端进行数据交互的
    答:我和后端通过ajax来进行数据交互的,通过统一制定的接口文档,来实现前后端高效开发,如
    果接口文档不能详细说明,或者接口文档上的参数请求不出数据,我会主动和后端工程师沟通,直到完
    成跟接口相关的业务开发。当然这其中为了验证一些接口问题,会用到一些辅助工具,比方说,runapi
    这种在线测试工具
  2. 如果后端数据接口没有准备好,你是如何工作的
    答:如果后端接口还没有准备好,我会和后端工程师沟通,通过制定接口返回数据的格式,然后前
    端通过一些mock数据的工具(上家公司使用的是easymock,贼简单)来批量生成假数据,可以让前端和
    后端同时开发,而无需等待后端数据接口写好再开发,这样提升项目整体的开发效率
  3. 说一下你对ajax的同源策略的理解
    答:ajax同源策略是因为安全的考虑,ajax不允许访问不同域名下的资源即所谓同源策略的意思。
  4. 说一下什么情况下会生跨域及产生跨域的解决方案和实现原理?
    答:产生跨域的情况有:不同协议,不同域名,不同端口以及域名和ip地址的访问都会产生跨域。

36. 说⼀下vue最⼤特点是什么或者说vue核⼼是什么

答:vue最大特点我感觉就是“组件化“和”数据驱动“
组件化就是可以将页面和页面中可复用的元素都看做成组件,写页面的过程,就是写组件,然后页面是由这些组件“拼接“起来的组件树
数据驱动就是让我们只关注数据层,只要数据变化,页面(即视图层)会自动更新,至于如何 操作dom,完全交由vue去完成,咱们只关注数据,数据变了,页面自动同步变化了,很方便

37.Vue常⽤的修饰符

.lazy 输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据
.trim 输入框过滤首尾的空格
.number 先输入数字就会限制输入只能是数字,先字符串就相当于没有加number,注意,不是输入框不能输入字符串,是这个数据是数字
.stop 阻止事件冒泡,相当于调用了event.stopPropagation()方法

38. 说⼀下vue路由懒加载解决什么问题的?

答:vue路由懒加载主要解决打包后文件过大的问题,事件触发才加载对应组件中的js

39. 说⼀下vue开发环境和线上环境如何切换

答 : 主 要 通 过 检 测 process.env.NODE_ENV===”production” 和 process.env.NODE_ENV===”development”环境,来设置线上和线下环境地址,从而实现线上和线 下环境地址的切换

40.Webpack

webpack是目前前端开发中最流行的打包工具,不仅能实现 JS 打包,还能将 CSS 文件,图片文件,甚至是 LESS 文件打包,每一个文件都是一个独立的模块,并且实现按需加载。使用时需要安装 webpack 、 webpack-cli 、webpack-dev-server三个基础模块。
1.2.1Entry
入口 webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
1.2.2Output
输出 webpack打包后的资源bundles输出到哪里去,以及如何命名
1.2.3Loader
Loader让webpack能够去处理那些非JAVAscript文件(webpack 自身只理解JAVAscript
1.2.4Plugins
插件可以用于执行范围更广的任务,插件的范围包括。从打包优化和解压,一直到重新定义环境中的变量等
1.2.5Mode
模式指示webpack使用相应模式的配置
development开发模式 主要是能让代码在本地能够运行
production生产模式 能让代码优化 兼容

41.hash模式和history模式的区别

外观:

hash模式url带#号,history模式不带#号。

功能:
hash模式url里面永远带着#号,开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传;
比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合,让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok了。

42.理解vue的单向数据流

父级 prop 的更新会向下流动到子组件中,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。
只能父传子
43.Vue事件绑定原理说一下
每一个Vue实例都是一个Event Bus,当子组件被创建的时候,父组件将事件传递给子组件,子组件初始化的时候是有 o n 方 法 将 事 件 注 册 到 内 部 , 在 需 要 的 时 候 使 用 on方法将事件注册到内部,在需要的时候使用 on使emit触发函数,而对于原生native事件,使用addEventListener绑定到真实的DOM元素上。

posted @ 2021-07-15 17:12  勋染  阅读(6)  评论(0编辑  收藏  举报  来源