Vue高阶组件（vue高阶组件实现动态渲染）

今天给各位分享Vue高阶组件的知识，其中也会对vue高阶组件实现动态渲染进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、整理涵盖很全很广的前端知识点
• 2、有关vue的常见面试题（上）
• 3、vue和react的区别之我见
• 4、vue 高阶组件必备知识$attrs，inheritAttrs，$listenters详解
• 5、react和vue区别
• 6、4 React-Router基础、二级/动态路由、高阶组件、路由权限控制

整理涵盖很全很广的前端知识点

HTML、CSS相关

html5新特性、语义化

浏览器渲染机制、重绘、重排

网页生成过程：

重排(也称回流): 当 DOM 的变化影响了元素的几何信息( DOM 对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。 触发：

重绘： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。 触发：

重排优化建议：

transform 不重绘，不回流 是因为 transform 属于合成属性，对合成属性进行 transition/animate 动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

css盒子模型

所有 HTML 元素可以看作盒子，在CSS中， "box model" 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

css样式优先级

!importantstyleidclass

什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？

BFC 是 Block Formatting Context 的缩写，即块格式化上下文。 BFC 是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。 布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的 Formatting Context 。 创建：浮动元素 display：inline-block position:absolute 应用: 1.分属于不同的 BFC 时,可以防止 margin 重叠 2.清除内部浮动 3.自适应多栏布局

DOM、BOM对象

BOM（Browser Object Model） 是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 使 JavaScript 有能力与浏览器"对话"。 DOM （Document Object Model） 是指文档对象模型，通过它，可以访问 HTML 文档的所有元素。 DOM 是 W3C （万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。" W3C DOM 标准被分为 3 个不同的部分：

什么是 XML DOM ？ XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 什么是 HTML DOM？ HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

JS相关

js数据类型、typeof、instanceof、类型转换

闭包(高频)

闭包是指有权访问另一个函数作用域中的变量的函数 ——《JavaScript高级程序设计》

当函数可以记住并访问所在的词法作用域时，就产生了闭包，

即使函数是在当前词法作用域之外执行 ——《你不知道的JavaScript》

原型、原型链(高频)

原型: 对象中固有的 __proto__ 属性，该属性指向对象的 prototype 原型属性。

原型链: 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。

特点: JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

this指向、new关键字

this 对象是是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中， this 等于 window ，而当函数被作为某个对象调用时，this等于那个对象。 在实际开发中， this 的指向可以通过四种调用模式来判断。

new

作用域、作用域链、变量提升

继承(含es6)、多种继承方式

（1）第一种是以 原型链的方式来实现继承 ，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。

（2）第二种方式是使用 借用构造函数 的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。

（3）第三种方式是 组合继承 ，组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。

（4）第四种方式是 原型式继承 ，原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。

（5）第五种方式是 寄生式继承 ，寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是我们的自定义类型时。缺点是没有办法实现函数的复用。

（6）第六种方式是 寄生式组合继承 ，组合继承的缺点就是使用超类型的实例做为子类型的原型，导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型，这样就避免了创建不必要的属性。

EventLoop

JS 是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是， Promise.then ， MutationObserver ，宏任务的话就是 setImmediate setTimeout setInterval

原生ajax

ajax 是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。 过程：

事件冒泡、捕获(委托)

event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡

ES6

Vue

简述MVVM

MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型， View 代表UI组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。

谈谈对vue生命周期的理解？

每个 Vue 实例在创建时都会经过一系列的初始化过程， vue 的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件

computed与watch

watch 属性监听 是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用

computed 计算属性 属性的结果会被缓存，当 computed 中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed 中的函数必须用 return 返回最终的结果 computed 更高效，优先使用

使用场景 computed ：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能 watch ：当一条数据影响多条数据的时候使用，例：搜索数据

v-for中key的作用

vue组件的通信方式

父子组件通信

父-子 props ，子-父 $on、$emit` 获取父子组件实例 parent、 parent 、children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject` 官方不推荐使用，但是写组件库时很常用

兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex

跨级组件通信

$attrs、$listeners Provide、inject

常用指令

双向绑定实现原理

当一个 Vue 实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。

v-model的实现以及它的实现原理吗？

nextTick的实现

vnode的理解，compiler和patch的过程

new Vue后整个的流程

思考：为什么先注入再提供呢？？

答：1、首先来自祖辈的数据要和当前实例的data,等判重，相结合，所以注入数据的initInjections一定要在 InitState 的上面。2. 从上面注入进来的东西在当前组件中转了一下又提供给后代了，所以注入数据也一定要在上面。

vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：挂载实例。

keep-alive的实现

作用：实现组件缓存

钩子函数：

原理： Vue.js 内部将 DOM 节点抽象成了一个个的 VNode 节点， keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件 （pruneCache与pruneCache） 的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 vnode 节点从 cache 对象中取出并渲染。

配置属性：

include 字符串或正则表达式。只有名称匹配的组件会被缓存

exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存

max 数字、最多可以缓存多少组件实例

vuex、vue-router实现原理

vuex 是一个专门为vue.js应用程序开发的状态管理库。 核心概念：

你怎么理解Vue中的diff算法?

在js中,渲染真实 DOM 的开销是非常大的, 比如我们修改了某个数据,如果直接渲染到真实 DOM , 会引起整个 dom 树的重绘和重排。那么有没有可能实现只更新我们修改的那一小块dom而不要更新整个 dom 呢？此时我们就需要先根据真实 dom 生成虚拟 dom ， 当虚拟 dom 某个节点的数据改变后会生成有一个新的 Vnode , 然后新的 Vnode 和旧的 Vnode 作比较，发现有不一样的地方就直接修改在真实DOM上，然后使旧的 Vnode 的值为新的 Vnode 。

diff 的过程就是调用 patch 函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁。在采取 diff 算法比较新旧节点的时候，比较只会在同层级进行。 在 patch 方法中，首先进行树级别的比较 new Vnode 不存在就删除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就执行diff更新 当确定需要执行diff算法时，比较两个 Vnode ，包括三种类型操作：属性更新，文本更新，子节点更新 新老节点均有子节点，则对子节点进行 diff 操作，调用 updatechidren 如果老节点没有子节点而新节点有子节点，先清空老节点的文本内容，然后为其新增子节点 如果新节点没有子节点，而老节点有子节点的时候，则移除该节点的所有子节点 老新老节点都没有子节点的时候，进行文本的替换

updateChildren 将 Vnode 的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh 各有两个头尾的变量 StartIdx和EndIdx ，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了 key ，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdxEndIdx 表明 oldCh和vCh 至少有一个已经遍历完了，就会结束比较。

你都做过哪些Vue的性能优化？

你知道Vue3有哪些新特性吗？它们会带来什么影响？

更小巧、更快速 支持自定义渲染器 支持摇树优化：一种在打包时去除无用代码的优化手段 支持Fragments和跨组件渲染

模板语法99%保持不变 原生支持基于class的组件，并且无需借助任何编译及各种stage阶段的特性 在设计时也考虑TypeScript的类型推断特性 重写虚拟DOM 可以期待更多的编译时提示来减少运行时的开销 优化插槽生成 可以单独渲染父组件和子组件 静态树提升 降低渲染成本 基于Proxy的观察者机制 节省内存开销

检测机制 更加全面、精准、高效,更具可调试式的响应跟踪

实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何?

React

1、react中key的作用，有key没key有什么区别，比较同一层级节点什么意思？

2、你对虚拟dom和diff算法的理解，实现render函数

虚拟DOM 本质上是 JavaScript 对象,是对 真实DOM 的抽象表现。 状态变更时，记录新树和旧树的差异 最后把差异更新到真正的 dom 中 render函数:

3、React组件之间通信方式？

Context 提供了一个无需为每层组件手动添加 props ，就能在组件树间进行数据传递的方法.如果你只是想避免层层传递一些属性，组件组合（ component composition ）有时候是一个比 context 更好的解决方案。 5. 组件组合缺点：会使高层组件变得复杂

4、如何解析jsx

5、生命周期都有哪几种，分别是在什么阶段做哪些事情？为什么要废弃一些生命周期？

componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被废弃，在17版本将被删除，需要使用UNSAVE_前缀使用，目的是向下兼容。

6、关于react的优化方法

使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。

不要使用数组下标作为key 利用 shouldComponentUpdate 和 PureComponent 避免过多 render function ; render 里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。 尽量将 props 和 state 扁平化，只传递 component 需要的 props （传得太多，或者层次传得太深，都会加重 shouldComponentUpdate 里面的数据比较负担），慎将 component 当作 props 传入

使用 babel-plugin-import 优化业务组件的引入，实现按需加载 使用 SplitChunksPlugin 拆分公共代码 使用动态 import ，懒加载 React 组件

7、绑定this的几种方式

8、对fiber的理解

9、setState是同步还是异步的

10、Redux、React-Redux

Redux的实现流程

用户页面行为触发一个 Action ，然后 Store 调用 Reducer ，并且传入两个参数：当前 State 和收到的 Action 。 Reducer 会返回新的 State 。每当 state 更新之后， view 会根据 state 触发重新渲染。

React-Redux:

Provider ：从最外部封装了整个应用，并向 connect 模块传递 store 。 Connect ：

11、对高阶组件的理解

高阶组件是参数为组件，返回值为新组件的函数。 HOC 是纯函数，没有副作用。 HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 组件。

高阶组件的作用：

12、可以用哪些方式创建 React 组件？

React.createClass()、ES6 class 和无状态函数

13、 React 元素与组件的区别？

组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。

Vue与React对比？

数据流：

react 主张函数式编程，所以推崇纯组件，数据不可变，单向数据流，

vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

监听数据变化实现原理 ：

组件通信的区别：jsx和.vue模板。

性能优化

vuex 和 redux 之间的区别？

从实现原理上来说，最大的区别是两点：

Redux 使用的是不可变数据，而 Vuex 的数据是可变的。 Redux 每次都是用新的 state 替换旧的 state ，而 Vuex 是直接修改

Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而 Vuex 其实和Vue的原理一样，是通过 getter/setter 来比较的(如果看 Vuex 源码会知道，其实他内部直接创建一个 Vue 实例用来跟踪数据变化)

浏览器从输入url到渲染页面，发生了什么？

网络安全、HTTP协议

TCP UDP 区别

Http和Https区别（高频）

GET和POST区别（高频）

理解xss，csrf，ddos攻击原理以及避免方式

XSS ( Cross-Site Scripting ， 跨站脚本攻击 )是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens ，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。

CSRF （ Cross-site request forgery ） 跨站请求伪造 ：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

XSS避免方式：

CSRF 避免方式：

DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service ，其原理就是利用大量的请求造成资源过载，导致服务不可用。

有关vue的常见面试题（上）

防抖 ：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

例：防抖经常用在我们搜索框输入搜索，点击提交，防止等；

节流 ：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border

盒模型分为 ： W3C标准盒子 、IE盒子

W3C标准盒子（content-box） ：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度 = margin + border + padding + width

IE盒子（border-box） ：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽 = margin + width

1.toString()与join()一样都是把数组转成以逗号分割的字符串

2.pop() 删除数组的最后一项

3.push() 往数组最后添加新数据

4.shift() 删除数组最前面的一项

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

const定义的变量不可以修改，而且必须初始化

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1.都支持服务器端渲染

2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范

3.数据驱动视图

4.都有支持native的方案,React的React native,Vue的weex

5.构建工具

React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex

设计思想

react

1.函数式思想，all in js ,jsx语法，js操控css

2.单项数据流

3.setState重新渲染

4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。

vue

1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中

2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要）

3.Vue宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树

性能

react ----大型项目、优化需要手动去做，状态可控

vue ------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿

扩展性

react

1 类式写法api少，更容易结合ts

2 可以通过高阶组件来扩展

vue

1 声明式写法，结合ts比较复杂

2 需要通过mixin方式来扩展

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach

导航钩子3个参数(to,from,next):

到达这个组件时：

离开这个组件时：beforeRouteLeave:(to,from,next)={}

确认离开next();取消离开next(false)；

beforeEnter:(to,from,next)={}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

方法一：

子组件绑定一个事件，通过 this.$emit() 来触发

在子组件中绑定一个事件，并给这个事件定义一个函数

在父组件中定义并绑定 handleChange 事件

方法二：

通过 callback 函数

先在父组件中定义一个callback函数，并把 callback 函数传过去

在子组件中接收，并执行 callback 函数

方法三：

通过 $parent /$children 或 $refs 访问组件实例

这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

这种方式的组件通信不能跨级

方法四：

$attrs和$listeners

vue和react的区别之我见

react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。

而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。

react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，

vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

react是类式的写法，api很少，

而vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，vue稍微复杂。

react可以通过高阶组件（Higher Order Components--HOC）来扩展，而vue需要通过mixins来扩展

一个react高阶组件的例子：

react做的事情很少，很多都交给社区去做，vue很多东西都是内置的，写起来确实方便一些，

比如 redux的combineReducer就对应vuex的modules，

比如reselect就对应vuex的getter和vue组件的computed，

vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，所以redux结合immutable来优化性能，vue不需要。

上面主要梳理了react和vue的4点不同：

（其中第3点在vue3.0支持类式写法之后就可以去掉了）

react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确。

vue 高阶组件必备知识$attrs，inheritAttrs，$listenters详解

vue 默认情况下，父组件是可以直接给子组件的根元素添加 class 和 style 的，但是有时候我们可能需要在父组件上给子组件添加一些特性绑定( attribute bindings )(我的理解是自定义属性和一些原生属性)到子组件的根元素上， inheritAttrs 就是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性，因为 inheritAttrs 默认为 true ，所以我们在父组件中给子组件添加所有特性绑定，都能绑定到根元素，例如下面

渲染后的dom节点：

把 inheritAttrs 设为 false 后，

渲染后的dom节点：

可以得出上述的结论， inheritAttrs 是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性。

注意：

我们可以把父作用域中传递的所有属性看作一个大的对象 obj ，而 $attrs 会继承 obj 中的一部分属性，这一部分属性的 key 不能为 class ，和 style ，也不能是当前组件声明的 props 值，并且父组件为 v-model 的话，也是不能继承指令封装的 value 值的，若当前组件无props设置， $attrs 则继承除 class 和 style 的所有属性。

通常我们给已封装的组件进行中间处理的时候使用，例如 element-ui 的 el-input ，我们需要把父组件中的传递的 props 直接给子组件的子组件的时候，我们就可以用到 $attrs ，例如：

父组件为：

子组件为：

根据上面所说，去掉 class ，去掉指定的 value ，去掉子组件 props 声明的 limit ，那时我们此的 $attrs 是：

我们对ui框架中的组件进行再封装的时候，例如element-ui中的组件 el-input ，我们把他封装到我们自己的组件内部。

例如 self-input 组件如下，

我们需要把 el-input 组件上自定义的事件传递进去，那么就要用到 $listenters 。

官网的描述：

很容易理解， .native 是给子组件根元素添加事件，自然不是用来传给子组件上的子组件或元素。而我们在父组件上给子组件绑定的所有事件，都会放入 $listeners 中，我们可以在子组件中手动过滤修改后传给子组件中的子组件或者元素上，也可以用 v-on="$listeners" ，直接全部传给子组件或者元素上。

用法也相当简单，例如：

父组件：

子组件：

由于父组件传入的是一个change事件和两个input事件，那我们打印的 this.$listeners 是

下面是一个关于限制小数点的完整demo，感兴趣的可以了解一下

react和vue区别

两者本质的区别：模板和组件化的区别

Vue本质是 MVVM 框架，由 MVC 发展而来；

React是前端 组件化 框架，由后端组件化发展而来；

Vue使用 模板

React使用 JSX

React本身就是 组件化

Vue是在 MVVM 上扩展的

共同点：

都支持组件化，都是 数据驱动视图

监听数据变化的实现原理不同：

数据流的不同:

高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。

Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。

组件通信的区别：

渲染模版的不同：

Vuex和Redux的区别:

diff算法不同:

事件机制不同:

数据是否可变：

react 整体是 函数式 的思想，把组件设计成 纯组件 ，状态和逻辑通过 参数 传入，所以在 react 中，是 单向数据流 ，推崇结合 immutable 来实现 数据不可变 。react在 setState 之后会重新走 渲染 的流程，如果 shouldComponentUpdate 返回的是 true ，就继续渲染，如果返回了 false ，就不会重新渲染

vue 的思想是 响应式 的，也就是基于是 数据可变 的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 dom

vue:

react:

react 的性能优化需要 手动 去做，而 vue 的性能优化是 自动 的，但是 vue 的 响应式机制 也有问题，就是当 state 特别多的时候， Watcher 也会很多，会导致 卡顿 ，所以大型应用（ 状态特别多 的）一般用 react ，更加可控

通过js来操作一切，还是用各自的处理方式:

reac t的思路是 all in js ，通过 js 来生成 html ，所以设计了 jsx ，还有通过 js 来操作 css

vue 是把 html，css，js 组合到一起，用 各自 的处理方式， vue 有单文件组件，可以把 html、css、js 写到一个文件中， html 提供了 模板引擎 来处理。

类式的组件写法，还是声明式的写法:

react是 类式 的写法，api很少

vue是 声明式 的写法，通过传入各种 options ， api 和 参数 都很多。所以 react 结合 typescript 更容易一起写，vue稍微复杂。vue3支持class类式的写法了

react整体的思路就是 函数式 ，所以推崇 纯组件，数据不可变，单向数据流 ，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于 可变数据 的，支持 双向绑定 。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的， vue追求的是开发的简单 ，而 react更在乎方式是否正确 。

4 React-Router基础、二级/动态路由、高阶组件、路由权限控制

1、React-Router-dom;

(1).npm install react-router-dom; - 引入

(2).分类：HahRouter、BrowserRouter；                                                                                [1].HahRouter - localhost:3000/#/topics -其会在路径后添加#,容易与hash#混乱；                      [2].取别名[方便后续修改]：BrowserRouter as Router

(3).Route path="" component={} /Route;

[1].若只有一个Route/Route,默认path="/"; - 其也可以省略

[2].若有多个Route/Route，最后一个不写path,表示除了上面所示的路由，其它路由都会跳转到该组件；

(4).Switch/Switch;//匹配到便不会再向下匹配，常配合exact属性一起使用 = 匹配一模一样的，exact={true};也OK；

(5).Redirect to=""/Redirect;//重定向：若是以上都匹配不到，自动跳转到首页/或其它页

(6).路由跳转Link to=""; NavLink to="";// 最终都转换为a标签，但不能取别名，Vue中使用tag属性可以取别名；NavLink优势：其跳转页面，系统会自动加类名.active,巧妙利用更改样式；=两者大多结合exact属性使用；

2、二级路由：

3、动态路由：

跳转 - this.props - 路由的相关值

4、高阶组件withRouter(); - withRouter(组件);包裹组件即可 - 目的：使用其可让组件内所有元素拥有this.props.history/location/match等属性；

this.props.history.push('/');//重定向路由

5、路由权限控制 - React没有相关API，都要自己写；

(1).登录相关：登录成功种cookie - 其它页面查看 - 若有cookie,正常跳转页面，若没有，提示框+跳转登录页面；

(2).页面获取数据：1.父组件向子组件传值；2.某页面将数据设置到浏览器存储中，一般为localStorage其获取到的是JSON对象，JSON.parse(localStorage.getItem('articleList')); - 其它页面需要数据时，从存储中拿即可；

(3).高阶组件[包裹 - 返回具有某功能的组件]

(4).Prompt组件 - 进入/离开的时候都会进行询问；

[1].引入：import { Switch, Route, Redirect, Prompt } from 'react-router-dom';

[2].使用：Prompt message="" /Prompt; message= { () ={ return true/false }}

补充：

(1).form onSubmit={ this.handleSubmit }/form;

(2).e.preventDefault();//React中阻止默认事件只有此方法；

(3).Link、NavLink组件最终都转换为a标签 - React不能取别名，Vue可以 - React可使用高阶组件来解决此类需求；

Vue高阶组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue高阶组件实现动态渲染、Vue高阶组件的信息别忘了在本站进行查找喔。