Vue2中的生命周期函数和数组变异方法

生命周期

事物从出生到死亡的过程
Vue实例从创建 到销毁的过程 ,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

beforeCreate

在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了

created

在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来

beforeMount

在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已

mounted

el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件

beforeUpdate

数据更新时调用,发生在虚拟DOM打补丁之前。 页面上数据还是旧的

updated

由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。 页面上数据已经替换成最新的

beforeDestroy

实例销毁之前调用

destroyed

实例销毁后调用

数组变异方法

在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()

往数组最后面添加一个元素,成功返回当前数组的长度

pop()

删除数组的最后一个元素,成功返回删除元素的值

shift()

删除数组的第一个元素,成功返回删除元素的值

unshift()

往数组最前面添加一个元素,成功返回当前数组的长度

splice()

有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值

sort()

sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse()

reverse() 将数组倒序,成功返回倒序后的数组

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容