Vue技术细节
![](/img/icons/default_cover.jpg)
Vue技术细节
吴华锦key属性
为了方便Vue
实例跟踪每个节点的身份,从而重用和重新排列现有元素,需要为每项提供一个唯一的key
属性。理想的key
属性值是每项都有并且唯一的id
。key
的工作方式类似于一个属性,所以需要用v-bind
来绑定动态值。
生命周期函数表
生命周期函数 | 含义 |
---|---|
beforeCreate (创建前) |
组件实例刚被创建,组件属性计算之前,比如data 属性等 |
created (创建后) |
组件实例刚创建完成,属性已经绑定,此时DOM 还未完成,$el 属性还不存在 |
beforeMount (载入前) |
模板编译、挂载之前 |
mounted (载入后) |
模板编译、挂载之后 |
beforeUpdate (更新前) |
组件更新之前 |
updated (更新后) |
组件更新之后 |
beforeDestroy (销毁前) |
组件销毁前调用 |
destroyed (销毁后) |
组件销毁后调用 |
单向数据流
在Vue
中通过props
传递数据是单向的,也就是父组件数据会传递给子组件,但是反过来不成立。之所以这样设计,就是尽可能将父子组件解耦,避免子组件无意间修改父组件的状态。
业务中经常遇到两种需要改变props
传递过来数据的情况。一种是父组件传递初始值,子组件将其作为初始值保存起来,在自己的作用域内可以随意使用和修改。这种情况可以在子组件的data
中再声明一个数据来引用父组件传递过来的数据。
另一种情况是props
作为需要被转变的原始值传入,这种情况计算属性就可以了。
子组件向父组件传值
自定义事件及$emit方法
Vue.js
允许正向传值,也就是父组件传值给子组件。正向传值不需要条件触发,是主动的,逆向传值则是不允许的,需要主动抛出自定义事件去监听。
this.$emit("event",val)
$emit
为实例方法,用来触发事件监听。其中,参数event
代表自定义事件名称,参数val
代表通过自定义事件传递的值,注意这里的val
是可选参数。
子组件传值给父组件的时候,事件触发及接收原则是:谁触发的监听谁接收。
兄弟组件通信
兄弟组件间的传值最容易想到的解决方案是通过共同的父组件进行中转。其中一个场景是组件1中的某个数量需要在组件2中同步展示。本质上是props
和$emit
综合使用。
slot分发内容
slot
的官方定义是用于组件内容分发,简单通俗的解释就是在组件化开发中,虽然组件是一样的,但是在不同的使用场景,组件的某一部分需要有不同的内容显示。
匿名slot
匿名slot
就是没有名字的插槽,特点是可以放任何内容。
具名slot
具名slot
可以用一个特殊属性name
来配置如何分发内容,多个slot
可以有不同的名字,具名slot
将匹配内容片段中有对应slot
特性的元素。
计算属性
既然使用methods
就可以实现,为什么还需要计算属性呢?原因就是计算属性是基于它的依赖缓存的,一个计算属性所依赖的数据发生变化,它才会重新取值,所以massage
只要不改变,计算属性就不更新。但是methods
不同,只要重新渲染,它就会被调用,函数就会被执行。
究竟是使用计算属性还是methods
取决于是否需要缓存,当遍历大数组和计算量很大时,应当使用计算属性,除非不希望得到缓存。
侦听器
Vue.js
提供了一种更通用的方式watch
来观察和响应Vue
实例上的数据变动,称为侦听器。
异步更新队列
Vue
在观察到数据变化时并不是直接更新DOM
,而是开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM
操作。然后在下一个事件循环tick
中,Vue
刷新队列并执行实际(已去重的)工作。
$nextTick
就是用来知道什么时候DOM
更新完成的。
自定义指令
自定义指令的选项是由几个钩子函数组成的,每个都是可选的。
bind
:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted
:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document
中)。update
:被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。componentUpdated
:被绑定元素所在模板完成一次更新周期时调用。unbind
:只调用一次,指令与元素解绑时调用。