Vue 生命周期篇探索 - 第一篇引出生命周期

一平米

已于 2022-07-17 08:45:54 修改

阅读量131

点赞数

分类专栏： vue 文章标签： vue.js java 前端

于 2022-07-17 01:31:32 首次发布

本文链接：https://blog.csdn.net/pymxb1991/article/details/125826781

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

探索学习 Vue 生命周期篇
- 第一篇：引出生命周期

探索学习 Vue 生命周期篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第一篇：引出生命周期

1. 需求：以页面文字透明度减小问题引出mounted

页面编写的文件，每隔一段时间，透明度减小一些(注意不需要用户任何操作)

1.1. 解法1 可以使用全局定时器来实现

直接上代码，利用定时器实现定时修改透明度

 <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <h2>动态绑定样式 简写写法 Css 属性名 数据变量名 重名 用对象的简写形式  -</h2>
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
     const vm = new Vue({
        el: "#root",
        data: {
           name: "安锐捷",
           tmd: 1,
           opacity: 1 ,// 透明度 解法1变量
        },
	});
       setInterval(() => {
         vm.opacity -= 0.01
         if(vm.opacity < 0){ // 透明度<0 重新初始化1
             vm.opacity = 1
         }
       }, 16);
  </script>

细节引处有一个小细节

    <!--动态绑定样式 原始写法-->
    <h2>动态绑定样式 原始写法</h2>
    <h2 :style="{opacity:tmd}">欢迎学习Vue</h2>

    <!--动态绑定样式 简写写法-->
    <h2>动态绑定样式 简写写法 Css 属性名 数据变量名 重名 用对象的简写形式  -</h2>
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <hr/>

1.2. 解法2 探索是否可以通过调用method加定时器来实现

通过method 加定时器的方法是否可以实现，直接上代码验证

  <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <h2>解决办法2：定义局部的定时器，是否可以通过 调用method：change 来改变 opacity的值 </h2>
        <h2 :style="{opacity: opacFlag}">欢迎学习Vue {{change()}}</h2>
  </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
     const vm = new Vue({
        el: "#root",
        data: {
           name: "安锐捷",
           opacFlag: 1, // 解法2 变量
        },
        methods: {
            change(){
                console.log("开启一个定时器");
                 setInterval(() => {
                     this.opacFlag -= 0.01
                     if(this.opacFlag < 0){
                         this.opacFlag = 1
                     }
                 }, 16);
            },
        },
      })

  </script>

打开F12 观察发现定时器一直被调用，频率特别高：这是什么原因呢？
- 原因分析
1. vue 渲染页面解析模板，开始执行change() 方法
2. change() 定时器改变opacFlag 的值后，触发getter/setter 方法渲染页面，**change()**方法又被渲染调用，**change()**方法被调用的同时，又一个定时器开开启，周而复始
3. change() 周而复始的同时，每隔16ms 还会去改变opacFlag 的值后，也会触发getter/setter，同样又会重新解析页面，触发**change()**方法
4. 导致的结果就是指数大爆炸
5. 最终结果就是：1、作为事件主动去掉不满足条件，2、作为插值表达式调用会导致指数大爆炸
  执行流程图如下
所以说解法2 ，这种使用 methods 方法调用的方式是有问题的，不可以如此操作

1.3. 解法3 引出Vue 挂载函数 mounted

Vue 中有一个moutend ，mounted 执行时机：Vue 完成模板的解析，并把初始的真实DOM元素放入页面后(挂载完毕)调用
当前的需求mounted 正好满足
直接上代码，观察效果

   <div id="root">
         <h1>你好,{{name}}</h1>
         <hr/>
         
         <h2>解决办法3：Vue 挂载函数 mounted </h2>
         <h2 :style="{opacity: opacMouFlag}">欢迎学习Vue </h2>
     </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: "#root",
            data: {
            name: "安锐捷",
            opacMouFlag: 1 // 解法3 变量
            },
            // Vue 完成模板的解析，并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
            mounted() {
                console.log("mounted:",this);
                setInterval(() => {
                    this.opacMouFlag -= 0.01
                    if(this.opacMouFlag < 0){
                        this.opacMouFlag = 1
                    }
                }, 16);
            },
        })
    </script>