VUE的生命周期和方法

vue生命周期可以分为八个:

beforeCreate(创建前)

created(创建后)

beforeMount(载入前)

mounted(载入后)

beforeUpdate(更新前)

updated(更新后)

beforeDestroy(销毁前)

destroyed(销毁后)

1,创建前(beforeCreate)

对应的钩子函数为beforeCreate。实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性


2,创建后(created)

对应的钩子函数为created。在这个阶段vue实例已经创建,仍然不能获取DOM元素。


3,载入前(beforeMount)

对应的钩子函数是beforeMount,此时已经完成了模板的编译,但是还没有挂载到页面中


4,载入后(mounted)

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了,一般我们的异步请求都写在这里。此时,已经将编译好的模板,挂载到了页面指定的容器中显示。


5,更新前(beforeUpdate)

对应的钩子函数是beforeUpdate。状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点


6,更新后(updated)

对应的钩子函数是updated。实例更新完毕之后调用此函数, DOM会和更改过的内容同步然后界面重新渲染 。


7,销毁前(beforeDestroy)

对应的钩子函数是beforeDestroy。现在Vue已经成功的通过数据驱动DOM更新,当我们不再需要vue操纵DOM时,
就要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前会触发beforeDestroy钩
子函数。


8,销毁后(destroyed)

对应的钩子函数是destroyed。在销毁后,实例指示的所有东西都会解绑定。

VUE中方法:

methods:
methods 事件方法执行 有一定的触发条件,如click等。
所有方法都应该在methods里定义,在mounted或created里面使用this调用,用这种方法实现初始化。


watch:
监听值变化,执行相对应函数 检测vue实例上数据的变动


时间紧张–持续更新

猜你喜欢

转载自blog.csdn.net/weixin_46071217/article/details/108611055