vue中遇到的坑
1一个是eventHub的坑–重复监听的问题:解决方案监听之前先off掉2路由的坑–不加replace会两个页面来回跳,无法正常的返回父级页面。3 vuejs对data中数组的原生方法进行了封装,所以在改变数组时能够触发视图更新,但是以下两种情况是无法触发视图的更新的:1 通过索引直接修改数组的元素,例如vm.items[0] = {title: 'title'} 2 无法直接修改数组的长度
1 一个是eventHub的坑–重复监听的问题:解决方案监听之前先off掉
2 路由的坑–不加replace会两个页面来回跳,无法正常的返回父级页面。
3 vuejs对data中数组的原生方法进行了封装,所以在改变数组时能够触发视图更新,但是以下两种情况是无法触发视图的更新的:
1 通过索引直接修改数组的元素,例如vm.items[0] = {title: 'title'}
2 无法直接修改数组的长度,例如vm.items.length = 0
解决方案; 对于第一种vue提供了 set方法vm.items. set(0,{title: ‘title’}) 或者 vm.$set(‘items[0]’,{title: ‘title’})
另外一个列表渲染的时候的有一个性能的小技巧: 如果数组中本身自带一个唯一的标识 id 例如
itmes: [
{_id: 1,title: ‘title1’}
{_id: 2,title: ‘title2’}
{_id: 3,title: ‘title3’}
]
在渲染的时候,通过trace-by给数组设定唯一的标识,这样vuejs在渲染过程中会尽量重复原有对象的作用域和dom元素。
- 现在已经升级为:key=’id’ 也就是使用bind
-
4 v-text 参数是string,作用是更新元素的textContent。{{}} 文本插值本身也是做这个事情的,但是v-text的优点在于可以避免未编译前的闪现问题
如果直接使用{{msg}} 在生命周期beforeMount期间,此刻的msg数据尚未编译至{{msg}}中,用户能看到一瞬间的{{msg}} 然后
闪现为 there is a message 而用v-text的话就不会有这个问题
5 v-el 和 v-ref
v-el 指令为dom元素注册了一个索引,使得我们可以直接的访问DOM元素,语法上说可以通过所属实例的$els属性调用。例如
there is a el demovm.$els.demo.innerText // -> there is a el demo
注意,由于HTML是不区分大小写的,在v-el中如果使用了驼峰式的命名,系统会自动转成小写,但是你可以使用中划线-来连接你期望大写的字母
there is a camelcase如果你这样写的话,拿的时候就只能vm.$els.camelcase.innerText: 用小写的方式拿
如果你用中划线
there is a camelcase这样你再拿的时候就会可以方便的使用你喜欢的驼峰式了vm.$els.camelCase.innerText
好了介绍完了 v-el 其实v-ref 跟它是类似的,只不过是v-ref是作用在子组件上的罢了
更多推荐
所有评论(0)