vue监听用户在页面的浏览时间需在beforeDestroy()里面进行销毁

最新推荐文章于 2024-08-27 16:10:45 发布
最新推荐文章于 2024-08-27 16:10:45 发布
阅读量7.7k 收藏 11
点赞数 3
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47021806/article/details/110222333
版权

无论把这些钩子放到哪个位置，都是按顺序执行
在这里插入图片描述

<template>
  <div class="all">
    <div class="one">
      <h3>生命周期</h3>
      <div>
        <h4>new Vue()</h4>
      </div>
      <div>
        <h4>Init Events&Lifecycle初始化完成之后</h4>
      </div>
      <h4 class="red">钩子beforeCreate</h4>
      <h4 class="blue">生成data() methods:{}</h4>
      <div>
        <h4 class="green">Init injections&reactivity</h4>
      </div>
      <h4 class="red">created</h4>
      <div>
        <h4 class="yellow">Has "el"option</h4>
        <h4 class="yellow">Has "template"option</h4>
      </div>
      <div>
        <h4 class="green">Compile template into render function*</h4>
        <h4>when vm.$mount(el) is called</h4>
        <h4 class="green">Compile el's outerHTML as template *</h4>
      </div>
      <div>
        <h4 class="red">beforeMount</h4>
      </div>
      <div>
        <h4 class="green">Create vm.$el and replace"el"with it</h4>
      </div>
      <h4 class="red">mounted</h4>
      <h4 style="background-color: red">Mounted</h4>
      <h4>when data changes</h4>
      <h4 class="red">beforeUpdate</h4>
      <h4 class="green">Virtual DOM re-render and patch</h4>
      <h4 class="red">updated</h4>
      <h4>when vm.$destroy{} is called</h4>
      <h4 class="red">beforeDestroy</h4>
      <h4 class="green">
        Teardown watchers,child components and event listeners
      </h4>
      <h4 style="background-color: red">Destroyed</h4>
      <h4 class="red">destroyed</h4>
    </div>
    <div class="two">
      <h3 v-if="isShow">{{ SSone }}</h3>
      <h3 v-else>{{ SStwo }}</h3>
      <button @click="destory">销毁</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lifeone",
  beforeCreate() {
    console.log("1beforeCreate()(被执行 )");
  },
  // 需要的数据
  data() {
    return {
      isShow: false,
      SSone: "one",
      SStwo: "two",
    };
  },
  // 需要的函数
  methods: {
    // 调用销毁方法
    destory() {
      this.$destroy();
    },
  },
  created() {
    console.log("2created()(被执行)");
  },
  beforeMount() {
    console.log("3beforeMount()(被执行)");
  },
  mounted() {
    console.log("4mounted() (被执行)");
    // setInterval(()=>{})
    this.intervalID = setInterval(() => {
      // 添加提示
      console.log(
        "一秒,定时期是全局的，需要注意，放置的位置，需要在beforDestroy的时候销毁 "
      );
      this.isShow = !this.isShow;
    }, 1000);
  },
  beforeUpdate() {
    console.log("5beforeUpdate() (被执行)");
  },
  updated() {
    console.log("6updated()(被执行)");
  },
  beforeDestroy() {
    console.log("7beforeDestroy()(被执行)");
    // 清除定时器
    clearInterval(this.intervalID);
  },
  destroyed() {
    console.log("8destroyed()(被执行)");
  },
};
</script>

<style scoped>
.all {
  width: 800px;
  display: flex;
}
.one {
  width: 500px;
}
.two {
  width: 100px;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: greenyellow;
}
.yellow {
  color: yellow;
}
</style>

