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

无论把这些钩子放到哪个位置，都是按顺序执行

<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>

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

监听用户在页面停留的时长 / 监听多个页面时长
1.监听用户在页面停留的时长 2.如果要监听多个页面的时间,并且返回上一页累加上次浏览的时间功能 //记录阅读任务阅读列表recordTaskList() {this.quit_time = 0;le ...
vue监听用户点击区域
<template><div><div><h3>事件</h3><div>&l ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
vue监听路由的变化，跳转到同一个页面时，Url改变但视图未重新加载问题
vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题解决方法: 添加路由监听,路由改变时执行监听方法 methods:{fetchData(){console.log('路由发送 ...
vue监听页面滚动事件
方法:监听滚动实现通过addEventListener方式监听通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...
Vue跨路由触发事件，Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
微信被指监听用户，腾讯回应；谷歌意外推送 Android 11 Beta 更新；Linux 5.7 发布 | 极客头条...
整理 | 屠敏头图 | CSDN 下载自视觉中国快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客 ...

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

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

最新文章

热门文章