vue 生命周期1 生命周期的概念和mounted函数

要点：

 

实现一个小案例：

有一段文字,一开始透明度为1随着时间变化慢慢变成0然后又变成1 如此往复

 这边进行一个style绑定

但这边,其中的透明值和属性名重名所以可以简写

对象的简写形式,:style=“xxx”  xxx为js代码

 

这么写js判断很危险,因为js中0.1+0.2不等于0.3 

说不定可能不会减到0会直接到负数,所以要这么写

但是虽然这么写实现了案例要求,但是在代码层面,不够完善最好关于vue实例的都写入vue实例中

如果这样写的话

会一直循环开定时器,因为第一次定时器中改变了opacity,当data里的数据被改变时,vue就会重新解析模板,导致再次生成一个定时器,如此循环,不止。

 

 

 

 

 

所以这边在methods里写一个回调函数,但是只能当被点击时调用,不符合我们的要求,需要一开始就字体透明度进行循环变化

第二 我们通过一个插值语法进行调用,也发现不对,因为每次改值都会引起模板的重新解析,再次生成一个定时器

所以用我们之前学的没办法实现,但是如果我们能改变vue

因为vue收集信息生成虚拟dom再生成真实dom,如果它可以再生成了真实dom之后再去加一个定时就可以解决了

这边就用到了vue中的一个函数mounted即挂载

在生活中挂载（比如把你的衣服套挂在了衣服架上就是挂载）

 在vue中,就是生成了虚拟dom,之后在生成了真实dom,最后把真实dom放入页面,这边的放入就是挂载

所以mounted的调用是在vue完成模板解析并把真实的dom元素放入页面后调用mounted

 

所以mounted在vue实例中只调用一次之后不论data中的值改变引起的模版重新解析,都会在调用了

 验证：

 

 把定时器放入

 

效果实现 

注意：这边是初始真实dom元素放入页面后调用！！！

所以其实vue的生命周期就是函数

只不过这个函数,是在vue的关键时间点上调用的！！！关键的时刻调用关键的函数

函数名不能写错,写错了,不会报错,但vue找不到了,也不会进行调用

在mounted时刻有两个函数,后面也有两个函数,这些函数是vue过程中被调用的

把这些函数统一叫做vue的生命周期函数

这些函数是在vue的特殊时间点去调用的 

对于this的指向,vue帮你在使用mounted的时候已经把this的指向,指向了vue了

 

 

 vue的生命周期

 

总结：