vue git源码地址: https://github.com/vuejs/vue
vue api官方文档:https://cn.vuejs.org/v2/api/
vue 风格指南:https://cn.vuejs.org/v2/style-guide/
vuex 文档:https://vuex.vuejs.org/zh/
vue源码系列-中文社区:https://vue-js.com/learn-vue/reactive/
vue生命周期
beforeCreate——created——beforeMount——mounted——beforeUpdate——updated——beforeDestory——destoryed
beforeCreate
实例初始化之后,数据观测和事件配置之前被调用。
此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。created
实例创建完成之后被调用。
此时实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el对象还没有。beforeMount
挂载开始之前被调用。
相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂载html到页面上。mounted
挂载完成。
此时模板中的虚拟DOM已经渲染到html页面上,替换成真实的DOM。beforeUpdate
数据更改导致的虚拟 DOM 重新渲染和打补丁的情况下,更改之前调用。
虚拟DOM重新渲染补丁之前,可以在此钩子中进一步地更改状态,不会触发附加地重渲染过程。updated
数据更改导致的虚拟 DOM 重新渲染和打补丁的情况下,更改完成调用。
调用时,组件DOM已经更新。beforeDestory
实例销毁之前调用。
此时,实例仍然完全可用。destoryed
实例销毁之后调用。
调用后,所有的事件监听器会被移出,所有的子实例也会被销毁,此钩子在服务器端渲染期间不被调用。
vue 父子组件的生命周期
实例的创建:先创建父组件示例,再创建子组件实例。
渲染:先渲染子组件,再渲染父组件。
创建时候的生命周期顺序:
父beforeCreate —— 父created —— 父beforeMount —— 子beforeCreate —— 子created —— 子beforeMount —— 子mounted —— 父mounted
子组件更新顺序:
父beforeUpdate —— 子beforeUpdate —— 子updated —— 父updated
父组件更新顺序:
父beforeUpdate —— 父updated
销毁的顺序:
父beforeDestroy —— 子beforeDestroy —— 子destroyed —— 父destroyed
v-for 的key的作用及原理
vue可以用v-for
指令基于一个数组来渲染一个列表。实际应用的时候会给每一个项设置一个key,那么这个key是用来做什么的呢?
当 vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"
。
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
所以为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一 key
属性:
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
key
是vue识别节点的一个通用机制
vue中列表循环需加:key="唯一标识"
唯一标识可以是item里面id index等,因为vue组件高度复用,增加Key
可以标识组件的唯一性,更好地区别各个组件 key的作用,主要是为了高效的更新虚拟DOM。
key
的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
它也可以用于强制替换元素/组件而不是重复使用它。