![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
深度剖析vue。
手写vue-router、响应式实现、虚拟DOM、diff算法等
晓萌的百宝袋
这个作者很懒,什么都没留下…
展开
-
模拟实现简易版Vuex
let _Vue = nullclass Store { constructor( options ) { const { state = {}, getters = {}, mutations = {}, actions = {} } = options //state是响应式的 this.state = _Vue.observable(state) //通过数据劫持的get方式给getters传入参数state Object.keys(.原创 2021-03-15 19:42:33 · 86 阅读 · 0 评论 -
vue2.0与vue3.0响应式的区别
Vue2.X响应式:需要遍历对象的每一个属性,调用defineProperty,把属性转换成getter/setter,性能不如Vue3.X无法监听删除操作,例如 delete data.name,只能通过Vue.delete这种额外的方法操作无法直接给对象动态增加响应式成员,需要调用Vue.set()数组的响应式需要特殊处理Vue2.X在程序启动的时候首先需要遍历所有的属性,设置gettersetter,属性嵌套层级比较多的话,消耗性能Vue3.X响应式:性能比Vue2.X提升,使用了原创 2021-03-11 15:15:52 · 339 阅读 · 0 评论 -
Vue.js响应式原理(四)——模拟vue响应式原理
分析整体分析模拟最小版本的vue步骤:观察Vue基本使用结构打印Vue实例观察即将要模拟的成员:以_开头的是私有成员(例如_data),以开头的是公共成员(例如‘开头的是公共成员(例如`开头的是公共成员(例如‘data`),我们只模拟公共成员即可。$el可以是选择器,也可以是dom对象,如果是选择器需要我们转换成dom对象进行存储。最小版本准备模拟$data、$el、$options最小版本的vue的整体结构如下,即需要实现的几种类型。不同类分别的作用如下:Vue:原创 2020-09-08 11:03:33 · 208 阅读 · 0 评论 -
Vue.js响应式原理(三)——发布订阅模式和观察者模式
发布/订阅模式订阅者发布者信号中心我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心发布(publish)一个信号,其他任务可以向信号中心订阅(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”(publish-subscribe pattern)常见的发布/订阅模式:Vue的自定义事件、node的事件处理机制。let vm = new Vue()vm.$on('dataChange', () => { console.lo原创 2020-09-03 15:02:56 · 3654 阅读 · 1 评论 -
Vue.js响应式原理(二)——响应式的核心原理
1、数据响应式核心原理-Vue2.x版本通过ES5提出的Object.defineProperty()实现,它是个无法shim(无法降级处理)的特性,故无法支持IE8及以下版本。简单的解释说明:在vue中把一个普通的js对象传入vue实例作为data选项,vue将遍历此对象所有的属性,并使用Object.defineProperty()把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的,但是在内部它们让vue能够追踪依赖,在属性被访问和修改时通知变更。原创 2020-09-03 11:10:14 · 217 阅读 · 0 评论 -
深入浅出Object.defineProperty()
讲解大致会根据下图展开本文部分参考了书籍《你不知道的javascript》上卷【一】对象的定义与赋值经常使用的定义与赋值方法obj.prop =value或者obj['prop']=value【二】Object.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象prop 当转载 2020-09-03 11:08:12 · 110 阅读 · 0 评论 -
Vue.js响应式原理(一)——数据驱动
vue中常见的与数据驱动的三个相关概念:1、数据响应式数据响应式中的【数据】是指数据模型,数据模型仅仅是普通的JavaScript的对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,从而提高了开发效率。2、双向绑定即当数据改变,视图会发生改变;当视图改变,数据也随之改变。双向绑定中包含了数据响应式,因为双向绑定包含了视图变化。双向绑定针对的是可以和用户交互的表单元素,我们可以使用v-model在表单元素上创建双向数据绑定。3、数据驱动数据驱动是Vue最独特的特性之一。开发过原创 2020-09-02 16:30:17 · 315 阅读 · 0 评论 -
手写vue-router(history模式)
一、分析vue-router功能vue-router的使用://一、router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'//1.注册VueRouter,Vue.use会自动调用VueRouter对象的静态方法install进行插件注册Vue.use(VueRouter)const routes = [ { path:原创 2020-09-01 15:09:57 · 242 阅读 · 0 评论