You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/cookbook/avoiding-memory-leaks.md
+15-6Lines changed: 15 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,7 @@ title: Avoiding Memory Leaks
3
3
type: cookbook
4
4
order: 10
5
5
---
6
+
6
7
## Introduction
7
8
8
9
If you are developing applications with Vue, then you need to watch out for memory leaks. This issue is especially important in Single Page Applications (SPAs) because by design, users should not have to refresh their browser when using an SPA, so it is up to the JavaScript application to clean up components and make sure that garbage collection takes place as expected.
@@ -13,20 +14,27 @@ Memory leaks in Vue applications do not typically come from Vue itself, rather t
13
14
14
15
The following example shows a memory leak caused by using the [Choices.js](https://github.com/jshjohnson/Choices) library in a Vue component and not properly cleaning it up. Later, we will show how to remove the Choices.js footprint and avoid the memory leak.
15
16
16
-
In the example below, we load up a select with a lot of options and then we use a show/hide button with a [v-if](/v2/guide/conditional.html) directive to add it and remove it from the virtual DOM. The problem with this example is that the `v-if` directive removes the parent element from the DOM, but we did not clean up the additional DOM pieces created by Choices.js, causing a memory leak.
17
+
In the example below, we load up a select with a lot of options and then we use a show/hide button with a [v-if](/v2/guide/conditional.html) directive to add it and remove it from the virtual DOM. The problem with this example is that the `v-if` directive removes the parent element from the DOM, but we did not clean up the additional DOM pieces created by Choices.js, causing a memory leak.
To see this memory leak in action, open this [CodePen example](https://codepen.io/freeman-g/pen/qobpxo) using Chrome and then open the Chrome Task Manager. To open the Chrome Task Manager on Mac, choose Chrome Top Navigation > Window > Task Manager or on Windows, use the Shift+Esc shortcut. Now, click the show/hide button 50 or so times. You should see the memory usage in the Chrome Task Manager increase and never be reclaimed.
// now we can use the reference to Choices to perform clean up here
124
+
// now we can use the reference to Choices to perform clean up here
116
125
// prior to removing the elements from the DOM
117
126
this.choicesSelect.destroy()
118
127
this.showChoices=false
@@ -123,7 +132,7 @@ new Vue({
123
132
124
133
## Details about the Value
125
134
126
-
Memory management and performance testing can easily be neglected in the excitement of shipping quickly, however, keeping a small memory footprint is still important to your overall user experience.
135
+
Memory management and performance testing can easily be neglected in the excitement of shipping quickly, however, keeping a small memory footprint is still important to your overall user experience.
127
136
128
137
Consider the types of devices your users may be using and what their normal flow will be. Could they use memory constrained laptops or mobile devices? Do your users typically do lots of in-application navigation? If either of these are true, then good memory management practices can help you avoid the worst case scenario of crashing a user’s browser. Even if neither of these are true, you can still potentially have degradation of performance over extended usage of your app if you are not careful.
Copy file name to clipboardExpand all lines: src/v2/cookbook/client-side-storage.md
+18-16Lines changed: 18 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@ order: 11
6
6
7
7
## Base Example
8
8
9
-
Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (technically "Web Storage"), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and [WebSQL](https://www.w3.org/TR/webdatabase/) (a deprecated method that should not be used in new projects).
9
+
Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (technically "Web Storage"), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and [WebSQL](https://www.w3.org/TR/webdatabase/) (a deprecated method that should not be used in new projects).
10
10
11
-
In this cookbook entry we'll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB.
11
+
In this cookbook entry we'll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB.
12
12
13
13
Let's begin with a simple form based example:
14
14
@@ -39,7 +39,7 @@ const app = new Vue({
39
39
});
40
40
```
41
41
42
-
Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from localStorage. To handle writing the data base, we watch the `name` value and on change, immediately write it.
42
+
Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from localStorage. To handle writing the data base, we watch the `name` value and on change, immediately write it.
43
43
44
44
You can run this yourself here:
45
45
@@ -64,16 +64,19 @@ Immediately writing the value may not advisable. Let's consider a slightly more
64
64
65
65
```html
66
66
<divid="app">
67
-
My name is <inputv-model="name">
68
-
and I am <inputv-model="age"> years old.
69
-
<p/>
70
-
<button@click="persist">Save</button>
67
+
<p>
68
+
My name is <inputv-model="name">
69
+
and I am <inputv-model="age"> years old.
70
+
</p>
71
+
<p>
72
+
<button@click="persist">Save</button>
73
+
</p>
71
74
</div>
72
75
```
73
76
74
77
Now we've got two fields (again, bound to a Vue instance) but now there is the addition of a button that runs a `persist` method. Let's look at the JavaScript.
75
78
76
-
```js
79
+
```js
77
80
constapp=newVue({
78
81
el:'#app',
79
82
data: {
@@ -105,22 +108,22 @@ As before, `mounted` is used to load persisted data, if it exists. This time, th
105
108
106
109
## Working with Complex Values
107
110
108
-
As mentioned above, Local Storage only works with simple values. To store more complex values, like objects or arrays, you must serialize and deserialize the values with JSON. Here is a more advanced example that persists an array of cats (the best kind of array possible).
111
+
As mentioned above, Local Storage only works with simple values. To store more complex values, like objects or arrays, you must serialize and deserialize the values with JSON. Here is a more advanced example that persists an array of cats (the best kind of array possible).
Copy file name to clipboardExpand all lines: src/v2/cookbook/creating-custom-scroll-directives.md
+4-1Lines changed: 4 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -40,7 +40,10 @@ new Vue({
40
40
```html
41
41
<divid="app">
42
42
<h1class="centered">Scroll me</h1>
43
-
<divclass="box"v-scroll="handleScroll">
43
+
<div
44
+
v-scroll="handleScroll"
45
+
class="box"
46
+
>
44
47
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
Copy file name to clipboardExpand all lines: src/v2/cookbook/dockerize-vuejs-app.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -109,7 +109,7 @@ Let's see how these concepts actually affect our decision of dockerizing our Vue
109
109
110
110
### Effects of Microservices
111
111
112
-
By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery.
112
+
By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery.
113
113
114
114
So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service.
0 commit comments