vue中遇到的坑

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