![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
尼古拉斯二嘎
记录工作中的点点滴滴,希望与大家共同进步
展开
-
记录一次修改Vue源码
我们都知道在vue中直接修改数组下标来修改数据,是不能触发vue的更新机制的,但是当你发现随着项目代码越来越多,你的$set会越来越多,这样会让你的代码可读性、维护性越来越差本次博主就来为大家分享一下,修改vue源码,让vue支持修改下标触发更新function observe (value, asRootData) { if (!isObject(value) || value instanceof VNode) { return } var ob; if (h.原创 2020-12-25 13:57:03 · 607 阅读 · 3 评论 -
阅读vue源码后,简单实现虚拟dom
class Element { constructor (type, props, children) { this.type = type this.props = props this.children = children }}const ul = createElement( 'ul', {id: 'list'}, [ createElement('li', {class: 'item'}, ['Item 1']), creat.原创 2020-12-20 13:36:36 · 167 阅读 · 0 评论 -
记录一次vue优化
$$(’*’) ,在浏览器控制台输入即可看到,查看项目的dom数量,将不需要双向绑定的数据,例如:列表、表格等不需要编辑或者联动的数据去除双向绑定下面是Vue源码片段function defineReactive$$1 ( obj, key, val, customSetter, shallow ) { var dep = new Dep(); var property = Object.getOwnPropertyDescriptor(.原创 2020-12-17 10:09:50 · 125 阅读 · 0 评论 -
vue深度监听对象newVal和oldVal一样怎么回事
有时候我们使用watch并且添加deep:true深度监听一个对象时候,获取到的newVal和oldVal数据一致,官方一点这种现象叫做:深度监听对象出现的同源问题其实道理很简单,属于vue2.0的坑,其实就是:== 在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。==watch: { obj: { handler (newVal, oldVal) { // newVal和oldVal打印的话是一样的,指针相同.原创 2020-12-04 15:37:21 · 5885 阅读 · 0 评论 -
Element-ui的table中使用fixed后出现行混乱情况
最近项目比较忙,很久没有更新博客了,今天就来贴一下下午使用elementui遇到的问题1、话不多说,先看看问题是什么我们看到table左侧fixed的区域并没有延伸到表格底部,之前在用户拖拽表格时添加了方法this.$refs.headGroupTable.doLayout()来重置表格(headGroupTable是自定义组件名称,学过vue的都懂),但是在数据拿到后使用此方法并不能解决以上问题2、解决方法其实解决方法也很简单,我们打开浏览器看到fiexed的表格区域样式的高度是固定的px,这是原创 2020-11-24 15:49:41 · 2979 阅读 · 2 评论 -
vue的hook,生命周期相关应用
内部监听生命周期函数export default { mounted() { this.chart = echarts.init(this.$el) // 请求数据,赋值数据 等等一系列操作... // 监听窗口发生变化,resize组件 window.addEventListener('resize', this.$_handleResizeChart) // 通过hook监听组件销毁钩子函数,并取消监听事件 this.$once('ho.原创 2020-09-09 10:38:46 · 303 阅读 · 0 评论 -
饿了么框架中el-cascader级联组件“报错TypeError: Cannot read property ‘forEach‘ of null
博主近期做项目遇到这么一个问题,一个关于费用项的表格,表格中的每一行中都包含el-cascader这个组件,当我进行插入行操作(arr.splice方法)的时候,总是报错TypeError: Cannot read property ‘forEach’ of null,但是使用push方法在末尾新增行的时候就没有这个问题,两种方式新增的数据是一样的,为什么splice就会报错呢解决方案:经过排查,是elementui遇到的坑,处理方案是给el-cascader添加一个key值,新增行的时候,对这个值进行+原创 2020-09-09 10:00:09 · 1624 阅读 · 0 评论 -
vue和react的diff算法比较
相同点:vue和react的diff算法,都是不进行跨层级比较,只做同级比较。不同点:vue进行dif时,调用patch打补丁函数,一边比较一边给真实的DOM打补丁Vue对比节点,当节点元素类型相同,但是className不同时,认为是不同类型的元素,删除重新创建,而react则认为是同类型节点,进行修改操作① Vue的列表比对,采用从两端到中间的方式,旧集合和新集合两端各存在两个指针,两两进行比较,如果匹配上了就按照新集合去调整旧集合,每次对比结束后,指针向队列中间移动;②而react则是从原创 2020-07-29 11:27:50 · 2585 阅读 · 0 评论 -
vue的diff算法讲解
当数据发生变化时,vue是怎么运作的?vue会根据真实DOM生成virtual dom,当虚拟DOM节点数据变化时会生成一个新的vnode,然后vnode和oldVnode作对比,如果有不一样的地方就直接修改在真实的dom上,然后将oldVnode更新为vnode,diff的过程就是调用patch(打补丁)函数,比较新旧节点,一边比较一边给真实的DOM打补丁虚拟DOM和真实DOM都是什么样的?<div> <span>我是真实DOM<</span>..原创 2020-07-28 16:56:00 · 1375 阅读 · 1 评论 -
vue双向绑定的简化代码原理
为了能够快速读懂代码,首先要先弄明白以下三个概念:1、观察者(observer):也就是数据监听器,负责数据对象的所有属性进行监听劫持,并将消息发送给订阅者进行数据更新2、订阅者(watcher):负责接收数据的变化,更新视图(view),数据与订阅者是一对多的关系。3、解析器(compile):负责对你的每个节点元素指令进行扫描和解析,负责相关指令的数据初始化及创造订阅者<!DOCTYPE html><html lang="en"><head>原创 2020-07-14 16:51:45 · 177 阅读 · 0 评论 -
一般人都不知道vue技术点
const MockComponent = { render(){ return this.$slots.default; }, data(){ return { status:'', }; }, watch:{ status:{ handler(newVal){ console.log('Status update:'+ne原创 2020-07-13 21:49:46 · 152 阅读 · 0 评论 -
vw的移动端适配方案
前言:先来跟大家科普一个单位:vw(视宽),即当前窗口的可视宽度1.假设我们的设计稿宽度为375px,这时候按照设计稿我们的页面视宽其实就是100vw即整个页面宽度375px/100vw = 1px/? vw即:1px相当于{ 1 / (375/100) } vw...原创 2020-07-06 22:21:06 · 1900 阅读 · 0 评论 -
vue的$bus传递参数遇到的问题
我们都知道在vue中非兄弟组件传参可以使用$bus来进行1.在组件A中:this.$Bus.$emit('test', '1111')2.在A组件的兄弟组件B组件Mounted中:this.$Bus.$on('test', str => { ....})在最近的项目中我遇到了一个问题,A组件发射了一次,但是B组件重新渲染后却接收了两次,这是为什么呢?其实就是类似Js的原生事件绑定,this.Bus.Bus.Bus.on进行了追加绑定而非覆盖,所以每次用之前最好this.$Bus.原创 2020-06-27 15:39:06 · 1444 阅读 · 0 评论 -
vue点点滴滴
const MockComponent = { render(){ return this.$slots.default; }, data(){ return { status:'', }; }, watch:{ status:{ handler(newVal){ console.log('Status update:'+ne原创 2020-06-09 16:55:47 · 187 阅读 · 0 评论 -
个人总结vuex(1)
导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习!咱们知道,vue项目当中的父子组件的交互是单通道传递,父组件通过props向子组件传递参数,而在子组件当中不不能直接修改接收的参数,而是需要通过自定义事件的方式,例如代码示例<!--------...原创 2019-09-06 16:29:07 · 182 阅读 · 0 评论