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

最新推荐文章于 2024-07-05 16:39:24 发布
最新推荐文章于 2024-07-05 16:39:24 发布
阅读量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
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
beforeDestroy与destroyed的使用
seimeii的博客
07-29 2749
beforeDestroy与destroyed的使用
第四篇、vue组件生命周期 beforeDestroy()和destroyed()
qq_59474517的博客
07-06 2756
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 227
【代码】vue 怎么判断长时间没操作。
vue 生命周期4 销毁流程 beforeDestroy destroyed
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
Vue高级-hook:beforeDestroy
weixin_42232325的博客
01-21 1031
vue中hook的两点使用 在同一个组件中 场景：在mounted中添加一个监听，需要在beforeDistroy中移除这个监听，如果不想再写个beforeDistroy去实现，可以使用hook mounted() { window.addEventListener('online', this.handleOnline); this.$once('hook:beforeDestroy', function() { window.removeEventListener('
vue在App.vue文件中监听路由变化刷新页面操作
10-14
在Vue实例的生命周期中，beforeDestroy钩子会在实例销毁之前被调用，在这里可以执行一些清理工作，比如移除事件监听器。在destroyed钩子中则会执行实例完全销毁后的逻辑，可以用来做最后的收尾工作。 最后，文章中...
Vue监听页面刷新和关闭功能
12-09
首先，Vue的`beforeDestroy`钩子是在组件销毁之前调用的，适用于处理一些清理工作，如解绑事件监听器。然而，`beforeDestroy`并不适合监听页面刷新和关闭，因为它只会在路由跳转时触发，并不会在页面刷新或关闭时...
vue监听 vue实时监听窗⼝滚动条
07-05
在Vue应用中，有时我们需要监听窗口的滚动事件，以便根据用户的滚动行为执行特定的操作，比如加载更多数据或改变页面元素的状态。下面将详细介绍如何在Vue中实现窗口滚动条的实时监听。 1. **监听滚动事件** 在Vue...
vue 组件销毁并重置的实现
10-15
Vue提供了几种方式来控制组件的销毁与重置，最直接的方式是使用`vm.$destroy()`方法，这会触发Vue实例的`beforeDestroy`和`destroyed`钩子函数，使得开发者可以在这个过程中进行一些清理工作。 但是，仅仅销毁组件...
vue 生命周期 beforeDestroy 调用
热门推荐
cppp1111的博客
03-22 2万+
vue 生命周期 beforeDestroy 调用1. 离开当前路由，会直接调用2.离开当前路由，不会直接调用，需要程序控制调用；3.``应用于全局事件`` 1. 离开当前路由，会直接调用 当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 2.离开当前路由，不会直接调用，需要程序控制调用； 当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用 beforeR
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）（2022/7/17）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
07-17 2584
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）
监听用户在页面停留的时长 / 监听多个页面时长
Flowerspleased的博客
05-05 1421
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 751
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 1092
想要统计用户在页面停留的真实时间，进入页面开始计时，切出本页面后完毕，另外需要注意关闭浏览器网页窗口或者关闭整个浏览器也要停止计时。
vue清除cookies
cjxIt的博客
06-25 329
【代码】vue清除cookies。
vue项目浏览量，停留时长统计——利用定时器
m0_59951344的博客
09-07 1201
停留时长
vue2.0 监听用户无操作页面停留时长然后弹窗提示
郝峰vip的博客
10-11 1437
vue2.0监听用户长时间无操作页面停留时长
vue监听组件销毁事件
02-02
在Vue中，可以通过使用`beforeDestroy`和`destroyed`这两个生命周期钩子函数来监听组件的销毁事件。 1. `beforeDestroy`：在组件销毁之前调用。可以在这个钩子函数中进行一些清理工作，比如取消订阅、清除定时器等。示例代码如下： ```javascript beforeDestroy() { // 在组件销毁之前执行一些清理工作 // 取消订阅、清除定时器等 } ``` 2. `destroyed`：在组件销毁之后调用。可以在这个钩子函数中进行一些善后工作，比如释放资源、解绑事件等。示例代码如下： ```javascript destroyed() { // 在组件销毁之后执行一些善后工作 // 释放资源、解绑事件等 } ``` 这两个钩子函数可以在组件的选项对象中定义，或者通过单文件组件的方式定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值