![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
qq_35469739
这个作者很懒,什么都没留下…
展开
-
Vue.js 3.0 响应式系统的实现原理
Vue3 使用 Proxy 对象重写响应式系统,这个系统主要有以下几个函数来组合完成的:1、reactive:接收一个参数,判断这参数是否是对象。不是对象则直接返回这个参数,不做响应式处理创建拦截器对象 handler, 设置 get/set/deletePropertyget收集依赖(track)返回当前 key 的值。如果当前 key 的值是对象,则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty如果当前的 key 的值不是原创 2020-09-23 16:30:50 · 571 阅读 · 0 评论 -
Vue 3.0 介绍
Vue 3.0 介绍1、Vue 3.0 源码组织方式源码组织方式:源码采用 ts 重写使用 Monorepo 管理项目结构packages 目录结构compiler-core: 和平台无关的编译器代码compiler-dom: 浏览器平台下的编译器代码(依赖于 compiler-core)compiler-sfc: 编译单文件组件的代码(依赖于 compiler-core 和 compiler-dom)compiler-ssr: 服务端渲染的编译器(依赖于 com原创 2020-09-16 17:39:23 · 10176 阅读 · 0 评论 -
Vuex 数据流管理及Vue.js 服务端渲染(SSR)
Vuex 数据流管理及Vue.js 服务端渲染(SSR)项目见:https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-03任务一:Vuex 状态管理1、课程目标Vue 组件间通信方式回顾Vuex 核心概念和基本使用回顾购物车案例模拟实现 Vuex2、组件内的状态管理流程状态管理:state:驱动应用的数据源view:以声明方式将 state 映射到视图actions:响应在 vie原创 2020-08-09 16:00:22 · 750 阅读 · 0 评论 -
vue.js源码剖析——虚拟 DOM
任务二:vue.js源码剖析——虚拟 DOM1、虚拟 DOM 概念回顾什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。例如:指令和组件机制为什么要使用虚拟 DOM避免直接操作 DOM,提高开发效率作为一个中间层可以跨平台虚拟 DOM 不一定可以提高性能首次渲染的时候会增加开销复杂视图情况下提升渲染性能2、代码原创 2020-08-02 22:40:01 · 137 阅读 · 0 评论 -
Vue.js 源码剖析-响应式原理 学习的心得体会+学习笔记(青铜到铂金)
拉勾教育大前端高薪训练营 心得体会+学习笔记心得体会不知不觉在拉钩教育大前端高薪训练营已经学习2个多月了,在这两个多月的学习中,自己收获了很多,不仅养成了每次学习时都保证高质量的记好学习笔记的习惯,而且对自己整个的前端基础知识进行了巩固,对基础知识有了更深的理解,勉强做到了知其然,更知其所以然。接下来我想谈下拉钩教育大前端高薪训练营的课程体系:这门课的内容非常的好,为什么这么说呢?原因有以下几点:1.课程的深度做的足够好:课程不仅会教同学们怎么使用前端经常使用的框架(vue、react 和 ang原创 2020-08-02 09:55:07 · 904 阅读 · 0 评论 -
vue.js源码剖析——虚拟 DOM(更新中)
Vue.js 源码分析(响应式、虚拟 DOM、模板编译和组件化)项目见:https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-02任务二:vue.js源码剖析——虚拟 DOM1、虚拟 DOM 概念回顾什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。原创 2020-08-02 00:08:46 · 163 阅读 · 0 评论 -
Vue.js 源码分析-响应式原理
Vue.js 源码分析(响应式、虚拟 DOM、模板编译和组件化)项目见:https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-02任务一:Vue.js 源码剖析-响应式原理1、Vue 的不同构建版本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BgywtCl9-1596183666518)(…/images/vueAllJs.png)]Full:包含编译器和运行时的构建原创 2020-07-31 16:22:31 · 864 阅读 · 0 评论 -
简易版 vue-router的 hash 模式实现
1、模拟 VueRouter 的 hash 模式的实现,把 URL 中的 # 后面的内容作为路由的地址,可以通过 hashchange 事件监听路由地址的变化。答:自己实现的 vue-router 的代码如下(完整代码见https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-01/code/liuzi-hash-router):router/index.jsimport Vue from "vue";i原创 2020-07-11 09:21:59 · 792 阅读 · 0 评论 -
简易版 vue 指令解析
2、在模拟 Vue.js 响应式源码的基础上实现 v-html 指令,以及 v-on 指令答:指令解析的代码如下(完整代码见 https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-01/code/liuzi-minVue ):vue/vue.js class Vue { constructor(options) { // 1、通过属性保存选项的数据 this.$原创 2020-07-11 09:19:27 · 357 阅读 · 0 评论 -
vue Diff 算法的执行过程
简述 Diff 算法的执行过程答:diff 的过程就是调用名为 patch 的函数,比较新旧节点,一边比较一边给真实的 DOM 打补丁。patch 函数接收两个参数 oldVnode 和 Vnode 分别代表新的节点和之前的旧节点,这个函数会比较 oldVnode 和 vnode 是否是相同的, 即函数 sameVnode(oldVnode, vnode), 根据这个函数的返回结果分如下两种情况:true:则执行 patchVnodefalse:则用 vnode 替换 oldVnode原创 2020-07-09 12:09:40 · 1126 阅读 · 6 评论 -
vue动态给 data 增加的成员是否是响应式数据
我们点击按钮的时候动态给 data 增加的成员是否是响应式数据(代码如下),如果不是的话,如果把新增成员设置成响应式数据,它的内部原理是什么。let vm = new Vue({ el: '#el' data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump' } }})答:不是响应式数据。响应式对象和响应式数组是指原创 2020-07-09 12:07:00 · 1586 阅读 · 0 评论