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中的数据进行赋值操作,这会形成一个死循环。

 

这里是一个漂亮的分割线