VUE JS Life cycle a short overview
Muhammad Bilal
Full Stack Developer at Devioand Ltd Proficient in Next.js, React, TypeScript, TailwindCSS, Azure Devops, Node.js,AI Integration, Postgresql and NoSQL databases.
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
I help AI tech startup ,companies & CEO to build their product (SaaS, Edtech, Ecommerance )with high conversion best ux practices . Linkedin banner designs| Social Media Post👉 DM to work with me! UI/UX Product Designer
3yJazakAlalha