你对vue框架的明白？
Vue.js是一个流行的JavaScript框架，它使得构建复杂的交互式应用步伐变得更容易。Vue.js基于MVVM模式计划，采用了响应式数据绑定和组件化的架构。在Vue.js中，数据绑定是非常紧张的概念，它通过使用观察者模式来追踪数据变化并自动更新DOM。
Vue.js源码是一个巨大而复杂的项目，但通过掌握其核心概念，我们可以更好地明白其工作原理。在本文中，我们讨论了Vue.js的响应式数据绑定、假造DOM、模板编译、组件、生命周期钩子、事件处置惩罚和指令等关键知识点。了解这些知识点可以让我们更好地编写Vue.js应用步伐，并深入了解Vue.js的工作原理
盘算属性和侦听器
Vue.js提供了盘算属性和侦听器来处置惩罚数据的变化。盘算属性是用于盘算和缓存的属性，而侦听器则允许你监听数据的变化并执行特定的操作。这两个概念都是基于Vue.js的响应式数据绑定实现的。
盘算属性的实现是通过使用Object.defineProperty()方法来定义getter和setter方法。当盘算属性依赖的数据发生变化时，盘算属性会重新盘算，如许可以避免重复盘算。侦听器则是通过使用Watcher对象来实现的。
Vue.js中的假造DOM
Virtual DOM是Vue.js的一个核心概念，它是一个“轻量级”的DOM副本，作为内存中的JavaScript对象存在。每次数据发生变化时，Vue.js会盘算须要更新的最小DOM子树，然后只更新这些部门。这种方法比直接操作真实DOM要快得多。
在Vue.js中，假造DOM由VNode类来表示。VNode类有一些属性：tag、data、children等。VNode实例通常通过createElement()方法创建，该方法返回一个VNode实例。
模板编译
Vue.js使用模板来形貌应用步伐的界面，而模板编译是将模板转换为渲染函数的过程。在Vue.js中，模板编译是由template编译器来处置惩罚的。它将模板解析为AST（抽象语法树），然后将AST转换为渲染函数。
Vue.js的模板编译器是独立的，可以在欣赏器中运行。在开辟环境中，模板编译器会被自动加载，并且Vue.js还提供了一个单独的运行时构建，不包罗模板编译器。这意味着你须要在构建工具中对模板进行预编译，或者使用手动渲染函数。
组件
组件是Vue.js的另一个核心概念，它允许你构建可重用和可组合的UI组件。在Vue.js中，每个组件都是一个Vue实例，并且可以包罗其他组件。组件可以吸取属性（props）和发射事件，以便与其他组件进行通讯。
Vue.js中的组件是通过Vue.extend()方法来创建的。该方法将根本Vue类与组件定义归并，并返回一个新的构造函数。然后可以在应用步伐中使用自定义标志（例如）来创建组件实例。
生命周期钩子
Vue.js的生命周期钩子是一系列函数，它们定义了Vue实例在不同阶段执行的操作。这些阶段包括：创建、挂载、更新和烧毁。生命周期钩子可以在Vue实例的选项对象中定义。
在Vue.js中有7个生命周期钩子：
created: 在Vue实例创建后调用，但在模板渲染之前。
mounted: 在Vue实例挂载到DOM上后调用。
updated: 在Vue实例数据被更新后调用，但在DOM重新渲染之前。
destroyed: 在Vue实例烧毁之前调用。
beforeCreate: 在Vue实例创建之前调用。
beforeMount: 在Vue实例挂载到DOM之前调用。
beforeUpdate: 在Vue实例数据更新之前调用，但在DOM重新渲染之前。
Vue.js中的事件处置惩罚
在Vue.js中，你可以使用v-on指令来绑定DOM事件。例如，你可以使用v-on:click来监听点击事件。事件处置惩罚步伐可以是内联函数，也可以是Vue.js组件的方法。事件处置惩罚步伐可以吸取一个事件对象作为参数。
在Vue.js的事件处置惩罚中，事件是经过封装的。在组件内部使用 e m i t 方法触发事件，在组件之间使用 emit方法触发事件，在组件之间使用 emit方法触发事件，在组件之间使用on来监听事件。如许可以避免直接操作dom元素，使代码更加清楚和易于维护。
Vue.js中的指令
Vue.js中的指令是特别的HTML属性，它们可以用于指定某些特别行为。例如，v-if和v-for指令用于条件渲染和循环渲染。指令可以吸取表达式作为参数，并可以在表达式变化时进行更新。
Vue.js提供了一些内置指令，包括v-model、v-bind、v-on等。我们可以自定义指令来扩展Vue.js的功能。自定义指令须要使用Vue.directive()方法来定义。
简述MVVM
MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时间会关照viewModel层更新数据。
v-for中key的作用
- key的作用主要是为了更高效的对比假造DOM中每个节点是否是相同节点;
- Vue在patch过程中判断两个节点是否是相同节点,key是一个须要条件，渲染一组列表时，key每每是唯一标识，以是如果不定义key的话，Vue只能认为比力的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比力低效，影响性能;
- 从源码中可以知道，Vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key,它的值就是undefined，则大概永 远认为这是两个相同的节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。
vue组件的通讯方式
父子组件通讯
父->子props，子->父 o n 、 on、 on、emit 获取父子组件实例 parent、parent、children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject 官方不保举使用，但是写组件库时很常用
兄弟组件通讯
Event Bus 实现跨组件通讯 Vue.prototype.$bus = new Vue() Vuex
跨级组件通讯
a t t r s 、 attrs、 attrs、listeners Provide、inject
路由传参
- 使用router-link进行路由导航，传递参数
- 直接调用$router.push 实现携带参数的跳转
- 通过路由属性中的name来确定匹配的路由，通过params来传递参数
- 使用path来匹配路由，然后通过query来传递参数，这种环境下 query传递的参数会显示在url
路由的两种模式 hash与history
对于Vue 这类渐进式前端开辟框架，为了构建SPA(单页面应用)，须要引入前端路由体系，这也就是Vue-router存在的意义。前端路由的核心，就在于改变视图的同时不会向后端发出哀求。
1、hash ——即地址栏URL中的#符号，它的特点在于：hash 虽然出现URL中，但不会被包罗在HTTP哀求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2、history ——使用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。这两个方法应用于欣赏器的历史记载站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记载进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你欣赏器不会立即向后端发送哀求。history模式，会出现404 的环境，须要背景配置。
双向绑定实现原理
当一个Vue实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时关照变化。每个组件实例都有相应的 watcher 步伐实例，它会在组件渲染的过程中把属性记载为依赖，之后当依赖项的 setter 被调用时，会关照 watcher重新盘算，从而致使它关联的组件得以更新。
v-model的实现以及它的实现原理吗？
- vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。v-model是语法糖，默认环境下相于:value和@input。
- 使用v-model可以淘汰大量繁琐的事件处置惩罚代码，提高开辟效率，代码可读性也更好
- 通常在表单项上使用v-model
- 原生的表单项可以直接使用v-model，自定义组件上如果要使用它须要在组件内绑定value并处置惩罚输入事件
- 我做过测试，输出包罗v-model模板的组件渲染函数，发现它会被转换为value属性的绑定以及一个事件监听，事件回调函数中会做相应变量更新操作，这说明神奇邪术实际上是vue的编译器完成的。
new Vue后整个的流程
initProxy：作用域署理，拦截组件内访问其它组件的数据。
initLifecycle：建立父子组件关系，在当前组件实例上添加一些属性和生命周期标识。如[Math Processing Error]parent,parent,refs,$children,_isMounted等。
initEvents：对父组件传入的事件添加监听，事件是谁创建谁监听，子组件创建事件子组件监听
initRender：声明[Math Processing Error]slots和slots和createElement()等。
initInjections：注入数据，初始化inject，一样寻常用于组件更深条理之间的通讯。
initState：紧张)数据响应式：初始化状态。很多选项初始化的汇总：data,methods,props,computed和watch。
initProvide：提供数据注入。
思考：为什么先注入再提供呢？？
1、起首来自祖辈的数据要和当前实例的data,等判重，相结合，以是注入数据的initInjections一定要在InitState的上面。
- 从上面注入进来的东西在当前组件中转了一下又提供给子女了，以是注入数据也一定要在上面。
keep-alive的实现
keep-alive是Vue的内置组件，实现组件缓存。当它包裹动态组件时，会缓存不运动的组件实例，而不是烧毁。
keep-alive是体系自带的一个组件，用来缓存组件，避免多次加载相同的组件，淘汰性能斲丧，提高用户体验。
例如我们可以在列表页进入详情页使用。如果在列表页点击的都是相同的 ，详情页就不消哀求多次了，直接缓存起来就行了，如果点击的不同，则须要重新哀求数据
vuex、vue-router实现原理
vuex是一个专门为vue.js应用步伐开辟的状态管理库。 核心概念：
state(单一状态树) getter/Mutation显示提交更改state
Action雷同Mutation，提交Mutation，可以包罗任意异步操作。
module(当应用变得巨大复杂，拆分store为具体的module模块)
你怎么明白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 Vnodeold Vnode 不存在就增长新的Vnode 都存在就执行diff更新 当确定须要执行diff算法时，比力两个Vnode，包括三种类型操作：属性更新，文本更新，子节点更新 新老节点均有子节点，则对子节点进行diff操作，调用updatechidren 如果老节点没有子节点而新节点有子节点，先清空老节点的文本内容，然后为其新增子节点 如果新节点没有子节点，而老节点有子节点的时间，则移除该节点的所有子节点 老新老节点都没有子节点的时间，进行文本的替换
updateChildren 将Vnode的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比力，一共有4种比力方式。如果4种比力都没匹配，如果设置了key，就会用key进行比力，在比力的过程中，变量会往中心靠，一旦StartIdx>EndIdx表明oldCh和vCh至少有一个已经遍历完了，就会竣事比力。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
