189 8069 5689

vue中created和mounted的区别浅析-创新互联

前言

专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!创新互联为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，成都网站设计、成都做网站、外贸网站建设负责任的成都网站制作公司!

关于vue.js中的生命周期，如果不是有特别的需求，一般在项目开发过程中更多的使用created和mounted，
所以在本文中主要讲解created与mounted在开发中的主要使用区别。

关于完整的生命周期，不久会在另一篇文章中做整体的理解，包括activated、destroyed等，不过可能会有点晚，大家可以留意一下

版本信息：

  • 系统:win10
  • Vue:2.5.2
  • webpack:3.6.0
  • npm:6.9.0
  • node:10.15.3

生命周期

完整的生命周期图示为了避免占用板块，这里就不贴出来了，大家可以自行前往vue生命周期查看。

浏览器渲染过程

具体的浏览器渲染过程我会过几天另外写一遍文章，大家可以去我的文章看看。

  • 构建DOM树
  • 构建css规则树,根据执行顺序解析js文件。
  • 构建渲染树Render Tree
  • 渲染树布局layout
  • 渲染树绘制

生命周期中的浏览器渲染

这里是官方文档对生命周期api的解释，大家可以看看

以下为测试vue部分生命函数

beforeCreate(){
 console.log('beforecreate:',document.getElementById('first'))//null
 console.log('data:',this.text);//undefined
 this.sayHello();//error:not a function
},
created(){
 console.log('create:',document.getElementById('first'))//null
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
},
beforeMount(){
 console.log('beforeMount:',document.getElementById('first'))//null
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
},
mounted(){
 console.log('mounted:',document.getElementById('first'))//

 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


本文标题：vue中created和mounted的区别浅析-创新互联
网站URL：http://cdxtjz.com/article/icdie.html

其他资讯