Vue技术细节

吴华锦2019-08-232023-01-27

key属性

为了方便Vue实例跟踪每个节点的身份，从而重用和重新排列现有元素，需要为每项提供一个唯一的key属性。理想的key属性值是每项都有并且唯一的id。key的工作方式类似于一个属性，所以需要用v-bind来绑定动态值。

生命周期函数	含义
`beforeCreate`（创建前）	组件实例刚被创建，组件属性计算之前，比如`data`属性等
`created`（创建后）	组件实例刚创建完成，属性已经绑定，此时`DOM`还未完成，`$el`属性还不存在
`beforeMount`（载入前）	模板编译、挂载之前
`mounted`（载入后）	模板编译、挂载之后
`beforeUpdate`（更新前）	组件更新之前
`updated`（更新后）	组件更新之后
`beforeDestroy`（销毁前）	组件销毁前调用
`destroyed`（销毁后）	组件销毁后调用

在Vue中通过props传递数据是单向的，也就是父组件数据会传递给子组件，但是反过来不成立。之所以这样设计，就是尽可能将父子组件解耦，避免子组件无意间修改父组件的状态。

业务中经常遇到两种需要改变props传递过来数据的情况。一种是父组件传递初始值，子组件将其作为初始值保存起来，在自己的作用域内可以随意使用和修改。这种情况可以在子组件的data中再声明一个数据来引用父组件传递过来的数据。

另一种情况是props作为需要被转变的原始值传入，这种情况计算属性就可以了。

Vue.js允许正向传值，也就是父组件传值给子组件。正向传值不需要条件触发，是主动的，逆向传值则是不允许的，需要主动抛出自定义事件去监听。

this.$emit("event",val)

$emit为实例方法，用来触发事件监听。其中，参数event代表自定义事件名称，参数val代表通过自定义事件传递的值，注意这里的val是可选参数。

子组件传值给父组件的时候，事件触发及接收原则是：谁触发的监听谁接收。

兄弟组件间的传值最容易想到的解决方案是通过共同的父组件进行中转。其中一个场景是组件1中的某个数量需要在组件2中同步展示。本质上是props和$emit综合使用。

slot的官方定义是用于组件内容分发，简单通俗的解释就是在组件化开发中，虽然组件是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示。

匿名slot就是没有名字的插槽，特点是可以放任何内容。

具名slot可以用一个特殊属性name来配置如何分发内容，多个slot可以有不同的名字，具名slot将匹配内容片段中有对应slot特性的元素。

既然使用methods就可以实现，为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化，它才会重新取值，所以massage只要不改变，计算属性就不更新。但是methods不同，只要重新渲染，它就会被调用，函数就会被执行。

究竟是使用计算属性还是methods取决于是否需要缓存，当遍历大数组和计算量很大时，应当使用计算属性，除非不希望得到缓存。

Vue.js提供了一种更通用的方式watch来观察和响应Vue实例上的数据变动，称为侦听器。

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。

$nextTick就是用来知道什么时候DOM更新完成的。

自定义指令的选项是由几个钩子函数组成的，每个都是可选的。