框架 -Vue系列
文章平均质量分 88
记录自己对Vue的一些复习与新理解,初次接触Vue我们一起加油。
码上游
日拱一卒,热爱可抵岁月漫长。
间歇性喜欢,间歇式成长。
人活经历,不活年纪。
展开
-
【Vue系列】Vue3.0知识点汇总整理
(1) 性能的提升(2)源码的升级;使用Proxy代替defineProperty实现响应式;重写虚拟DOM的实现和Tree-Shaking(3)拥抱TypeScript(4)新的特性1.Composition API(组合API)2.新的内置组件3.其他改变ref用来定义:基本数据类型;reactive用来定义:对象(或数组)类型数据;备注:ref也可以用来定义对象或数组类型数据,它内部会自动通过reactive转为代理对象;定义。原创 2022-12-13 13:40:34 · 1841 阅读 · 0 评论 -
【Vue基础系列】vue-router 万字详解,一篇彻底搞懂
我们在生活中经常听到路由器,但关于路由可能不太了解。其实路由器就是在管理着多个路由(路由器后面的接口key,而另一端电脑或是手机等设备就是value)。 一个路由就是一组key-value的对应关系,多个路由需要经过路由器的管理。其中key为路径,value可能是function或component。 前端路由:value是component,展示页面内容。(当浏览器路径改变时,对应的组件就会显示) 后端路由:value是function,用于处理客户端原创 2022-11-25 20:50:47 · 1541 阅读 · 0 评论 -
【Vue.js设计与实现】第4章 响应系统的作用与实现
本文是我看的Vue.js设计与实现这本书第二篇 响应系统 的第4章 响应系统的作用与实现的一些总结与收获。第4章从宏观视角讲述了Vue.js 3.0中响应系统的实现机制。从副作用函数开始,逐步实现一个完善的响应系统,还讲述了计算属性和watch的实现原理,同时讨论了在实现响应系统的过程中所遇到的问题,以及响应的解决方案。原创 2022-11-17 18:20:54 · 504 阅读 · 0 评论 -
【Vue进阶系列】Vue 2.x中8种组件间通信方式
本文会介绍组件间通信的8种方式如下目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式。vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系......原创 2022-11-12 10:28:51 · 1007 阅读 · 0 评论 -
【Vue.js设计与实现】第3章 Vue.js 3 的设计思路
本文是我看的Vue.js设计与实现这本书第一篇 框架设计概览 的第3章 Vue.js 3 的设计与思路的一些总结与收获。第一篇 框架设计概览 有三个章节:权衡的艺术、框架设计的核心要素、Vue.js 3 的设计思路。在第1章中,讲的是框架设计是权衡的艺术,里面存在着取舍,例如性能与可维护性之间的取舍、运行时与编译时之间的取舍等。在第2章中,讲的是框架设计的几个核心要素;第3章中,主要是Vue.js 3 的设计思路、工作机制和重要的组成部分,还有各个模块之间是如何协作之类的。原创 2022-11-10 19:18:38 · 707 阅读 · 0 评论 -
读书感悟【Vue.js设计与实现】第1章 权衡的艺术 【Vue进阶系列】
最近在看一本书《Vue.js设计与实现》,很好的一本书,对于理解Vue的底层很有帮助。从高层的设计角度探讨框架需要关注的问题,从而我们能够更好的理解Vue.js中一些具体的实现为何要做出这样的选择。本篇文章主要是对于该书第一篇 框架设计概览中的第1章 权衡的艺术进行阅读后的一些收获和感悟......原创 2022-11-06 20:33:02 · 513 阅读 · 0 评论 -
【Vue基础系列】Vue中的过滤器(filter)
Vue中的过滤器是什么过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,我们也可以理解其为一个纯函数。Vue允许你自定义过滤器,可被用于一些常见的文本格式化ps:Vue3中已废弃filter......原创 2022-11-05 10:21:19 · 39230 阅读 · 1 评论 -
关于vuex的几个常见问题
因为state是实时更新的,mutations无法进行异步操作,而如果直接修改state的话是能够异步操作的,当你异步对state进行操作时,还没执行完,这时候如果state已经在其他地方被修改了,这样就会导致程序存在问题了。所以state要同步操作,通过mutations的方式限制了不允许异步。vuex 不但是一种全局修改数据的工具,更重要的意义是在于把跨组件的交互,拆分为基于状态管理的处理。使用如 vuex 本身就是希望基于这样一个数据结构的约定,使得项目代码更加直观和简单。原创 2022-11-04 20:53:57 · 557 阅读 · 0 评论 -
【Vue系列】vuex详解,一篇彻底搞懂vuex
让你真正理解vuex!它的工作原理用我们生活中通俗的例子很容易进行理解:把store表示饭店,把Vue components比作去餐厅吃饭的客人,Actions比作服务员,Mutations比作后厨团队,State比作吃到嘴里的菜。dispath(‘jia’,2)比作点餐,点多少份;commit则为服务员手里的点餐宝或者点餐软件把你需要的餐告诉后厨团队...原创 2022-11-04 15:29:22 · 1612 阅读 · 0 评论 -
Vue的生命周期--【day 2】
Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。简单说vue的生命周期就是,从创建vue对象到销毁vue对象的过程。vue生命周期可以分为八个阶段,分别是:beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前原创 2022-06-15 16:39:48 · 98 阅读 · 0 评论 -
【Vue系列】Vue-cli(Vue脚手架)详细教程
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试..本篇文章全面了解Vue中的脚手架用法及总结。原创 2022-11-01 13:35:15 · 2067 阅读 · 3 评论 -
探索Vue底层实现原理系列(二)
一、Vue用的哪种设计模式?属于发布-订阅模式,在new Vue的时候,在Observer中通过Object.defineProperty()达到数据劫持,代理所有数据的getter和setter属性,在每次触发setter的时候,都会通过Dep来通知Watcher,Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁,当Observer监听到数据发生改变的时候,通过Updater来通知Compile更新视图,而Compile通过Watcher订阅对应数据,绑定更新函数,通过D原创 2022-10-10 21:58:58 · 427 阅读 · 0 评论 -
探索Vue底层实现原理系列(一)
一、理解vue的核心理念使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.倘若用一句话来概括vue,那便是官方文档中的一句话:Vue.js 是一套构建用户界面的渐进式框架。什么意思?什么是渐进式框架?在这之前,首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务原创 2022-10-07 17:19:29 · 1481 阅读 · 0 评论 -
【key的内部原理】React、Vue中的key有什么作用?
注意观察细节,上方的文字,一个是id作为key,一个是index作为key。下面就进入正文总结:1.虚拟DOM中key的作用: key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:2.对比规则: (1).就虚拟DOM中找到了与新虚拟DOM相同的key: ①.若虚拟DOM中内容没变,直接使用之前的真实D原创 2022-10-09 10:24:42 · 87 阅读 · 0 评论