VUE JS Life cycle a short overview

VUE JS Life cycle some basics.

Some important aspects of VUE JS life cycle.

The first component that is called is

```

created(){

//But this component will not contain the component instance and code

//It is rendered even before the rendering of the html code in the //component.So basically to actually use the on load function we use the method mounted.

}

```

mounted(){

//So this component will allow us to access the DOM.This component //So to prove this run the code

console.log(this.$el);

//This will return the DOM and the html parent code so this is used.

//For the on load usage for example for calling api's etc.

}

unmounted(){

//When the component gets unmounted then this is called.

}

These all are used in the export default {

}

Like this

export default {

? mounted() {

? ? console.log("Component has been created!",(this.$el));

? },

? name: "SignUp",

? data() {

? ? return {

? ? ? filterMenu: null,

? ? ? filteredInvoice: null,

? ? ? email: null,

? ? ? password: null,

? ? ? name: "",

? ? ? signedInUserData: {},

? ? };

? },

? components: {

? ? // Invoice,

? },

? methods: {

? ? getUnits: function () {

? ? ? console.log("Started ............");

? ? },

? ? beforeCreate() {

? ? ? this.getUnits();

? ? },

? ? ...mapMutations(["TOGGLE_INVOICE"]),

? ? signup_email() {

? ? ? const auth = getAuth();

? ? ? if (this.email == null || this.password == null || this.name == null) {

? ? ? ? alert("Please enter the fields to continue");

? ? ? } else {

? ? ? ? createUserWithEmailAndPassword(auth, this.email, this.password)

? ? ? ? ? .then((userCredential) => {

? ? ? ? ? ? // Signed in

? ? ? ? ? ? const user = userCredential.user;

? ? ? ? ? ? console.log("User email is ", user.email);

? ? ? ? ? ? this.signedInUserData({ email: user.email });

? ? ? ? ? ? // ...

? ? ? ? ? ? alert("Signed Up successfully");

? ? ? ? ? ? router.push({ name: "Login" });

? ? ? ? ? })

? ? ? ? ? .catch((error) => {

? ? ? ? ? ? // const errorCode = error.code;

? ? ? ? ? ? const errorMessage = error.message;

? ? ? ? ? ? alert(errorMessage.toString());

? ? ? ? ? ? // ..

? ? ? ? ? });

? ? ? }

? ? ? //console.log("Pressed Login Button", this.email, this.password);

? ? },

? ? loginWithGoogle() {

? ? ? //alert("going to be logged in from Google");

? ? ? const provider = new GoogleAuthProvider();

? ? ? provider.addScope("https://www.googleapis.com/auth/contacts.readonly");

? ? ? const auth = getAuth();

? ? ? signInWithPopup(auth, provider)

? ? ? ? .then((result) => {

? ? ? ? ? // This gives you a Google Access Token. You can use it to access the Google API.

? ? ? ? ? const credential = GoogleAuthProvider.credentialFromResult(result);

? ? ? ? ? const token = credential.accessToken;

? ? ? ? ? console.log("Token==> ", token);

? ? ? ? ? // The signed-in user info.

? ? ? ? ? const user = result.user;

? ? ? ? ? console.log("Google Login is done successfully ==> ", user);

? ? ? ? ? alert("Logged In With facebook Done Successfully.");

? ? ? ? ? // ...

? ? ? ? })

? ? ? ? .catch((error) => {

? ? ? ? ? // Handle Errors here.

? ? ? ? ? // const errorCode = error.code;

? ? ? ? ? const errorMessage = error.message;

? ? ? ? ? console.log(errorMessage);

? ? ? ? ? // // The email of the user's account used.

? ? ? ? ? // const email = error.email;

? ? ? ? ? // // The AuthCredential type that was used.

? ? ? ? ? // const credential = GoogleAuthProvider.credentialFromError(error);

? ? ? ? ? // ...

? ? ? ? });

? ? },

? ? loginWithFacebook() {

? ? ? // alert("going to be logged in from Facebook");

? ? ? const provider = new FacebookAuthProvider();

? ? ? const auth = getAuth();

? ? ? signInWithPopup(auth, provider)

? ? ? ? .then((result) => {

? ? ? ? ? // The signed-in user info.

? ? ? ? ? const user = result.user;

? ? ? ? ? console.log("Facebook User Data is : ", user);

? ? ? ? ? alert("Logged In With facebook Done Successfully.");

? ? ? ? ? // This gives you a Facebook Access Token. You can use it to access the Facebook API.

? ? ? ? ? // const credential = FacebookAuthProvider.credentialFromResult(result);

? ? ? ? ? // const accessToken = credential.accessToken;

? ? ? ? ? // ...

? ? ? ? })

? ? ? ? .catch((error) => {

? ? ? ? ? // Handle Errors here.

? ? ? ? ? //const errorCode = error.code;

? ? ? ? ? const errorMessage = error.message;

? ? ? ? ? console.log(errorMessage);

? ? ? ? ? // The email of the user's account used.

? ? ? ? ? // const email = error.email;

? ? ? ? ? // // The AuthCredential type that was used.

? ? ? ? ? // const credential = FacebookAuthProvider.credentialFromError(error);

? ? ? ? ? // ...

? ? ? ? });

? ? },

? ? loginAnonymous() {

? ? ? const auth = getAuth();

? ? ? signInAnonymously(auth)

? ? ? ? .then(() => {

? ? ? ? ? // Signed in..

? ? ? ? ? alert("Signed In Anonymously.");

? ? ? ? })

? ? ? ? .catch((error) => {

? ? ? ? ? // const errorCode = error.code;

? ? ? ? ? const errorMessage = error.message;

? ? ? ? ? console.log("Error ==> ", errorMessage);

? ? ? ? ? // ...

? ? ? ? });

? ? },

? ? toggleFilterMenu() {

? ? ? this.filterMenu = !this.filterMenu;

? ? },

? ? filteredInvoices(e) {

? ? ? if (e.target.innerText === "Clear Filter") {

? ? ? ? this.filteredInvoice = null;

? ? ? ? return;

? ? ? }

? ? ? this.filteredInvoice = e.target.innerText;

? ? },

? },

? computed: {

? ? ...mapState(["invoiceData", "hideFilter"]),

? ? filteredData() {

? ? ? return this.invoiceData.filter((invoice) => {

? ? ? ? if (this.filteredInvoice === "Draft") {

? ? ? ? ? return invoice.invoiceDraft === true;

? ? ? ? }

? ? ? ? if (this.filteredInvoice === "Pending") {

? ? ? ? ? return invoice.invoicePending === true;

? ? ? ? }

? ? ? ? if (this.filteredInvoice === "Completed") {

? ? ? ? ? return invoice.invoiceCompleted === true;

? ? ? ? }

? ? ? ? return invoice;

? ? ? });

? ? },

? },

? unmounted() {

? ? console.log("Component has been destroyed")

? },

};

For further reading

VUE JS Lifecycle

Call method on page load