|
|
@@ -0,0 +1,80 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <button @click="fn()">+1</button>
|
|
|
+ <button @click="des()">销毁</button>
|
|
|
+ <h2 id="myCount">{{count}}</h2>
|
|
|
+ </div>
|
|
|
+ <script src="vue.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el:'#app',
|
|
|
+ data:{
|
|
|
+ count: 1
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ fn(){
|
|
|
+ this.count++
|
|
|
+ },
|
|
|
+ des(){
|
|
|
+ this.$destroy()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //组件实例刚刚创建的时候 属性计算之前
|
|
|
+ beforeCreate(){
|
|
|
+ console.log('beforeCreate',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ //组件实例刚刚创建完成，属性绑定了，dom未生成，el不存在
|
|
|
+ created(){
|
|
|
+ console.log('created',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ //挂载之前
|
|
|
+ beforeMount(){
|
|
|
+ console.log('beforeMount',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ //挂载之后
|
|
|
+ mounted(){
|
|
|
+ console.log('mounted',this.$data,this.$el)
|
|
|
+ this.timer = setInterval(()=>{
|
|
|
+ console.log(Math.random())
|
|
|
+ this.count++
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
+ //更新之前
|
|
|
+ beforeUpdate(){
|
|
|
+ console.log('beforeUpdate',document.getElementById('myCount').innerHTML)
|
|
|
+ },
|
|
|
+ //更新之后
|
|
|
+ updated(){
|
|
|
+ console.log('updated',document.getElementById('myCount').innerHTML)
|
|
|
+ },
|
|
|
+ //销毁前
|
|
|
+ beforeDestroy(){
|
|
|
+ console.log('beforeDestroy')
|
|
|
+ clearInterval(this.timer)
|
|
|
+ },
|
|
|
+ //销毁后
|
|
|
+ destroyed(){
|
|
|
+ console.log('destroyed')
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ beforeCreate: 在实例初始化之后，数据和event/watcher事件配置之前去调用
|
|
|
+ created： 在实例创建完成后立即被调用，这个阶段可以访问到实例的数据和方法，但是没有挂载到dom上
|
|
|
+ beforeMount：在挂载开始前被调用，在这个阶段，模板的编译已经完成，但是还是没有将组件挂载到Dom上
|
|
|
+ mounted：在挂载完成后被调用，此时组件已经被挂载到dom上，可以进行dom操作或者访问组件的Dom元素
|
|
|
+ beforeUpdate：在数据更新之前被调用，发生在dom重新渲染之前，可以在这个阶段进行状态的修改
|
|
|
+ updated：在数据更新之后被调用，发生在dom重新渲染之后，可以执行一些依赖更新后的dom操作
|
|
|
+ beforeDestroy：在实例销毁之前被调用，可以进行一些清理工作，比如清除定时器
|
|
|
+ destroyed：在实例销毁后被调用，组件已经完全销毁，所有的事件监听器和子组件被移除。
|
|
|
+ */
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub