不许你不懂vue生命周期

文章目录

☀️作者简介：大家好我是言不及行yyds
🐋个人主页：言不及行yyds的CSDN博客
🎁系列专栏：【vue】

vue生命周期

1.引入生命周期

在这，我们提出一个需求，在vue项目中书写一段文字，编写逻辑

让文字显示一出来就逐渐变成透明（改变透明度），给出想法

1.1vue实例外面编写函数

<script type="text/javascript" src="../js/vue.js"></script><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2></div><script type="text/javascript">
        Vue.config.productionTip =false//阻止 vue 在启动时生成生产提示。const vm=newVue({
            el:'#root',
            data:{
                opacity:1},//通过外部的定时器实现（不推荐）setInterval(()=>{
            vm.opacity -=0.01if(vm.opacity <=0) vm.opacity =1},16)</script>

1.2配置methods

const vm=newVue({
        data:{
        opacity:1},
        methods:{change(){setInterval(()=>{
                vm.opacity -=0.01if(vm.opacity <=0) vm.opacity =1},16)}},}
window.onload=()=>{
    vm.change()}

上面的两个方法都一定程度上操作了DOM，不是说不能操作DOM

而是非必要不操作DOM。会使性能降低。

1.3引入生命周期

如果我们把假设vue是我们的兄弟，让他在找到模板，解析模板，

放入页面的某个过程在他完成后能通知我一下，我在这个阶段书写

我的逻辑

//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
data:{}mounted(){
     console.log('mounted',*this*)setInterval(()=>{*this*.opacity -=0.01if(*this*.opacity <=0)*this*.opacity =1},16)},
 与data平级

​ 这把所有的逻辑函数都写在vue实例中，一定程度上提高了性能

2.生命周期

我们可以分成五部分理解

2.1创建时期

• beforeCreate> 在这之前会初始化：生命周期，事件，但是数据代理还没有开始> > 所以在调用beforeCreate时无法通过vm访问到data中的数据以及> > methods中的方法。关于数据代理就是

• create> 在这之前会初始化数据检测，以及数据代理

​ 所以此时调用Create时可以通过vm访问到data中的数据以及

​ methods中的方法

2.2生成虚拟DOM

• 首先会检查vue实例中是否含有el这个配置项(用于知道知道将解析好的结果呈现到那个容器)
• 检查在vue实例中是否有template配置项> 在这里的template配置项可不是在html中的template标签(效果呈现，节点消失

 data:{
   opacity:1,},
 template:`
    <div >
       <h2 v-if="a">你好啊</h2>
       <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>`,

采用ES6的``方法用于结构可换行

注意：template配置项中必须要有一个根标签

这个阶段vue开始解析模板，然后生成虚拟DOM(内存中)，但是这时页面还只是呈现

未解析的内容

2.3挂载

• beforeMount> 在这个阶段页面也还只是呈现未进行vue解析的内容，在> > 这个时候所有对DOM的操作都是无效的(页面不呈现效果)

在beforeMount和mounted中间内存中的虚拟DOM会转化为真实DOM插入页面

• mounted> 页面呈现vue解析的内容，对DOM的操作都是有效的> > 但是还是要避免

在调用这个函数时一般发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.4更新

• beforeUpdate> 这时数据还是新的，但是由于页面尚未与数据保持同步所以> > 页面还只是旧数据在二者之间会进行虚拟DOM算法(diff)对新旧数据进行对比实现数据更新
• updated> 页面尚未与数据保持同步，页面是新数据

2.5销毁

• beforeDestory> 这个时候vue实例中，data，methods，指令等还处于可用状态在这个时候就可以书写需要关闭的东西比如：定时器，订阅消息，自定义事件
• destoryed> 销毁vue实例后> > 1.借助Vue开发者工具看不到任何信息。> > 2.销毁后自定义事件会失效，但原生DOM事件依然有效。> > 3.一般不会在beforeDestroy操作数据，因为即便操作数据，> > ​ 也不会再触发更新流程了。

3总结

• 常用的生命周期钩子：1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

好了这次的文章就到这了
如果觉得还不错的话，帮忙点个关注吧
欢迎大家积极探讨