
vue
文章平均质量分 80
一袋米要扛几楼_
最怕你一生碌碌无为,还安慰自己平凡可贵
展开
-
vue3源码分析--真的有必要掌握框架的细枝末节吗?
古人云:工欲善其事必先利其器,磨刀不误砍柴工。但是砍柴的人需要知道怎么制作刀吗?注意:本文先分析要不要学源码,然后分析要不要掌握源码的每一个细枝末节(深究技术)!!!为什么要学源码为了面试被迫学习->毕竟面试可是要造火箭的为了装逼->装逼才是人生的究极快乐遇到问题网上找不到解决方案->只能硬着头皮啃源码想了解优秀的代码长什么样->猎奇心理打磨技术永远不会错->技术是安身立命之本…为什么不要深究源码为了面试被迫学习源码大部分面试官也只是跟风网上的面.原创 2021-02-07 10:23:39 · 1070 阅读 · 6 评论 -
node --mode 加载不同env文件
vue-cli-service区分打包环境变量package.json–mode指定加载对应的env文件{ "scripts": { "dev": "vue-cli-service serve", "build": "npm run build-pro", "build-pro": "vue-cli-service build --mode production", "build-test": "vue-cli-service build --mode test"原创 2020-11-05 17:19:02 · 1989 阅读 · 1 评论 -
2020年 30K的前端架构面试题总结(持续更新)
30K的前端面试题总结vue部分vue父子组件通信vue组件的data为什么建议写成函数返回对象而不是直接写对象?input的input事件会自带event参数,如何同时绑定其他参数keep-alive有哪些参数?LRU算法原理?refvue为什么不兼容ie8简述Vue的响应式原理js实现简单的双向绑定v-modal如何实现computed 会重新求值吗v-if和v-for写在同一标签上,谁的优先级高?为什么?怎么优化?用户自定义watch有哪些参数vue2通过下标修改数组项或数组length无法触发响应式原创 2020-06-02 00:39:14 · 16839 阅读 · 7 评论 -
vue源码学习 深入patch diff双端对比算法
什么时候调用patch在beforeMount和mounted之间,会执行options.render函数生成新的VNode树。然后调用vm._update(新VNode)更新,然后进入到patch阶段。// src/core/instance/lifecycle.jsexport function mountComponent ( vm: Component, el: ?Eleme...原创 2020-04-03 13:52:21 · 1268 阅读 · 0 评论 -
vue源码学习总结 深入解析nextTick
nextTick实现机制优先级:setImmediate() > MessageChannel > Promise.resolve().then() > setTimeout(fn,0)执行过程当前tick =>当前tick第一次调用queueNextTick 的时候将回调放入callbacks中,且将timerFunc推入到宏/微任务栈中,设置pending锁=&...原创 2020-04-02 22:16:19 · 1074 阅读 · 1 评论 -
vue源码学习总结 深入解析template编译成render函数过程
简述编译流程总的来说,在beforeMount之前执行编译过程,第一步通过html-parser将template解析成ast抽象语法树,第二步通过optimize优化ast并标记静态节点和静态根节点,第三步通过generate将ast抽象语法树编译成render字符串并将静态部分放到staticRenderFns中,最后通过new Function(render)生成render函数。在bef...原创 2020-04-01 17:12:32 · 3500 阅读 · 3 评论 -
vue源码学习总结 深入响应式原理
深入响应式原理图请反复观看原理图,画这个图的人请收下我的膝盖。。。从initState切入,发现有3种watcherVue.prototype._init= function (options?: Object) { callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/...原创 2020-03-31 18:03:48 · 2223 阅读 · 0 评论 -
vue源码学习总结 lifecycle深度解析
钩子函数详细描述钩子函数说明beforeCreatethis.$options初始化完成,生命周期钩子函数、事件函数、渲染函数等已挂载到Vue.prototype上createdinject、data、method、computed、prop、provide可以访问了,但真实dom还没有生成,this.$el还不可用beforeMountrender函数首次...原创 2020-03-27 18:13:22 · 1095 阅读 · 0 评论 -
vue源码学习总结 prop data method computed 的命名冲突处理策略
vue 组件属性命名冲突处理策略当 prop data method computed 的key值冲突, 获取值优先级策略如下:computed>data>method computed>method>prop prop>data在源码src/instance/state.js 的 initState中,方法的执行顺序为 initProps>ini...原创 2020-03-26 16:59:50 · 3647 阅读 · 0 评论 -
vue源码学习总结 this.$data this._data this.$options.data this.xxx之间的联系;data重置
假设有如下代码:let option={ name:'demo', el:'#app', template:'<div>{{name}}</div>' data(){ return { name:'demo page.' } }};let vm=new Vue(option);this.$options.data ...原创 2020-03-26 15:35:10 · 1179 阅读 · 0 评论 -
vue源码学习总结 options合并策略
vue options合并流程格式化数据格式化props为小驼峰命名的对象格式化inject为{key : { from: val}}形式对象格式化directives为{ bind: defFn, update: defFn }形式对象依次合并 parent, child.extends(单个继承组件), child.mixins(数组), child.options,取值越靠...原创 2020-03-25 18:01:29 · 649 阅读 · 3 评论 -
vue如何引入echarts(vue+webpack4.0+iview2.14+vuex+es6+stylus架构三)
第一步:引入echart依赖cnpm i echarts --save第二步:使用ecahrtsrc/main.jsimport echarts from 'echarts'Vue.prototype.$echarts=echarts解释: 在main.js中引入echarts, 然后赋值到Vue的原型上面,在页面就可以使用this.$echarts获取到了第三步:实例效果和代码<...原创 2018-05-25 15:00:19 · 3107 阅读 · 0 评论 -
vue如何引入jquery(vue+webpack4.0+iview2.14+vuex+es6+stylus架构二)
为什么要引入jquery? 很多人vue的插件库没有jquery完善,比如导出word、excel等功能 很多人依赖jquery开发,转成vue一时之间无法完全适应,但是建议少在vue中引入jquery,需要插件可以去github或者vue社区找。第一步:安装jquery依赖cnpm i jquery@latest --save解释: @latest表示安装最新的包 --s...原创 2018-05-25 13:26:01 · 2786 阅读 · 0 评论 -
搭建vue框架(vue+webpack4.0+iview2.14+vuex+es6+stylus架构一)
初始环境:npm+nodeCNPM:如果安装速度过慢,请安装cnpm,然后将下列所有npm换成cnpm。命令行中输入:npm i -g cnpm --registry=https://registry.npm.taobao.orgVue新建项目:npm i -g vue vue-cli webpack -g解释:此命令用于安装vue的基础环境i 表示instal原创 2017-07-28 11:42:48 · 6611 阅读 · 0 评论