<template>
  <div class="all">
    <div class="one">
      <h3>生命周期添加了计时器</h3>
      <div>
        <h4>new Vue()</h4>
      </div>
      <div>
        <h4>Init Events&Lifecycle初始化完成之后</h4>
      </div>
      <h4 class="red">钩子beforeCreate</h4>
      <h4 class="blue">生成data() methods:{}</h4>
      <div>
        <h4 class="green">Init injections&reactivity</h4>
      </div>
      <h4 class="red">created</h4>
      <div>
        <h4 class="yellow">Has "el"option</h4>
        <h4 class="yellow">Has "template"option</h4>
      </div>
      <div>
        <h4 class="green">Compile template into render function*</h4>
        <h4>when vm.$mount(el) is called</h4>
        <h4 class="green">Compile el's outerHTML as template *</h4>
      </div>
      <div>
        <h4 class="red">beforeMount</h4>
      </div>
      <div>
        <h4 class="green">Create vm.$el and replace"el"with it</h4>
      </div>
      <h4 class="red">mounted</h4>
      <h4 style="background-color: red">Mounted</h4>
      <h4>when data changes</h4>
      <h4 class="red">beforeUpdate</h4>
      <h4 class="green">Virtual DOM re-render and patch</h4>
      <h4 class="red">updated</h4>
      <h4>when vm.$destroy{} is called</h4>
      <h4 class="red">beforeDestroy</h4>
      <h4 class="green">
        Teardown watchers,child components and event listeners
      </h4>
      <h4 style="background-color: red">Destroyed</h4>
      <h4 class="red">destroyed</h4>
    </div>
    <div class="two">
      <h3 v-if="isShow">{{ SSone }}</h3>
      <h3 v-else>{{ SStwo }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lifeone",
  beforeCreate() {
    console.log("1beforeCreate()(被执行 )");
  },
  // 需要的数据
  data() {
    return {
      isShow: false,
      SSone: "one",
      SStwo: "two",
    };
  },
  // 需要的函数
  methods: {},
  created() {
    console.log("2created()(被执行)");
  },
  beforeMount() {
    console.log("3beforeMount()(被执行)");
  },
  mounted() {
    console.log("4mounted() (被执行)");
    // setInterval(()=>{})
    setInterval(() => {
      // 添加提示
      console.log("一秒");
      this.isShow = !this.isShow;
    }, 1000);
  },
  beforeUpdate() {
    console.log("5beforeUpdate() (被执行)");
  },
  updated() {
    console.log("6updated()(被执行)");
  },
  beforeDestroy() {
    console.log("7beforeDestroy()(被执行)");
  },
  destroyed() {
    console.log("8destroyed()(被执行)");
  },
};
</script>

<style scoped>
.all {
  width: 800px;
  display: flex;
}
.one {
  width: 500px;
}
.two {
  width: 100px;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: greenyellow;
}
.yellow {
  color: yellow;
}
</style>

<template>
  <div class="all">
    <div class="one">
      <h3>生命周期</h3>
      <div>
        <h4>new Vue()</h4>
      </div>
      <div>
        <h4>Init Events&Lifecycle初始化完成之后</h4>
      </div>
      <h4 class="red">钩子beforeCreate</h4>
      <h4 class="blue">生成data() methods:{}</h4>
      <div>
        <h4 class="green">Init injections&reactivity</h4>
      </div>
      <h4 class="red">created</h4>
      <div>
        <h4 class="yellow">Has "el"option</h4>
        <h4 class="yellow">Has "template"option</h4>
      </div>
      <div>
        <h4 class="green">Compile template into render function*</h4>
        <h4>when vm.$mount(el) is called</h4>
        <h4 class="green">Compile el's outerHTML as template *</h4>
      </div>
      <div>
        <h4 class="red">beforeMount</h4>
      </div>
      <div>
        <h4 class="green">Create vm.$el and replace"el"with it</h4>
      </div>
      <h4 class="red">mounted</h4>
      <h4 style="background-color: red">Mounted</h4>
      <h4>when data changes</h4>
      <h4 class="red">beforeUpdate</h4>
      <h4 class="green">Virtual DOM re-render and patch</h4>
      <h4 class="red">updated</h4>
      <h4>when vm.$destroy{} is called</h4>
      <h4 class="red">beforeDestroy</h4>
      <h4 class="green">
        Teardown watchers,child components and event listeners
      </h4>
      <h4 style="background-color: red">Destroyed</h4>
      <h4 class="red">destroyed</h4>
    </div>
    <div class="two">
      <h3 v-if="isShow">{{ SSone }}</h3>
      <h3 v-else>{{ SStwo }}</h3>
      <button @click="destory">销毁</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lifeone",
  beforeCreate() {
    console.log("1beforeCreate()(被执行 )");
  },
  // 需要的数据
  data() {
    return {
      isShow: false,
      SSone: "one",
      SStwo: "two",
    };
  },
  // 需要的函数
  methods: {
    // 调用销毁方法
    destory(){
      this.$destroy();
    }
  },
  created() {
    console.log("2created()(被执行)");
  },
  beforeMount() {
    console.log("3beforeMount()(被执行)");
  },
  mounted() {
    console.log("4mounted() (被执行)");
    // setInterval(()=>{})
    setInterval(() => {
      // 添加提示
      console.log("一秒,定时期是全局的，需要注意，放置的位置");
      this.isShow = !this.isShow;
    }, 1000);
  },
  beforeUpdate() {
    console.log("5beforeUpdate() (被执行)");
  },
  updated() {
    console.log("6updated()(被执行)");
  },
  beforeDestroy() {
    console.log("7beforeDestroy()(被执行)");
  },
  destroyed() {
    console.log("8destroyed()(被执行)");
  },
};
</script>

