• beforeCreate : 组件创建之前

  • created : 组件创建之后 (非常重要)

    1. 使用该组件，就会触发以上的钩子函数，

    2. created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响

    3. 应用：发送ajax请求

    4. 如果我们要发送多个ajax的话,可以使用methods写一个函数进行分发,然后在方法中调用函数就可以了
    5. 1 methods:{
2           getCategroyList(){
3 
4           }
5         },
6         created(){
7             //ajax 发送请求 数据获取
8             this.getCategroyList();
9         }

       

  • beforeMount : 装载数据到DOM之前调用

  • mounted : 操作DOM,装载数据到DOM之后会调用,可以获取到真实存在的DOM元素,vue操作以后的DOM

  • beforeUpdate : 更新之前调用,获取原始的DOM

  • updated : 更新之后调用,获取最新的DOM

  • activated :

  • deactivated :

  • beforeDestroy :

  • destroyed : 定时器的销毁,要在此方法中处理

  • deactivated : keep-alive Vue提供的内置组件,主要作用是让组件产生缓存,停用当前组件

这些方法都是写在组件里面

 

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 </head>
  8 <body>
  9 <div id="app">
 10     <App/>
 11 </div>
 12 <script src="vue.js"></script>
 13 
 14 <script>
 15     let Test = {
 16         data() {
 17             return {
 18                 msg: 'alex',
 19                 count:0,
 20                 timer:null
 21             }
 22         },
 23         template: `
 24                <div id="test">
 25                     <div id="box">{{ msg }}</div>
 26                     <p>{{ count }}</p>
 27                     <button @click = 'change'>修改</button>
 28                </div>
 29             `,
 30         methods: {
 31             change() {
 32                 this.msg = 'wusir';
 33                 document.querySelector('#box').style.color = 'red';
 34             }
 35         },
 36         beforeCreate() {
 37 
 38             // 组件创建之前
 39             console.log('组件创建之前', this.msg);
 40 
 41         },
 42         created() {
 43 //                ********最重要
 44             // 组件创建之后
 45 //            this.timer = setInterval(()=>{
 46 //                this.count++
 47 //            },1000);
 48 
 49             // 使用该组件，就会触发以上的钩子函数，
 50             // created中可以操作数据，发送ajax，并且可以实现数据驱动视图
 51             // 应用：发送ajax请求
 52 
 53             console.log('组件创建之后', this.msg);
 54 
 55             // this.msg = '嘿嘿黑';
 56 
 57         },
 58         beforeMount() {
 59 
 60             // 装载数据到DOM之前会调用
 61 
 62             console.log(document.getElementById('app'));
 63 
 64 
 65         },
 66         mounted() {
 67 //            *******很重要*****
 68 
 69             // 这个地方可以操作DOM
 70 
 71             // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM
 72 
 73             console.log(document.getElementById('app'));
 74             //jsDOM操作
 75 
 76         },
 77         beforeUpdate() {
 78 
 79             // 在更新之前，调用此钩子，应用：获取原始的DOM
 80 
 81             console.log(document.getElementById('app').innerHTML);
 82 
 83         },
 84         updated() {
 85 
 86             // 在更新之后，调用此钩子，应用：获取最新的DOM
 87 
 88             console.log(document.getElementById('app').innerHTML);
 89 
 90         },
 91         beforeDestroy() {
 92 
 93             console.log('beforeDestroy');
 94 
 95         },
 96         destroyed() {
 97             //注意： 定时器的销毁 要在此方法中处理
 98             console.log('destroyed',this.timer);
 99             clearInterval(this.timer);
100 
101         },
102         activated(){
103 
104             console.log('组件被激活了');
105 
106         },
107 
108         deactivated(){
109 
110             console.log('组件被停用了');
111 
112         }
113     }
114     let App = {
115         data() {
116             return {
117                 isShow:true
118             }
119         },
120         template: `
121 
122                <div>
123 
124                    <keep-alive>
125                      <Test  v-if="isShow"/>
126                   </keep-alive>
127                     <button @click = 'clickHandler'>改变test组件的生死</button>
128                </div>
129             `,
130         methods:{
131           clickHandler(){
132               this.isShow = !this.isShow;
133           }
134         },
135         components: {
136             Test
137         }
138 
139     }
140     new Vue({
141         el: '#app',
142         data() {
143             return {}
144         },
145         components: {
146             App
147         }
148 
149     })
150 
151 </script>
152 </body>
153 </html>
View Code