Vue
afetmin
这个作者很懒,什么都没留下…
展开
-
vue的响应式原理
通过 observe 将数据变成响应式,在 _render 渲染页面时,会获取所有被渲染所依赖的 data 数据,这时就走到了数据的 getter 方法,这里将 Dep.target,也就是当前的渲染 watcher 放到 Dep 的 subs 数组里,这样就完成了数据的依赖收集过程。当数据发生变化时,setter 里 dep.notify 通知这个数据的所有 watcher.update() 。在 update 中,先吧所有的 watcher 放到队列中,并在 nextTick 时,异步更新所有数据。原创 2021-01-07 12:06:39 · 115 阅读 · 0 评论 -
使用better-scroll时滑不动?看看是不是这个问题
首先看wrapperHeight的高度和内容的高度是什么? 要满足 内容高度大于容器高度。 hasVerticalScroll为true。 scrollerHeight的高度要等于 wrapperHeight-contentHeight。 一般是没有设置容器的高度或这内容高度不够。 如果 内容高度大于容器高度,但是 hasVerticalScroll为false。 scrollerHeight高度等于了wrapperHeight的高度。 如果数据是异步获取的,这时应该把数据传给 scroll组件,原创 2020-12-11 18:48:33 · 861 阅读 · 0 评论 -
vue使用中的细节点
v-if 当在input框中使用v-if时,如果输入了字符后,改变v-if的显示时,input中的内容不会变化,这是因为vue会尽量复用页面的内容,增加渲染效率,这时可以为每个input增加一个key值,这样vue发现key值不同便不会复用了。 v-for 使用v-for时,如果不想在外层添加一个div标签,可以使用template作为模版占位符,这个不会在页面中渲染。 $set 向对象增加属性值时,一种方法是整个改变对象的引用,另一种是通过vue实例.$set(对象,新属性名,新属性值)或Vue.set(原创 2020-12-05 10:38:20 · 343 阅读 · 0 评论 -
关于v-show和v-if遇到better-scroll出现错误的解决
v-show和v-if 今天在写一个项目时,遇到了一个问题。使用了 better-scroll 来做页面滚动,首页进入后可以滚动,但是点击搜索框后出现搜索记录却无法滚动。查看 scroll 的打印发现 hasVerticalScroll: false,并且 scrollerHeight 和 clientHeight 都是 0,那就是都没有获得高度。最后把 v-show 改成 v-if 就可以了。 问题出现原因: 众所周知,v-show渲染了dom,只是把dom的style设置为:display:none ,原创 2020-12-05 10:27:22 · 565 阅读 · 2 评论 -
当better-scroll遇到vue
使用better-scroll遇到的问题 原来项目中只使用了better-scroll来做轮播图和滑动组件,但是头部和标签栏是固定的,只滑动下面部分,于是设置 scroll-warpper样式如下: .scroll-wrapper { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; } 但是想要实现下部组件与上部标签的联动,仅仅靠better-scroll就不够了,于是项目中按需引入了vant的的标签组件,来实现原创 2020-12-05 10:12:08 · 91 阅读 · 0 评论