1、初始化阶段:创建和挂载
创建(beforeCreate-只会执行一次、created-只会执行一次)——调用methods中的方法,改变data中的数据、做ajax操作、获取computed中的计算属性,主要是用来初始化数据
挂载(beforeMount-只会执行一次、mounted-只会执行一次)——做ajax操作,启动定时器等异步任务,调用queryselector,主要用来向后端发起请求拿到数据以后做一些业务处理,Dom操作
2、更新状态
更新(beforeUpdate、updated)——可以执行依赖于DOM的操作,只要数据变化就会调用(消耗性能),在服务器端渲染期间不被调用
3、销毁vue实例
销毁(beforeDestroy-只会执行一次、destroyed-只会执行一次)——在beforeDestroy可以清除掉组件中的定时器和监听的dom事件;destroyed(在服务器端渲染期间不被调用)之后,所有子实例也会销毁,移除所有事件
那么created和mounted到底有什么区别?通俗来讲就是,created时元素已经创建好了,但是还没有渲染出来,因为模板还没有被渲染成html,所以通过id什么的去查找页面元素是找不到的;
这里还有一个常见的watch,他也是监听变化的,那和update有什么区别或联系?
watch和update的区别
watch
a、仅仅是数据发生改变的时候会侦听到;
b、只是会检测到你写在watch里的那些属性,没写的就不会触发。
updated
a、执行到它的时候时候是数据发生变化且界面更新完毕;
b、不能监听到路由数据(例如网址中的参数);
c、所有的数据发生变化都会调用(消耗性能);
d、每次触发的代码都是同一个。
然后这里还有一个computed也是监听数据变化的
computed
a、监控自己定义的变量,不用在data里面声明;
b、适合多个变量或对象进行处理后返回一个值(结果)。若这多个变量发生只要有一个发生变化,结果都会变化;
c、计算的结果具有缓存,依赖响应式属性变化,响应式属性没有变化,直接从缓存中读取结果;
d、必须用return返回,不要在computed 中对data中的数据进行赋值操作,这会形成一个死循环。
这里是一个漂亮的分割线
【推荐】FFA 2024大会视频回放:Apache Flink 的过去、现在及未来
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步