![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 79
mxydl2009
这个作者很懒,什么都没留下…
展开
-
封装Vue组件库
封装Vue组件组件库开发很多项目都会用到界面和功能相似的组件,为了能在不同项目中最大程度重用组件,所以会进行组件库开发,以提供不同项目基础的组件开源组件库Element-UIiView组件驱动开发CDDComponent-Driven Development自下而上构建UI从组件开始,到页面结束:先隔离开发组件,再组合成页面组件最大程度重用并行开发可视化测试组件边界情况的处理组件可以访问$root属性,获取到当前组件树的根Vue实例,如果当前组件没有父实原创 2020-12-10 20:53:45 · 1213 阅读 · 0 评论 -
服务端渲染SSR的原理与部署
SPA单页应用缺点首屏渲染时间长不利于SEO服务端渲染服务端执行前端框架代码,生成网页内容,返回客户端,客户端激活为SPA。现代化服务端渲染,或称为同构渲染,应用称为服务端渲染应用或同构应用什么是渲染把数据和模板拼接为完整的HTML文件传统服务端渲染数据渲染发生在服务端前后端耦合,不利于维护服务端压力大页面请求的数据量大,但模板中大多数字符都是多余的客户端渲染数据渲染发生在客户端首屏渲染慢:相比于服务端渲染且不带JavaScript脚本的情况加载JavaSc原创 2020-08-11 13:21:05 · 1136 阅读 · 0 评论 -
Vuex原理解读
组件内的状态管理状态管理流程状态管理state:驱动应用的数据源view:声明方式将state映射到视图actions:响应在view上的用户输入,导致的状态变化单向数据流组件之间通信方式父组件给子组件传值子组件中通过声明props来接收数据父组件通过相应属性给子组件传值子组件给父组件传值父组件监听自定义事件子组件使用$emit()触发自定义事件,抛出值(内联代码可以用$event拿到该值)不相关的组件传值使用自定义事件传值不相关的组件没有父子关系,所以需要一原创 2020-08-04 16:34:03 · 270 阅读 · 0 评论 -
Vue源码解读
Vue的不同构建版本对于Vue的不同构建版本,以下图说明有min后缀的是生产版本,其他是开发版本Full表示完整版,同时包含编译器和运行时编译器:将模板字符串编译为JavaScript渲染函数的代码,即template => h(),体积大(3000多行),效率低运行时:用来创建Vue实例,渲染并处理虚拟DOM等代码,不包含编译器,体积小,效率高Runtime-only是运行时版本,不包含编译器UMD:通用模块化版本,支持多种模块方式,可以在浏览器环境下直接运行(挂载到wind原创 2020-07-31 14:43:29 · 395 阅读 · 0 评论 -
Vue虚拟DOM原理与snabbdom
虚拟DOMJavaScript对象描述真实DOM真实DOM的属性很多,创建DOM节点开销很大虚拟DOM只是普通JavaScript对象,描述属性并不需要很多,创建开销很小手动操作DOM很难跟踪以前的DOM状态,而虚拟DOM可以跟踪上一次状态,维护程序的状态信息。虚拟DOM的作用维护视图与状态的关系复杂视图情况下,可以提升渲染性能还可以实现跨平台渲染,如SSR、原生应用、小程序等虚拟DOM开源库Snabbdomvirtual-domSnabbdom基本使用snabbdo原创 2020-07-21 23:05:15 · 324 阅读 · 0 评论 -
Vue响应式原理与模拟
Vue数据响应式原理:数据劫持(拦截)、观察者模式Vue2: getter和setterVue3: Proxy通信模式发布订阅模式事件中心,提供发布事件(emit方法)和订阅事件(on)的接口,是发布订阅模式的核心,作为事件和事件处理函数的仓库。订阅者:使用事件中心的订阅接口来订阅某种类型的事件,待事件发布时,会调用事件处理函数发布者:使用事件中心的发布接口来发布某种类型的事件,触发事件处理函数的调用观察者模式:Vue的响应式机制观察者(订阅者):watcher拥有一个up原创 2020-07-20 20:47:15 · 223 阅读 · 0 评论 -
Vue-Router核心原理实现
vue-router基本使用配置路由文件// 路由配置文件router/index.js// 导入vue和vue-routerimport Vue from 'vue'import VueRouter from 'vue-router'// 导入首页视图文件import Index from '../views/Index.vue'// 注册路由插件// Vue.use()用来注册插件,会调用传入对象的install方法Vue.use(VueRouter)// 定义路由规则,即原创 2020-07-17 21:50:50 · 522 阅读 · 0 评论