- Vue.js 2 Web Development Projects
- Guillaume Chau
- 515字
- 2021-07-02 22:34:26
Lifecycle hooks
The first way that comes to mind to restore our note content into the Vue instance is to set the content data property when the instance is created.
Each Vue instance follows a precise lifecycle with several steps--it will be created, mounted on the page, updated, and finally, destroyed. For example, during the creating step, Vue will make the instance data reactive.
Hooks are a specific set of functions that are automatically called at some point in time. They allow us to customize the logic of the framework. For example, we can call a method when a Vue instance is created.
We have multiple hooks at our disposal to execute logic when, or just before, each of these steps occurs:
- beforeCreate: This is called when the Vue instance object is created (for example, with new Vue({})), but before Vue has done anything with it.
- created: This is called after the instance is ready and fully operating. Note that, at this point, the instance is not in the DOM yet.
- beforeMount: This is called just before the instance is added (or mounted) on the web page.
- mounted: This is called when the instance is on the page and visible in the DOM.
- beforeUpdate: This is called when the instance needs to be updated (generally, when a data or computed property has changed).
- updated: This is called after the data changes are applied to the template. Note that the DOM may not be up to date yet.
- beforeDestroy: This is called just before the instance is torn down.
- destroyed: This is called when the instance is fully removed.
For now, we will only use the created hook to restore the note content. To add a lifecycle hook, just add a function with the corresponding name into the Vue instance options:
new Vue({ // ... // This will be called when the instance is ready created () { // Set the content to the stored value // or to a default string if nothing was saved this.content = localStorage.getItem('content') || 'You can write in **markdown**' }, })
Now, when you refresh the app, the ;created hook will be automatically called when the instance is created. This will set the content data property value to the result of the restoration or to 'You can write in **markdown**' if the result was falsy, in case we didn't have anything saved before.
In JavaScript, a value is falsy when equal to false, 0, an empty string, null, undefined, or NaN (not a number). Here, the localStorage.getItem() function will return null if the corresponding key doesn't exist in the browser local storage data.
The watcher we set up is also called, so the note is saved, and you should see something similar to this in the browser console:
new note: You can write in **markdown** old note: This is a note saving note: You can write in **markdown** The saving operation was completed!
We can see that when the created hook is called, Vue has already set the data properties and their initial values (here, This is a note).
- Oracle Exadata性能優化
- Python GUI Programming Cookbook
- Linux:Embedded Development
- Access 2010數據庫應用技術(第2版)
- INSTANT Sinatra Starter
- RESTful Java Web Services(Second Edition)
- HTML5秘籍(第2版)
- Android移動開發案例教程:基于Android Studio開發環境
- ArcGIS for Desktop Cookbook
- Mastering Apache Storm
- Getting Started with Python
- 深入實踐DDD:以DSL驅動復雜軟件開發
- 企業級Java現代化:寫給開發者的云原生簡明指南
- 現代C++語言核心特性解析
- ANSYS FLUENT 16.0超級學習手冊