复习Vue10：生命周期简介

最新推荐文章于 2022-09-28 20:53:31 发布

爱发呆的程序员

最新推荐文章于 2022-09-28 20:53:31 发布

阅读量243

点赞数 1

分类专栏：笔记 Vue 文章标签： vue

本文链接：https://blog.csdn.net/tinglis/article/details/114263773

版权

笔记同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

Vue

21 篇文章 0 订阅

订阅专栏

复习Vue10：生命周期简介

每个Vue实例在被创建时都要经历一系列的初始化过程，例如：需要设置数据的监听，编译模板，将实例挂载到DOM上，并且在数据变化是更新DOM等，这些过程统称为Vue实例的生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

下面，我们来看一下这些钩子函数的应用。

通过一个异步获取列表数据的案例，来查看这些生命周期的钩子函数应用。

在这里是通过异步的方式获取用户列表的数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表渲染</title>
    <style>
      .actived {
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p v-if="users.length===0">没有任何用户数据</p>

      <ul v-else>
        <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
        <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
        <!-- index表示数组的索引值，该名字可以随意定义 -->
        <!-- <li
          v-for="(item,index) in users"
          :key="item.id"
          :class="{actived:selectItem===item}"
          @mousemove="selectItem=item"
        >
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li> -->

        <li
          v-for="(item,index) in users"
          :key="item.id"
          :style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}"
          @mousemove="selectItem=item"
        >
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li>
      </ul>
      <p>
        <!-- 总人数：{{users.length+"个"}} -->
        <!-- 总人数：{{total}} 总人数：{{total}} 总人数：{{getTotal()}}
        总人数：{{getTotal()}} -->

        总人数：{{totalCount}}
      </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          selectItem: "",
          num: 100,
          totalCount: 0,
            //指定users默认数据为一个空数组。
          users: [],
        },
        //组件实例已创建时，执行created方法，来调用getUserList方法，发送异步请求获取数据
        //将获取到的数据交个users这个状态数组。
        async created() {
          const users = await this.getUserList();
          this.users = users;
        },
        methods: {
          getTotal: function () {
            console.log("methods");
            return this.users.length + "个";
          },
            //在getUserList方法中，模拟一个异步请求。
          getUserList: function () {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve([
                  {
                    id: 1,
                    name: "张三",
                  },
                  {
                    id: 2,
                    name: "李四",
                  },
                  {
                    id: 3,
                    name: "老王",
                  },
                ]);
              }, 2000);
            });
          },
        },
        watch: {
          users: {
            immediate: true, //立即执行
            handler(newValue, oldValue) {
              this.totalCount = newValue.length + "个人";
            },
          },
        },
        // computed: {
        //   total() {
        //     console.log("aaa");
        //     // 计算属性是有缓存性：如果值没有发生变化，则页面不会重新渲染
        //     // return this.users.length + "个";
        //     let count = 0;
        //     for (let i = 0; i <= this.num; i++) {
        //       count += i;
        //     }
        //     return count;
        //   },
        // },
      });
    </script>
  </body>
</html>

上面的代码，还是对原有的“列表渲染”内容进行更改。

第一：将users的值定义为空数组

第二：第一getUserList方法，在该方法中模拟异步操作，最终返回的是一个promise对象

第三：在created阶段调用getUserList方法来获取数据，将获取到的数据赋值给users这个状态数组，主意这里需要将created需改成async与await的形式。同时还要注意created的执行时机：组件实例已创建是，执行created方法。

现在我们对生命周期有了一个简单的了解，下次我们在继续探讨。

爱发呆的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复习Vue10：生命周期简介

复习Vue10：生命周期简介每个Vue实例在被创建时都要经历一系列的初始化过程，例如：需要设置数据的监听，编译模板，将实例挂载到DOM上，并且在数据变化是更新DOM等，这些过程统称为Vue实例的生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。下面，我们来看一下这些钩子函数的应用。通过一个异步获取列表数据的案例，来查看这些生命周期的钩子函数应用。在这里是通过异步的方式获取用户列表的数据。<!DOCTYPE html><htm
复制链接

扫一扫