vue_实例_组件的生命周期
重绘重排 中重复出现的是
mounted(){...}
beforeUpdate(){...}
uptated(){...}
其他钩子函数只会出现一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>viewModel 的生命周期</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div id="test">
<button type="button" @click="destroyVue">卸载 viewModel</button>
<p v-show="isShow">生当作人杰，死亦为鬼雄。</p>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#test",
data:{
isShow: true
},
methods:{
destroyVue(){
this.$destroy();
}
},
mounted(){ // 初始显示之后立即执行: 执行异步任务
this.timerId = window.setInterval(()=>{
console.log("27 ---- mounted");
this.isShow = !this.isShow
}, 1000)
},
beforeDestroy(){
console.log("32 ---- beforeDestroy");
window.clearInterval(this.timerId)
},
/****************************************************************************/
beforeCreate(){
console.log("36 beforeCreate")
},
created(){
console.log("40 createdcreated")
},
beforeMount(){
console.log("42 beforeMount")
},
beforeUpdate(){
console.log("46 beforeUpdate")
},
updated(){
console.log("49 updated")
},
destroyed(){
console.log("52 destoryed")
}
})
</script>
</body>
</html>
vue_实例_组件的生命周期的更多相关文章
- ReactJS入门（二）—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- react.js 从零开始（二）组件的生命周期
什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...
- react 组件的生命周期
组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...
- ReactJS入门3:组件的生命周期
本文主要介绍组件的生命周期. 组建的生命周期主要分为3个:Mounting.Updating.Unmounting. 1. Mounting:组件被加载到DOM 在本阶段,主要有三个方法: 1 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- Autofac容器对象实例的几种生命周期类型
实例范围决定了如何在同一服务的请求之间共享实例. 请注意,您应该熟悉生命周期范围的概念,以便更好地理解此处发生的情况. 当请求服务时,Autofac可以返回单个实例(单实例作用域),新实例(每个依赖作 ...
- React：组件的生命周期
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...
随机推荐
- SpringBoot系列: 单元测试2
之前发了SpringBoot 单元测试的博客, https://www.cnblogs.com/harrychinese/p/springboot_unittesting.html , 内容较少, 现 ...
- [再寄小读者之数学篇](2015-06-24 Series)
(AMM. Problems and Solutions. 2015. 03) Let $\sed{a_n}$ be a monotone decreasing sequence of real nu ...
- 在Spring框架中bean配置文件中constructor-arg标签中没有name元素?
bean配置文件出现错误的依赖: <beans <beans xmlns="http://www.springframework.org/schema/beans" ...
- 第30月第6天 git log
1. git log git log 96a6f18b1e0a1b7301cb4f350537d947afeb22bc -p -1 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最 ...
- @ReponseBody返回的json中文乱码-遁地龙卷风
我在mvc配置文件中加上下面这个配置就好了 <mvc:annotation-driven></mvc:annotation-driven>,需要在开头引用如下命名空间xmlns ...
- Win10上默认VS 2017以管理员身份运行
Win10上的UAC虽然是个好东西,但是对于使用开发工作的技术人员来说有时候也挺麻烦.这里有一个让VS2017无论如何都以管理员身份运行的方法. 1.进入VS2017的安装目录:..\Microsof ...
- Mysql --创建用户和授权,备份
权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建一个 ...
- vue脚手架安装步骤vue-cli
1.环境搭建 安装node.js: 从node.js官网下载并安装node,安装过程很简单. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3 ...
- 七天开发进度（六）（微信小程序版（一））
1. 今天主要根据网上教程学习了微信小程序的代码结构,和代码编写-Tabbar配置, 学习了app.js的App和Page方法, 认识了view组件,button组件,input组件,但是还没怎么应用 ...
- df -h hang 问题
此处仅截取原文中的解决方案,以便快速查找解决方法. 解决方法如下:1. systemctl restart proc-sys-fs-binfmt_misc.automount; 2. 升级到最新 sy ...