1,了解生命周期
为方便了解,实例初始值如图:
create:创建
如果可以看到创建 created 的方法里,实例对象data 值都加载完成,但是Dom节点并未加载完,所以如果初始获取接口赋值给data的情况下,建议在这个函数里处理。
mount:挂载
如果是Dom元素进行调用,建议放到 mounted 函数的 $nextTick 里
update:更新
value变量更新渲染页面之后触发
destroy:销毁
关闭页面,离开当前路由情况下执行,如果页面有定时器,建议在次进行销毁定时器,否则离开路由情况并未关闭页面的情况下,定时器依旧执行,浪费进程。
2,父组件生命周期顺序如下:
父组件生命周期代码如下:
table-data 子组件生命周期如下:
浏览器打印顺序如下:
有次可见,生命周期顺序为:
父组件 created --> 子组件 created --> 子组件 mounted --> 父组件 mounted
会发现调用顺序不是父组件都调用完成之后再调用子组件,父组件向子组件传值时,如果值返回是异步情况下,有时会导致子组件并未接收到值立马渲染到页面上,此时建议用 watch、computed 来监听值变化。