Vue
文章平均质量分 63
障碍的枫子
这个作者很懒,什么都没留下…
展开
-
Virtual DOM原理
一、什么是Virtual DOMVirtual DOM 本质上是对DOM更加轻量级描述的JS对象。二、为什么需要Virtual DOMDOM操作起来更慢,而且频繁地变动DOM会造成浏览器的回流或者重绘,会严重地影响到性能;在patch过程中,也会将差异尽可能地一次性更新到DOM中,保证了DOM不会出现性能差的情况。Virtual DOM的好处:在现代前端框架中,无需手动操作DOM。一方面是保证了程序的性能,(多人协作开发项目中如果review不严格可能,开发出来的代码性能较低)不会出现性原创 2021-10-31 11:44:45 · 396 阅读 · 0 评论 -
CSS作用域(样式分割)
CSS作用域(样式分割)的使用在vue中,让css样式只在当前组件中生效:scoped 属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。二、scoped的实现原理vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .test { color: blue; } </style> <temp原创 2021-10-29 11:32:06 · 919 阅读 · 0 评论 -
vue中data必须是一个函数
一、 VUE组件中的data必须是函数Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了;在JavaScript中,只有函数构成作用域(注意理解作用域,只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。 这是因为js本身的特性带来的,跟vue本身设计无关。例如:const MyComponent = function(原创 2021-10-19 10:48:35 · 195 阅读 · 0 评论 -
Vue的模板和数据是如何渲染成DOM的
一、实现过程1、new Vue 初始化数据等;2、$mount 将 render、template 或 el 转为 render 函数;3、生成一个渲染 Watcher 收集依赖,并将执行render 函数生成 vnode 传递给 patch 函数执行,渲染页面;4、当渲染 Watcher 依赖发生变化时,执行Watcher 的 getter 函数,重新依赖收集。并且重新执行 render 函数生成 vnode 传递给 patch 函数进行页面的更新。参考文献:【面试题解析✨】Vue原创 2021-10-19 10:34:30 · 631 阅读 · 0 评论 -
Vue Router的路由模式hash和history的实现原理
一、Vue-router 中hash模式和history模式的关系最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。二、hash模式实现原理早期前端路由的实现就是基于location.hash来实现的,其实实现原理很简单,location.hash的值就是URL中#原创 2021-10-18 22:23:00 · 4190 阅读 · 1 评论 -
显示与隐藏
一、CSS显示与隐藏的方法1.display 显示display属性规定元素应该生成的框的类型。值为none: 此元素不会显示,从而达到影藏的效果;值为block: 将此元素设为块级元素,从而达到显示的效果;隐藏后不占据页面空间,不再为其保留位置。2.visibility可见性visibility 属性规定元素是否可见。值为hidden: 使元素不可见;值为visible: 是元素可见;隐藏后继续占据页面空间上的位置。3.overflow 溢出overflow属性规原创 2021-10-03 16:27:57 · 695 阅读 · 0 评论 -
数据双向绑定
有Object.defineProperty() 和 Proxy 对象(代理)两种方式来实现数据双向绑定。 用对数据的劫持操作的方式。当访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外的操作,然后返回结果。Vue2.x 是使用 Object.defindProperty(),来进行对对象的监听的;Vue3.x 版本之后就改用Proxy,进行实现的。原理: 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的, 也就是说数据和视图同步,数据发生变化,视.原创 2021-09-24 20:40:24 · 3871 阅读 · 1 评论 -
Vue生命周期总结
一、简述Vue的实例从创建到销毁的过程,也就是说从开始创建、初始化data,methods数据、编译模板、mounted挂载DOM-渲染,再到运行就阶段的更新-渲染,最后到销毁阶段的的卸载等一系列过程。二、Vue生命周期的作用Vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用不同的钩子(回调函数)可以实现组件的数据管理和DOM想渲染这两大功能;生命周期的多个钩子事件控制着整个Vue实例过程时,容易形成好的逻辑。三、每个周期具体适合哪些场景1、beforeCreate:原创 2021-09-09 15:24:44 · 243 阅读 · 0 评论