vue中遇到的坑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/coffee3139564344/article/details/74779585

1 一个是eventHub的坑–重复监听的问题:解决方案监听之前先off掉

2 路由的坑–不加replace会两个页面来回跳,无法正常的返回父级页面。

3 vuejs对data中数组的原生方法进行了封装,所以在改变数组时能够触发视图更新,但是以下两种情况是无法触发视图的更新的:

1 通过索引直接修改数组的元素,例如vm.items[0] = {title: 'title'}

 2 无法直接修改数组的长度,例如vm.items.length = 0

解决方案; 对于第一种vue提供了setvm.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 demo

    vm.$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是作用在子组件上的罢了

    没有更多推荐了,返回首页