Vue面试复盘
文章平均质量分 71
深入理解Vue
铁锅炖大鹅努力学习前端中
保持对学习的热情。
展开
-
VUE面试
父子组件间通信子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件,子组件通过 $parent 获得父组件,这样也可以实现通信。使用 provide/inject,在父组件中通过 provide提供变量,在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深,只要调用了 inject 那么就可以注入 provide中的数据。原创 2023-02-12 21:55:41 · 67 阅读 · 0 评论 -
响应式和生命周期
Vue响应式指的是: 组件的data发生变化,立刻触发试图的更新 原理: Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后进行相应的处理。 通过原生js提供的监听数据的API,当数据发生变化的时候,在回调函数中修改dom 核心API:Object.defineProperty Object.defineProperty API的使用 作用: 用来定义对象属性原创 2022-06-22 22:35:16 · 127 阅读 · 0 评论 -
Diff算法
由于在浏览器中操作DOM的代价是非常大的,所以在Vue引入了虚拟DOM,虚拟DOM是对真实DOM的一种抽象描述。将虚拟DOM渲染成真实DOM并挂载到页面中,将虚拟DOM渲染成真实DOM的逻辑也比较简单。主要步骤就是:创建节点→设置节点属性→添加子节点DOM-diff比较两个虚拟DOM的区别,也就是在比较两个对象的区别。 作用: DOM-diff 算法主要功能是收集新老两个节点之间的变化,然后根据节点的变化来更新DOM。 主要工作就是收集每个节点是否产生了变化,主要做了一下工作来得到两个节点的不同, 最终得到原创 2022-06-22 22:26:42 · 132 阅读 · 0 评论 -
vue组件通信的方式
本文总结介绍vue组件通信的方法。父组件通过向子组件传递数据,子组件通过和父组件通信。 子组件向父组件传值 绑定一个自定义事件,当这个事件被执行的时就会将参数传递给父组件,而父组件通过监听并接收参数。 二、 eventBus事件总线() 事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下: (1)创建事件中心管理组件之间的通信。 发送事件 假设有两个兄弟组件和: 在组件中发送事件: 接收事件 在组件中发送事件: 在上述代码中,这就相当于将值存贮在了事件总线中,在其他组件中可以直接访问。事件总原创 2022-06-21 22:11:37 · 71 阅读 · 0 评论