![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 85
shinshinshintaro
持续性反思,间隔性行动
展开
-
Vue3 ref的原理解析以及实践
本篇作为Vue3中ref api的讲解,希望你拥有以下知识有这么一段代码,此时我们不难发现销售总额应当为salePrice*product.quantity,于是我们定义销售总额,并注入依赖。但此段代码不会像我们所想的那样运行,因为salePrice并不是一个响应式变量。此时如果你熟悉Vue3Api,你应该知道这里是一个使用ref的场景。ref函数接受一个值并返回一个响应式的、可变的Ref对象。Ref对象只有一个.value属性值。第一种实现,通过reactive方法直接实现虽然能行,但这并不是我们以原创 2022-06-29 10:02:43 · 1249 阅读 · 0 评论 -
Vue3响应式原理解析以及实践(下)
上文中我们阐述了Vue3数据响应、依赖使用的方式,本篇接着讲解Proxy代理以及编写完整的响应式源码。回顾我们上篇的需求:我们想在get以及set时拦截下来并完成相应的依赖注入以及跟踪,在下文中我们通过ES6 Reflect 以及 ES6 Proxy去实现了它。什么是Proxy?Proxy 对象是ES6新出的一个特性,用于创建一个对象 的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。为什么Proxy会取代Object.defineProperty:Object.definePr原创 2022-06-21 09:25:13 · 100 阅读 · 0 评论 -
Vue3响应式原理解析以及实践(上)
Vue3重写了Vue2中的响应式原理,通过代理代替Object.defineProperty提升了性能,并解决了对象和数组值更改时无法正确响应的问题。首先,我想先介绍响应式中所需用到的函数对象。在Vue3中,我们将变量间存在依赖关系的通过effect函数表达,通过track函数注入依赖,通过trigger函数触发effect跟踪依赖effect函数:我们将一个值依赖于另外一个值的关系通过函数结果返回。在以上代码中我们将其中的函数称为price 和 quantity的副作用函数,当price 或 quant原创 2022-06-20 09:53:06 · 340 阅读 · 0 评论 -
VueX原理解析以及实现一个简单的Vuex
前端以前是没有状态管理的,直到Fackbook提出一个叫Flux的概念,才有了状态管理。以前前端是通过MVC模式管理代码,但后来我们使用例如Vue、React、Angular这类通过声明式开发的框架,发现状态很难管理,容易出现状态被任意修改。当应用越来越大,这种不确定性会导致系统不稳定,而且定位bug也变得困难。Flux,VueX都是一种关于单向数据流的思想开发的状态管理模式,这个模式下包含以下几个部分:以下是一个表示“单向数据流”理念的简单示意:在这个单向数据流模型中,使用一个上传数据流和一个下传数据流进原创 2022-06-15 16:39:48 · 539 阅读 · 0 评论 -
Vue高阶组件的原理以及实践
高阶组件在许多使用Vue框架进行开发的前端工程师的印象中,大部分都比较陌生。Vue官网也没有推出这一方案的使用,大概是官方也觉得不好用。但这不影响我们来学习高阶组件的这种思维,看完本篇希望你对高阶组件有基本的认识。高阶组件让我们想到一个函数式编程常会出现的类似名称的“高阶函数”。高阶函数:为一个函数接受一个函数并返回一个新函数,使得新函数具有这个函数原先的功能又能够自定义的添加新的功能。同样,高阶组件也具备与高阶函数一样的性质。高阶组件:接受一个组件并返回一个组件,这个组件具有原组件的功能,并拥有了新自定义原创 2022-06-14 09:01:39 · 2783 阅读 · 0 评论 -
Vue渲染函数原理以及实践
Vue是如何渲染页面的Vue编译第一阶段:在Vue中,渲染系统是组成响应系统的另外一半,如果使用Vue CLI构建项目,会用到webpack和vue-loader,实际上vue-loader会在构建阶段实现预编译,把模版代码编译为浏览器可直接解析的DOM代码。另外,Vue还提供了用于编译的渲染函数,它类似angular的ALT编译模式,那应用就可以运行未编译版本。两种编译模式,一种会把编译器打包进去,一个直接把代码预先编译,包含编译器版本经过gzip压缩大概30KB,不包含编译器版本大概20KB,所以预先编原创 2022-06-13 09:53:47 · 1433 阅读 · 0 评论 -
Vue响应式原理以及实现
什么是Vue响应式?原创 2022-06-10 11:21:53 · 274 阅读 · 0 评论