![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue原理
文章平均质量分 55
Jack おう
后端转前端的码农小王---深圳
展开
-
nextTick-源码
queueWatcher在push前做去重,然后调用更新视图,这个更新过程是异步的。数据更改》通知watcher》修改dom树,但只有本来事件循环结束后才挂到浏览器上。待补充原创 2021-03-30 08:36:04 · 93 阅读 · 0 评论 -
imooc-computed-watcher-源码
在state.js中的initState函数中会初始化initComputed当computed依赖的值改变会触发update,然后重新计算在watchejs中第一次初始化最外面的vue,所以undefined。第二个断点在extend中,这里传入组件的原型,然后initComputed最后render函数中会访问到这个计算属性name,然后触发get去求值求值过程setter调试(修改computed依赖时)断点3计算值不变化是不会重新渲染的。总结...原创 2021-03-29 08:53:28 · 65 阅读 · 0 评论 -
为什么Vue中的v-if和v-for不建议一起用
添加链接描述也就是先遍历再判断>遍历过程中判断如果先判断>如果需要显示就直接遍历这样大大提高效率。原创 2021-03-25 16:55:31 · 63 阅读 · 0 评论 -
vue调试系列-setter过程
setter》notify>update》queueWacher》nextick》timerFunc(promise降级等)》flushSchedulerQueue》before(callHook(vm, ‘beforeUpdate’))》run》get》update》patch更新 》callUpdatedHooks(callHook(vm, ‘updated’))原创 2021-03-18 11:57:56 · 85 阅读 · 0 评论 -
Nuxt基础(SSR)
32原创 2021-03-10 23:07:27 · 250 阅读 · 0 评论 -
Vue.js 服务端渲染(SSR)
概述什么是渲染渲染的本质就是解析然后替换字符串传统的服务端渲染其实返回去去的是字符串html,浏览器进行解析客户端渲染问题为什么客户端渲染首屏渲染慢传统服务端渲染速度(重点记一下)因为html和数据都在服务端处理 相当没有网络请求所以快,就一个请求。(也就是首屏直出)为什么客户端渲染不利于 SEO(重点记一下)模拟爬取网页首先拿到是服务端渲染的拿到页面字符串后程序进行分析,看权重,例如h1比较大titile等等。。。客户端渲染的啥都没有,因为要执行js原创 2021-03-10 09:01:39 · 173 阅读 · 0 评论 -
Vuex 数据流管理以及手写Vuex
课程目标组件内的状态管理流程组件间通信方式回顾-父组件给子组件传值prop组件间通信方式回顾-子组件给父组件传值$emit组件间通信方式回顾-不相关组件传值eventBus组件间通信方式回顾-通过 ref 获取子组件少用ref,不然数据管理会混乱简易的状态管理方案利用action去管理可以实现debug以及timeTravel以及历史回滚功能Vuex 概念回顾Vuex 的核心概念action后mutation基本代码结构State(单一状态树(响应式的))原创 2021-03-09 23:02:40 · 160 阅读 · 0 评论 -
Vue的初始化-从new之前的导入Vue说起-总结
导入Vuevue.js导入的时候已经创建好一个Vue类new Vue的时候都是基于这个类创建的(基于原型创建)尝试在VueJs的原型中增加自己的方法调用new Vue 后执行了一下方法init方法 // vm 的生命周期相关变量初始化 // $children/$parent/$root/$refs initLifecycle(vm) // vm 的事件监听初始化, 父组件绑定在当前组件上的事件 initEvents(vm) // vm 的编译原创 2021-03-02 09:33:12 · 248 阅读 · 1 评论 -
数组响应式
原创 2021-03-01 08:38:45 · 65 阅读 · 0 评论 -
【作业】Part 3 · 模块二
Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化一、简答题1、请简述 Vue 首次渲染的过程。2、请简述 Vue 响应式原理。3、请简述虚拟 DOM 中 Key 的作用和好处。4、请简述 Vue 中模板编译的过程。...原创 2021-02-28 17:20:02 · 96 阅读 · 0 评论 -
Vue.js 源码分析-模板编译和组件-part2
3原创 2021-02-02 09:10:26 · 180 阅读 · 0 评论 -
Vue.js 源码剖析-虚拟 DOM
ds原创 2021-02-01 21:40:36 · 180 阅读 · 0 评论 -
Vue.js 源码分析(响应式、虚拟 DOM、模板编译和组件化) - 模板编译和组件化
模板编译和组件化原创 2021-01-28 05:13:35 · 176 阅读 · 0 评论 -
Vue.js 源码分析(响应式、虚拟 DOM、模板编译和组件化)> 数据响应式原理-响应式处理入口 part2
数据响应式原理-响应式处理入口原创 2021-01-23 16:32:56 · 184 阅读 · 1 评论 -
Vue.js 源码剖析-响应式原理 part1
目标vue.use set,el.data,data,data,el.mount等创建vue实例,初始化好数据后,vue如何渲染到页面的响应式目录根据不同功能把代码拆分不同文件夹(提高可读性可维护性)compiler转换render函数core核心globalApi Vue的静态方法instance 创建vue实例observer 响应式实现(重点讲)vueDom 重写了snabdomserver 服务端渲染sfc 单文件组件 把单文件组件转成js对象了解flow即可原创 2021-01-19 08:58:45 · 214 阅读 · 0 评论 -
阶段三模块一 直播二 手写VurRouter-hash模式
目标观察vue-router源码-实现路由嵌套功能Vue-Router演示基本效果Vue-Router 源码结构Vue.use() 注册插件源码src\core\global-api\use.jsexport function initUse (Vue: GlobalAPI) { // Vue.use(VueRouter, options) Vue.use = function (plugin: Function | Object) { const installedPl原创 2021-01-14 09:06:45 · 145 阅读 · 0 评论 -
阶段三模块一作业
简答题1、谈谈你对工程化的初步认识,结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。2、你认为脚手架除了为我们创建项目结构,还有什么更深的意义?编程题1、概述脚手架实现的过程,并使用 NodeJS 完成一个自定义的小型脚手架工具2、尝试使用 Gulp 完成项目的自动化构建项目基础代码下载地址:百度网盘:https://pan.baidu.com/s/1AyGApMTFEfCeGfQBdykOGg 提取码: bw3r说明:本次作业中的编程题要求大家完成相应代码后(二选一)原创 2020-11-26 14:51:37 · 268 阅读 · 0 评论 -
手写vue源码,实现一个微型vue以及总结和遇到的坑
Compiler中的compilText和compileElement能拿到this.vm实例 但具体拿属性值时,例如this.vm[msg]却是undefined,找了很长时间发现是,方法调用的顺序错了,应该先调用proxyData后再去创建Observer和Compiler。问题解决这样就能正常拿到值了。原因很简单…不先设置setget拿到undefined很正常,但这里打印的时候看到了set和get(调用完类后调用proxyData方法才出现setget),造成了误导定位问题_proxy原创 2021-01-04 11:18:34 · 164 阅读 · 0 评论 -
阶段三模块一 直播
注意介绍vue集成ts原创 2020-12-02 18:01:07 · 203 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Virtual DOM 的实现原理
1原创 2020-12-09 09:01:53 · 350 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - 模拟 Vue.js 响应式原理
目标原创 2020-12-09 09:01:12 · 283 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Vue.js 基础回顾
Vue.js 基础回顾阶段内容Vue 基础结构2Vue 的生命周期初始化注入阶段,props datas注入vue实例上 然后触发created(因为刚刚初始了props data methods,现在可以访问这个成员)vue创建完毕。把模板编译成render函数开始挂载dom,把元素渲染到页面后触发mounted函数mounted后可以访问新的dom,挂载完后修改data的话会拿到dom进行对比然后更新(beforeUpdate还是旧的数据,新数据在updated拿)最后销原创 2020-12-07 21:23:01 · 211 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Vue-Router 原理实现
介绍Vue Router 基础回顾-使用步骤在main种导入刚刚创建好的router创建vue实例的时候创建vue-router的作用打印一下,没有注册和注册了的vue实例区别注释这行代码,运行注册看看注入了route和router属性。route存了路由规则。router相关方法。总结1.创建组件视图2注册插件3创建ruote对象,注册route对象4,route-view占位,当路由匹配成功会把route-view替换掉动态路由获取参数,建议第二种,不用太强依赖路原创 2020-12-07 22:45:21 · 302 阅读 · 0 评论