【12】前端实习：通过使用localStorage方法本地保存数据，并理解vue的生命周期

最新推荐文章于 2024-04-28 10:45:45 发布

BBbila

最新推荐文章于 2024-04-28 10:45:45 发布

阅读量851

点赞数

分类专栏：前端文章标签： vue生命周期 js localStorage

本文链接：https://blog.csdn.net/qq_40610760/article/details/98970769

版权

前端专栏收录该内容

62 篇文章 2 订阅

订阅专栏

vue生命周期：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

这次先观测： beforeCreate created beforeMount mounted

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
  })
</script>
</html>

可以看到：

beforeCreate ：实例中的挂载点，数据项data都未初始化
created ： 挂载点（未），数据项data（已）
beforeMount ： 挂载点（已），数据项data（已），data中的message信息没有被挂在到Bom节点中
mounted ： 挂载点（已），数据项data（已），data中的message信息已经被挂在到Bom节点中

【在todolist例子中，将在页面刷新后，数据不丢失，在beforeMount周期内，初始化数据】

<template>
    <div>
        <div>
          <input v-model="inputValue"/>
          <button @click="handleSubmit">提交</button>
        </div>
        <ul>
        <todoItem 
            v-for="(item,index) of list"
            ::key="index"  
            :content="item" 
            :index ="index"
            @delete = "handleDelete"
        ></todoItem>
        </ul>
    </div>
</template>


<script>
    import todoItem from './components/todoItem.vue'
export default {
    components: {todoItem},
    //以前data是一个对象，现在在vue-cli里应该是一个函数，简写为： data() {}
    data : function() {
        return {
            inputValue: '',
            list: []
        }
    },
    beforeMount() {        
        //localStorage本地保存数据，实现刷新网页数据不会丢失
          const StoList = localStorage.getItem('list');
          if(StoList) {
              const isExist = StoList.length === 0 ? false : true;
              if(isExist) {
                 this.list = StoList.split(",")
              }
          } 
    },
    methods: {
      handleSubmit () {
         this.list.push(this.inputValue)
        // this.list = [...this.list,this.inputValue]
         this.inputValue = ''//让输入框为空
         localStorage.setItem('list', this.list)
      },
      handleDelete (index) {
         this.list.splice(index,1)//从索引位置开始删除，将该索引处的值删除掉就好
         localStorage.setItem('list', this.list)
      }
    }
}
</script>
    
  

<style>

</style>

效果：

刷新后：

BBbila

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【12】前端实习：通过使用localStorage方法本地保存数据，并理解vue的生命周期

vue生命周期：beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed这次先观测： beforeCreate created beforeMount mounted测试代码：<!DOCTYPE html><html...
复制链接

扫一扫