<style scoped>
.all {
  width: 800px;
  display: flex;
}
.one {
  width: 500px;
}
.two {
  width: 100px;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: greenyellow;
}
.yellow {
  color: yellow;
}
</style>

<template>
  <div class="all">
    <div class="one">
      <h3>生命周期未添加计时器，只生成1234</h3>
      <div>
        <h4>new Vue()</h4>
      </div>
      <div>
        <h4>Init Events&Lifecycle初始化完成之后</h4>
      </div>
      <h4 class="red">钩子beforeCreate</h4>
      <h4 class="blue">生成data() methods:{}</h4>
      <div>
        <h4 class="green">Init injections&reactivity</h4>
      </div>
      <h4 class="red">created</h4>
      <div>
        <h4 class="yellow">Has "el"option</h4>
        <h4 class="yellow">Has "template"option</h4>
      </div>
      <div>
        <h4 class="green">Compile template into render function*</h4>
        <h4>when vm.$mount(el) is called</h4>
        <h4 class="green">Compile el's outerHTML as template *</h4>
      </div>
      <div>
        <h4 class="red">beforeMount</h4>
      </div>
      <div>
        <h4 class="green">Create vm.$el and replace"el"with it</h4>
      </div>
      <h4 class="red">mounted</h4>
      <h4 style="background-color: red">Mounted</h4>
      <h4>when data changes</h4>
      <h4 class="red">beforeUpdate</h4>
      <h4 class="green">Virtual DOM re-render and patch</h4>
      <h4 class="red">updated</h4>
      <h4>when vm.$destroy{} is called</h4>
      <h4 class="red">beforeDestroy</h4>
      <h4 class="green">
        Teardown watchers,child components and event listeners
      </h4>
      <h4 style="background-color: red">Destroyed</h4>
      <h4 class="red">destroyed</h4>
    </div>
    <div class="two">
      <h3>1123</h3>
      <h3>2123</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lifeone",
  beforeCreate() {
    console.log("1");
  },
  // 需要的数据
  data() {
    return {};
  },
  // 需要的函数
  methods: {},
  created() {
    console.log("2");
  },
  beforeMount() {
    console.log("3");
  },
  mounted() {
    console.log("4");
  },
  beforeUpdate() {
    console.log("5");
  },
  updated() {
    console.log("6");
  },
  beforeDestroy() {
    console.log("7");
  },
  destroyed() {
    console.log("8");
  },
};
</script>

<style scoped>
.all {
  width: 800px;
  display: flex;
}
.one {
  width: 500px;
}
.two {
  width: 100px;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: greenyellow;
}
.yellow {
  color: yellow;
}
</style>

在这里插入图片描述

