Vue
Vue 虚拟DOM
- 文档对象模型或DOM定义了一个接口,该接口允许JacasCript访问和操作HTML文档。元素由数中的节点表示,并且接口允许我们操纵它们,但是大量非常频繁的DOM操作会使页面速度变慢
- 每个元素都是一个节点,每段文字也是一个节点,一个节点就是页面的一部分,每个节点也有对应的子节点
- 虚拟DOM就是为了解决操作真实DOM带来的性能问题而出现的
- 虚拟DOM就是用js对象模拟真实的DOM节点(虚拟节点VNode),也就是将所有的更新DOM的操作先全部反应在JS对象上
- 操作内存中的js对象显然速度要快很多,等更新完成后,再将最终的JS对象映射到真实的DOM上,交由浏览器去绘制页面
总结起来就是
- 获取监听变化后生成的虚拟节点数
- 与上一次虚拟DOM节点数进行比较
- 找到差异的部分,渲染到真实的DOM节点上
- 更新
diff算法
由于在浏览器中操作DOM的代价是非常“昂贵”的,所以才在Vue引入了Virtual DOM,Virtual DOM是对真实DOM的一种抽象描述,不懂的朋友可以自行查阅相关资料。
即使使用了Virtual DOM来进行真实DOM的渲染,在页面更新的时候,也不能全量地将整颗Virtual DOM进行渲染,而是去渲染改变的部分,这时候就需要一个计算Virtual DOM树改变部分的算法了,这个算法就是Diff算法。
简单的说就是新旧虚拟dom 的比较,如果有差异就以新的为准,然后再插入的真实的dom中,重新渲染
- 只会做同级比较,不做跨级比较.
比较后几种情况
- if (oldVnode === vnode),他们的引用一致,可以认为没有变化
- if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text),文本节点的比较,需要修改,则会调用Node.textContent = vnode.text。
- if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点,而且它们不一样,这样我们会调用updateChildren函数比较子节点,这是diff的核心
- else if (ch),只有新的节点有子节点,调用createEle(vnode),vnode.el已经引用了老的dom节点,createEle函数会在老dom节点上添加子节点。
- else if (oldCh),新节点没有子节点,老节点有子节点,直接删除老节点。
key的作用
不设key,newCh和oldCh只会进行头尾两端的相互比较,设key后,除了头尾两端的比较外,还会从用key生成的对象oldKeyToIdx中查找匹配的节点,所以为节点设置key可以更高效的利用dom
所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果
v-for中key的作用
主要作用:
- key的主要作用就是用来提高渲染性能的!
key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)
- vue很大的一个特点就是双向数据绑定,数据一旦改变,页面就渲染新的数据呈现在页面。
- 而为了在增添数据时减少渲染值,复用未改变值,从而提高效率。
- v-for默认使用复用策略,列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改就重现渲染这一项,否则就复用。
- 最好是使用数值中不会变化的项作为key,对应到项目中,即每条数据都有一个唯一的 id ,来标识这条数据的唯一性。
Vue双向绑定原理
MVVM
- M(MODEL,模型层),
- V(View,视图层)
- VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
- MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,因此实现了视图与模型层的相互解耦
vue双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。
核心:关于Vue双向数据绑定,其核心是Object.defineProperty()方法
介绍一下Object.defineProperty()方法
- Object.defineProperty(obj,prop,descriptor),这个语法内有三个参数,分别为obj(要定义其上属性的对象)prop(要定义或修改的属性)descriptor(具体的改变方法)
- 简单地说,就是用这个方法来定义一个值,当调用时我们使用了它里面get方法,当我们给这个属性赋值时,又用到了它里面的set方法
具体实例内容请参考:https://www.jianshu.com/p/e7e...
响应式原理
当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
简单理解是由数据劫持结合发布者-订阅者模式实现的。说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时通过发布者-订阅者模式来实现更新试图。
computed计算属性
计算属性是vue实例中的一个配置选项:computed
比如在data里写了三门课程的得分,我们需要计算平均值。
我们可以在methods里写函数来计算。
但是更好的解决方案是vue提供的computed属性
通常都是一个个计算相关的函数,函数里头可以去写大量的逻辑,最后返回计算出来的值
即我们可以把计算的过程写到一个个计算属性中,让它动态的计算。
- 计算属性一般就是用来通过其他的数据算出一个新数据,而且有个好处就是,它把新的数据缓存下来了,
- 当其他的依赖数据没有发生改变,它调用的是缓存的数据,这就极大提高了程序的性能
- 而写在methods里,数据根本没有缓存的概念,所以每次都会重新机选,这也是为什么不用methods的原因
Vue生命周期
Vue实例有一个完整的生命周期,也就是说从创建,初始化数据、编译模板、挂在DOM、渲染--更新--渲染、卸载等一系列过程,我们称为Vue的生命周期,钩子就是在某个阶段给你一个做某些处理的机会
beforeCreate(创建前):
- 在实例初始化之后,数据观测和事件配置之前被调用,此时组建的选项对象还未创建,el和data并未初始化,因此无法访问methods,data,computed等上面的方法和数据
created(创建后): - 实例已经创建完成之后被调用,
- 在这一步,实例已完成以下配置:数据观测、属性和方法的运算、watch/event事件回调,完成了data数据的初始化,el没有。
- 然而,挂载阶段还没有开始,$el属性目前不可见,这是一个,常用的生命周期,因为你可以调用methods中的方法,改变data中的数据,并且修改可以通过Vue的响应式绑定体现在页面上,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,
- 也有一些喜欢在这里发ajax请求,值得注意的是,这个周期中是没有生命方法来对实例化的过程进行拦截的,因此加入有某些数据必须获取才允许进入页面的话,并不适合在这个方法发送请求,建议在组件路由钩子beforeRouterEnter中完成
beforeMount:
- 挂载开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置
- 编译模板,把data里面的数据和模板生成html,完成了el和data初始化,注意此时还没有挂载html到页面上
mounted:
- 挂载完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次
beforeUpdata:
- 在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程
updated(更新后):
- 在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,
- 调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多数情况下,应该避免在此期间更新状态
- 因为这可能会导致更新无限循环,该钩子在服务器渲染期间不被调用
beforeDestory(销毁前):
- 在实例销毁之前调用,实例仍然完全可用
- 这一步还可以用this来获取实例
- 一般在这一步做一些重置的操作,比如清除掉组件中的定时器和监听的dom事件
destroyed(销毁后):
- 在实例销毁之后调用,调用后,所有的事件见同期会被移除,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用
Vue和React区别
- 监听数据变化的实现原理不同
- Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化
- React默认是通过比较引用的方式(diff)进行的,如果不优化可能导致大量不必要的VDOM的重新渲染。
为什么React不精确监听数据 变化?
- 因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,React构建大型应用的适合更加好。
- 数据流的不同
- Vue1.0中可以实现两种双向绑定:父子组件之间,props可以双向绑定;组件与DOM之间可以通过v-model双向绑定。
- Vue2.x中去掉了父子组件双向绑定(但是提供了一个语法糖自动帮你通过事件的方式修改),并且Vue2.x已经不鼓励组件对自己的props进行任何修改了
- React一直不支持双向绑定,提倡的是单向数据流,称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架,因此很多时候我们感受不到这一点区别
- HoC和mixin
- Vue组合不同功能的方式是通过mixin,Vue中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的?比如声明的props怎么接受到的?这些都是Vue创建组件实例的时候隐式干的事。由于Vue默默帮我们做了这么多事儿,所以我们自己如果直接把组件的声明包装以下,返回一个HoC,那么这个被包装的组件就无法正常工作了
- React组合不同功能的方式是通过HoC(高阶组件)。React最早也是使用mixins的,不过后来他们觉得这种方式侵入太强会导致很多问题,就弃用了mixinx转而使用HoC。高阶组件本质就是高阶函数,React的组件是一个纯粹的函数,所以高阶函数对React来说非常简单。
- 组件通信的区别
Vue中有三种方式可以实现组件通信:
- 父组件通过props向子组件传递数据或者回调,虽然可以传递回调,但我们一般只传数据
- 子组件通过事件向父组件发送消息
- 通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据,可以跨越多个层级
React中也有对应的三种方式:
- 父组件通过props可以向子组件传递数据或者回调
- 可以通过context进行跨层级的通信,这其实和provide/inject起到的作用差不多
- React本身并不支持自定义事件,而Vue中子组件向父组件传递消息有两种方式:事件和回调函数,但Vue更倾向于使用事件。
- 在React中我们都是使用回调函数的,这可能是他们二者最大的区别
- 模板渲染方式的不同
- 在表层上,模板语法的不同,React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染,但其实这只是表面现象,比较React并不必须依赖JSX
在深层上,模板的原理不同。这才是本质区别:
- React实在组件JS代码中,通过原生JS实现模板中的常见语法, 比如插值,条件,循环等,都是通过JS语法实现的,更加纯粹更加原生。
- 而Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要V-IF来实现。对于这一点,这样的作法显得有些独特,会把HTML弄得很乱
比如说明React的好处:
- React中render函数是支持闭包特性的,所以我们import的组件在render中可以直接调用。
- 但是在Vue中,由于模板中使用的数据都必须挂载在this上进行一次中专,所以我们import一个组件完了之后,还需要再components中再声明下,这样显得很奇怪但又不得不这样做
- 渲染过程不同
- Vue可以更快的计算出VDOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件库
- React再应用的状态被改变时,全部子组件都会重新渲染,通过shouldComponentUpdate这个生命周期方法可以进行控制,但Vue将此视为默认的优化
- 如果应用中交互复杂,需要处理大量的UI变化,那么使用VDOM是一个好主意,如果更新元素不频繁,那么VDOM并不一定适用,性能很可能还不如直接操控DOM
- 框架本质不同
Vue本质时MVVM框架,由MVC发展而来
React是前端组件化框架,由后端组件化发展而来
- Vuex和Redux的区别
从表面上来说,store注入和适用方式有一些区别。
- 在Vue中,$store被直接注入到了组件实例中,因此可以比较灵活的适用: 使用dispatch,commit提交更新,通过mapState或者直接通过,this.$store来读取数据。
- 在Redux中,我们每一个组件都需要现实的用connect把需要的props和dispatch连接起来。
- 另外Vuex更加灵活一些,组件中即可以dispatch action,也可以commitupdates,
- 而Redux中只能进行dispatch,不能直接调用reducer进行修改
从实现原理上来说,最大的区别是两点:
- Redux使用的是不可变数据,
- 而Vuex的数据是可变的,
- 因此,Redux每次都是用新state替换旧state,而Vuex是直接修改
- Redux在检测数据变化的时候,是通过diff的的方式比较差异的,
- 而Vuex和Vue的原理一样,是通过getter/setter来比较的
- 这两点的区别,也是因为React和Vue设计理念不同。
- React更偏向于构建稳定大型的应用,非常的刻板化
- Vue更偏向于简单迅速的解决问题,更灵活,不那么严格遵循条条框框,因此也会给人一种大项目用React,小项目Vue的感觉
vue-router中keep-alive的使用
背景:在使用基于Vue的单页面富应用的开发中,总会面向这样的产品需求,即从列表页跳转到详情页面,返回时需要保存列表页的状态
这种场景下,若是将数据写入到全局状态中,总会面临复杂的页面路由判断来清除和存储页面状态
keep-alive简介
Vue在2.x版本中将keep-alive这已组建属性扩展成了内置的抽象组件
computed里的get set
- get是基于其他的数据来获取到computed里定义的那个数据
- set是根据computed里定义的那个数据来改变其他的数据
Vuex
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
个人理解 Vuex就是管理组件之间通信的一个插件
Vuex和单纯的全局对象有以下两点不同:
- Vuex的状态存储时响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应的得到高效更新
- 不能直接改变store中的状态。改变store中的状态的唯一途径就是显式的提交(commit)mutation。这样使得我们可以方便地追踪每一个状态地变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用
Store
- 每一个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态(state)
State
- 驱动应用的数据源,用于保存所有组建的公共数据
Getter
- 可以将getter理解为store的计算属性,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
Mutation
- mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type,第一个参数式state,第二个参数payload,也就是自定义的参数。mutation必须是同步函数。mutation对象里的方法需要使用store.commiit调用
Action
- Action提交的是mutation而不是直接变更状态。action可以包含任意异步操作。
- action对象里的方法需要store.dispatch调用
- Action函数接受一个与store实例具有相同方法的属性的context对象,因此你可以调用context.commit提交一个mutation,或者通过context.state和context.getters来获取state和getters
hash和history理解
hash模式:
即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL: http://www.abc.com/#/hello ,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history模式:
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
vue3新特性
- 2020.9.19,尤大正式发布了Vue3.0版本。代号One Piece
- 此框架新的主要版本提供了更好的性能,更小的捆绑包体积,更好的TypeScript集成,用于处理大规模用例的新API,并为框架未来的长期迭代奠定了坚实的基础
Vue3.0中引入了Proxy
- Proxy是ES6中的新增特性,用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)
- Proxy可以理解为,在目标对象志强假设一层拦截。外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写,修改某些操作的默认行为,
- 这样我们可以不直接操作对象本身,而是通过操作对象的代理对象来间接操作对象
- Proxy这个词的原意是代理,用在这里表示由它来代理某些操作,可以译为代理器
组合API(Composition API)
- 当组件变得越来越大时,逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解,且碎片化使得理解和维护复杂组件变得困难
- 选项的分离掩盖了潜在的逻辑问题。
- 此外,在处理单个逻辑关注点时,我们必须不断地“跳转”相关代码地选项块
- 如果能够将同一个逻辑关注点相关的代码配置在一起会更好,于是组合API应运而生
- 使用composition api 地位置被称为setup
- 引入createAPP
从技术上讲,Vue2没有app的概念,我们定义的应用程序只是通过new Vue()创建的根Vue实例。从同一个Vue构造函数创建的每个根实例共享相同的全局配置,因此全局配置使得在测试期间很容易意外地污染其他测试用例。用户需要仔细存储原始全局配置,并在每次测试后恢复。有些api没有恢复方法,这使得设计插件的测试特别棘手
组件上v-model用法已更改
自定义v-model时,prop和时间默认名称已更改
- prop: value -> modelValue
- enent: input -> update: modelValue
- .sync和组件的model选项已移除,可用v-model作为替代
- 现在可以在同一个组件上使用多个v-model进行双向绑定
现在可以定义v-model修饰符
- 比如自定义v-model.capiyalize,绑定为字符串第一个字母的大写
和非 v-for节点上key用法已更改
- Vue2.x建议在v-if/v-else/v-else-if的分支中使用key,Vue3.x中仍然能正常工作,但不再建议,因此没有为条件分支提供key时,也会自动生成唯一的key
- Vue2.x中标签不能拥有key,在Vue3.x中key则应该被设置在标签上
同一元素上使用的v-if和v-for优先级已更改
Vue3.x中v-if会拥有比v-for更高的优先级
- 由于语法上存在歧义,建议避免在同一元素桑同时使用两者,比如利用计算属性筛选出列表
v-bind=“object” 现在排序敏感
- Vue2.x如果一个元素同时定义了v-bind=“object”和一个相同的单独的property,那么这个单独的property总是会覆盖object中的绑定
- Vue3.x声明绑定的顺序决定了它们如何合并
v-for中的ref不再注册ref数组
- Vue2中,在v-for里使用ref属性时,从$refs中获取的响应属性会是一个ref数组
- Vue3中则将ref绑定到一个更灵活的函数上(ele)=>{..//保存ele的操作}