vuejs小技巧分享一 key 与自定义指令

一： vuejs 中 :key 唯一标识的使用。

在封装公共组件的使用多使用 key ，避免数据错位，还可以直接刷新 vnode ，生成新的 虚拟dom节点

key 的用法：为了在diff算法执行时更快的找到对应的节点，提高diff速度，但是这个含有争议。

key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

1：在组件列表中使用:key   用作组件数据的刷新，改变 Vnode

 

 

 

 

 

二: vuejs   组件中使用 key 是  前后两个dom 元素生命周期的生成与销毁

 

 

 

 

 

三：vuejs 中自定义指令的使用 
自定义指令就像一个迷你的函数，把你自定义的功能塞进这个迷你函数里，在页面上快速的调用，增加用户体验。

创建 自定义指令：

 

 

使用自定义指令:

 

 详解：

- 自定义指令有五个生命周期（也叫钩子函数），分别是 bind, inserted, update, componentUpdated, unbind

1、bind只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次初始化动作

2、inserted被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）

3、update：被绑定于元素所在得到模板更新时调用，而无论绑定值是否变化，通过比较更新前后的绑定值，可以忽略不必要的模板更新

4、componentUpdated：被绑定元素所在模板完成一次更新周期时调用

5、unbind只调用一次，指令与元素解绑时调用

 

四：vuejs 中别名的使用

一般在 webpack.base.conf 文件中配置别名

例如：配置一个 @别名

 

 使用实列：

 

 

 

8：vuejs 注册自定义全局组件及使用方式