LuiChun
关注
专栏目录
beforeDestroy与destroyed的使用
seimeii的博客
07-29 2816
beforeDestroy与destroyed的使用
第四篇、vue组件生命周期 beforeDestroy()和destroyed()
qq_59474517的博客
07-06 2770
vue生命周期，生命周期 beforeDestroy()和destroyed()
Vue高级----hook:beforedestroy
muzidigbig的博客
01-16 1万+
vue中hook的两点使用 1. 在同一个组件中 例如：在mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现，这时候绿巨人hook就该登场了 mounted () { window.addEventListener('online', this.handleOnline) this.$once('hook:beforeDestroy', function () { window.removeEvent
vue 怎么判断长时间没操作
myy2012的专栏
07-05 277
【代码】vue 怎么判断长时间没操作。
vue 生命周期4 销毁流程 beforeDestroy destroyed
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
vue中beforeDestroy生命周期钩子
servepeople的博客
08-27 726
组件销毁：组件在被 Vue 销毁之前会调用钩子，在这时你可以执行清理操作。切换页面：在 Vue 单页应用中切换路由时，旧页面的组件会被销毁，此时钩子会被调用。保证：在正常的 Vue 销毁流程中，一定会被调用，但在某些特殊情况下（如关闭浏览器）不能完全保证。a.了解destroyed钩子与的区别和用途。b.了解 Vue 3 中的和生命周期钩子。
vue在App.vue文件中监听路由变化刷新页面操作
10-14
在Vue实例的生命周期中，beforeDestroy钩子会在实例销毁之前被调用，在这里可以执行一些清理工作，比如移除事件监听器。在destroyed钩子中则会执行实例完全销毁后的逻辑，可以用来做最后的收尾工作。 最后，文章中...
Vue监听页面刷新和关闭功能
10-16
在Vue组件中，`beforeDestroy`生命周期钩子可以用来在组件销毁前执行某些操作。不过，它无法监听到页面刷新或关闭标签页的情况。为此，我们需要结合JavaScript的`window.onbeforeunload`事件来处理。 `window....
vue监听 vue实时监听窗⼝滚动条
07-05
在Vue应用中，有时我们需要监听窗口的滚动事件，以便根据用户的滚动行为执行特定的操作，比如加载更多数据或改变页面元素的状态。下面将详细介绍如何在Vue中实现窗口滚动条的实时监听。 1. **监听滚动事件** 在Vue...
vue 组件销毁并重置的实现
10-15
Vue提供了几种方式来控制组件的销毁与重置，最直接的方式是使用`vm.$destroy()`方法，这会触发Vue实例的`beforeDestroy`和`destroyed`钩子函数，使得开发者可以在这个过程中进行一些清理工作。 但是，仅仅销毁组件...
Vue高级-hook:beforeDestroy
weixin_42232325的博客
01-21 1035
vue中hook的两点使用 在同一个组件中 场景：在mounted中添加一个监听，需要在beforeDistroy中移除这个监听，如果不想再写个beforeDistroy去实现，可以使用hook mounted() { window.addEventListener('online', this.handleOnline); this.$once('hook:beforeDestroy', function() { window.removeEventListener('
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 生命周期 beforeDestroy 调用
热门推荐
cppp1111的博客
03-22 2万+
vue 生命周期 beforeDestroy 调用1. 离开当前路由，会直接调用2.离开当前路由，不会直接调用，需要程序控制调用；3.``应用于全局事件`` 1. 离开当前路由，会直接调用 当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 2.离开当前路由，不会直接调用，需要程序控制调用； 当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用 beforeR
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）（2022/7/17）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
07-17 2722
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）
监听用户在页面停留的时长 / 监听多个页面时长
Flowerspleased的博客
05-05 1428
1.监听用户在页面停留的时长 2.如果要监听多个页面的时间，并且返回上一页累加上次浏览的时间功能 //记录阅读任务阅读列表 recordTaskList() { this.quit_time = 0; let _this = this; let time = this.read_time; let id = Number(this.article_id); // 清空计时 this.read_time = 0; //判断是否.
beforeDestroy
BLOG域名:programb.blog.csdn.net
04-18 754
beforeDestroy Type: Function Details: Called right before a Vue instance is destroyed. At this stage the instance is still fully functional. This hook is not called during server-side rendering. S...
学习记录684@vue 统计用户页面停留时间
教练我想学编程
11-29 1141
想要统计用户在页面停留的真实时间，进入页面开始计时，切出本页面后完毕，另外需要注意关闭浏览器网页窗口或者关闭整个浏览器也要停止计时。
vue清除cookies
cjxIt的博客
06-25 461
【代码】vue清除cookies。
vue项目浏览量，停留时长统计——利用定时器
m0_59951344的博客
09-07 1226
停留时长
vue 如何在组件内监听页面刷新事件
最新发布
09-15
在Vue中，如果你想在组件内监听整个页面的刷新事件，而不是某个DOM元素的刷新事件，你需要使用Web API提供的`beforeunload`和`unload`事件。`beforeunload`事件在窗口、文档或其资源即将卸载时触发，而`unload`事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值