Vue框架整理：vue.js应用与生命周期

绝地灬酷狼 2022-05-23 13:45 165阅读 0赞

![这里写图片描述][70]

Vue 的创建比较简单，通过构造函数Vue就可以了，然后就是一个必选项el.

这个el可以是个html 元素，也可以是CSS 的选择器：

接下来就是data 这个对象了， 在这里可以声明需要双向绑定的数据, 这些数据可以是直接声明的，也可以是一个变量，

var third=new Vue({
                el:"#v1",
                data: {
                    a:111        //声明一个对象
                }
            });
    
            console.log(third.a);       //111

需要注意的是，如果指向的是一个变量，那么他们已经默认的建立了双向绑定的关系，修改其中任意一个，另一个也会有变化

var test={
            a:30
        };
    
        var third=new Vue({
            el:"#v1",
            data: test
        });
    
        console.log(third.a);       //30
    
        third.a=20;             //修改data里面的数据，test也会随着修改
    
        console.log(third.a);       //20
    
        console.log(test.a);        //20

![这里写图片描述][70]

### 生命周期 ###

Vue每次创建的时候，都会有一个初始化的过程，这时就有了相对应的生命周期，  
类似于JavaScript的 onload 等事件，Vue也有自己对应的方法：

其实吧，只要把不同生命周期的 英文 翻译成中文就很好理解了：

vue的生命周期共分为8个部分，直接用代码展示下：

new Vue({
            el: '#v1',
            data: {
                message: 'vvv!'
            },
            beforeCreate: function() { 
                //1、 见名知意，就是创建实例前调用
    
                console.log("创建前")
    
            },
            created: function() { 
                //常用，创建完成后调用，不过此阶段只是完成数据的观测，没有进行挂载，$el不能使用，需要初始化一些数据时使用。
                console.log("创建完成后调用");
    
            },
            beforeMount: function() { 
                //即将挂载的时候调用
    
                console.log("mount之前")
    
            },
            mounted: function() { 
                //常用，翻译过来就是安装完成后，也就是el挂在到实例上以后调用，页面最初要使用的的一些方法可以放这
    
                console.log("安装完成后调用")
    
            },
    
            beforeUpdate: function() { 
    
                console.log("更新前");
    
            },
            updated: function() { 
    
                console.log("更新完成");
    
            },
    
            beforeDestroy: function() { 
                //常用，实例销毁之前调用，可以解除一些绑定的事件等
                console.log("销毁之前调用");
    
            },
    
            destroyed: function() { 
    
                console.log("已销毁");
    
            }
        })

![这里写图片描述][70 1]

[70]: /images/20220523/7a17484f12bc4481a8a8632415c9cacb.png
[70 1]: /images/20220523/85187a9685dd4ea18154b75adf9dbd76.png