crstinBlog, Software Engineering, Lifehttps://www.crstin.com2020-07-30T00:00:00+02:00crstinDebounce Computed Properties in Vuehttps://www.crstin.com/vue-debounce-computed/2020-07-30T00:00:00+02:002020-07-31T02:55:12+02:00crstin<p>The following approach can be used to debounce user input that triggers the rendering of vuejs computed properties. When needed, debouncing will increase site performance and improve feature usability. In the example below a dataset is being filtered and the results are interactively shown in a table. The computation happens only once exactly 250 ms after the user stops typing in the input field. Debouncing of a computed property can be achieved by watching a proxy variable (<code>queryTableBuffer</code> in this case) or with the computed property's getter / setter methods.</p>
<pre><code class="language-js"><template lang="pug">
section.section
b-field
b-input(v-model="queryTableBuffer")
b-table(:data="queryTableResults")
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
table: [],
queryTable: '',
queryTableBuffer: ''
}
},
computed: {
queryTableResults() {
return extFilteredAndSortedArray(this.table, this.queryTable)
}
},
watch: {
queryTableBuffer: debounce(function (newVal) {
this.queryTable = newVal
}, 250)
},
created() {
this.generateTable()
},
methods: {
generateTable() {
this.table = extGetDataset()
}
}
}
</script>
</code></pre>
<p></p>
Rebote de propiedades calculadas en Vuehttps://www.crstin.com/es/vue-debounce-computed/2020-07-30T00:00:00+02:002020-07-31T02:55:02+02:00crstin<p>El siguiente enfoque se puede utilizar para eliminar la entrada del usuario que desencadena la representación de las propiedades calculadas de vuej. Cuando sea necesario, la eliminación del rebote aumentará el rendimiento del sitio y mejorará la usabilidad de las funciones. En el siguiente ejemplo, se está filtrando un conjunto de datos y los resultados se muestran interactivamente en una tabla. El cálculo ocurre solo una vez exactamente 250 ms después de que el usuario deja de escribir en el campo de entrada. El rebote de una propiedad calculada se puede lograr observando una variable proxy (<code>queryTableBuffer</code> en este caso) o con los métodos getter / setter de la propiedad calculada.</p>
<pre><code class="language-js"><template lang="pug">
section.section
b-field
b-input(v-model="queryTableBuffer")
b-table(:data="queryTableResults")
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
table: [],
queryTable: '',
queryTableBuffer: ''
}
},
computed: {
queryTableResults() {
return extFilteredAndSortedArray(this.table, this.queryTable)
}
},
watch: {
queryTableBuffer: debounce(function (newVal) {
this.queryTable = newVal
}, 250)
},
created() {
this.generateTable()
},
methods: {
generateTable() {
this.table = extGetDataset()
}
}
}
</script>
</code></pre>
<p></p>
Debounce proprietà calcolate in Vuehttps://www.crstin.com/it/vue-debounce-computed/2020-07-30T00:00:00+02:002020-07-31T02:54:54+02:00crstin<p>Il seguente approccio può essere utilizzato per rimandare l'input dell'utente che innesca il rendering delle proprietà calcolate di vuejs. Se necessario, il debounce aumenterà le prestazioni del sito e migliorerà l'usabilità delle funzionalità. Nell'esempio seguente un set di dati viene filtrato e i risultati vengono visualizzati interattivamente in una tabella. Il calcolo avviene solo una volta esattamente 250 ms dopo che l'utente ha smesso di digitare nel campo di input. Il debouncing di una proprietà calcolata può essere ottenuto osservando una variabile proxy (<code>queryTableBuffer</code> in questo caso) o con i metodi getter / setter della proprietà calcolata.</p>
<pre><code class="language-js"><template lang="pug">
section.section
b-field
b-input(v-model="queryTableBuffer")
b-table(:data="queryTableResults")
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
table: [],
queryTable: '',
queryTableBuffer: ''
}
},
computed: {
queryTableResults() {
return extFilteredAndSortedArray(this.table, this.queryTable)
}
},
watch: {
queryTableBuffer: debounce(function (newVal) {
this.queryTable = newVal
}, 250)
},
created() {
this.generateTable()
},
methods: {
generateTable() {
this.table = extGetDataset()
}
}
}
</script>
</code></pre>
<p></p>
Debouncing von Computed Properties in Vuehttps://www.crstin.com/de/vue-debounce-computed/2020-07-30T00:00:00+02:002020-07-31T02:54:37+02:00crstin<p>Der folgende Ansatz kann verwendet werden um Benutzereingaben zu entprellen, die das Rendern der vuejs computed properties auslösen. Bei Bedarf erhöht das Entprellen die Leistung der Website und verbessert die Benutzerfreundlichkeit der Funktionen. Im folgenden Beispiel wird ein Datensatz gefiltert und die Ergebnisse werden interaktiv in einer Tabelle angezeigt. Die Berechnung erfolgt nur einmal, genau 250 ms nachdem der Benutzer aufgehört hat im Eingabefeld zu Tippen. Das Entprellen von computed properties kann durch Überwachung einer Proxy-Variablen (in diesem Fall <code>queryTableBuffer</code>) oder mit den Getter / Setter Methoden der computed properties erreicht werden.</p>
<pre><code class="language-js"><template lang="pug">
section.section
b-field
b-input(v-model="queryTableBuffer")
b-table(:data="queryTableResults")
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
table: [],
queryTable: '',
queryTableBuffer: ''
}
},
computed: {
queryTableResults() {
return extFilteredAndSortedArray(this.table, this.queryTable)
}
},
watch: {
queryTableBuffer: debounce(function (newVal) {
this.queryTable = newVal
}, 250)
},
created() {
this.generateTable()
},
methods: {
generateTable() {
this.table = extGetDataset()
}
}
}
</script>
</code></pre>
<p></p>
Démonter les propriétés calculées dans Vuehttps://www.crstin.com/fr/vue-debounce-computed/2020-07-30T00:00:00+02:002020-07-31T02:54:46+02:00crstin<p>L'approche suivante peut être utilisée pour éliminer les entrées utilisateur qui déclenchent le rendu des propriétés calculées vuejs. En cas de besoin, le débouncing augmentera les performances du site et améliorera la convivialité des fonctionnalités. Dans l'exemple ci-dessous, un ensemble de données est filtré et les résultats sont affichés de manière interactive dans un tableau. Le calcul n'a lieu qu'une fois exactement 250 ms après que l'utilisateur a cessé de taper dans le champ de saisie. Le débouncing d'une propriété calculée peut être réalisé en regardant une variable proxy (<code>queryTableBuffer</code> dans ce cas) ou avec les méthodes getter / setter de la propriété calculée.</p>
<pre><code class="language-js"><template lang="pug">
section.section
b-field
b-input(v-model="queryTableBuffer")
b-table(:data="queryTableResults")
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
table: [],
queryTable: '',
queryTableBuffer: ''
}
},
computed: {
queryTableResults() {
return extFilteredAndSortedArray(this.table, this.queryTable)
}
},
watch: {
queryTableBuffer: debounce(function (newVal) {
this.queryTable = newVal
}, 250)
},
created() {
this.generateTable()
},
methods: {
generateTable() {
this.table = extGetDataset()
}
}
}
</script>
</code></pre>
<p></p>
Shared State Management Between Components And The Vue Composition APIhttps://www.crstin.com/vue-composition-api-shared-state/2020-06-19T00:00:00+02:002020-09-11T22:50:03+02:00crstin<pre><code class="language-js">import { ref, computed } from 'nuxt-composition-api'
const state = ref(false)
export default function useColoration() {
const toggle = () => (state.value = !state.value)
return {
state: computed(() => state.value),
toggle
}
}
</code></pre>
<p></p>
<p>A gobally shared state between components can be achieved by keeping the <code>state</code> variable outside the exported function and returning <code>computed properties</code>.</p>
<pre><code class="language-js">import useColoration from '~/use/coloration'
export default {
setup() {
const { state: colorationState, toggle: colorationToggle } = useColoration()
return { colorationState, colorationToggle }
}
}
</code></pre>
<p><a href="https://vue-composition-api-rfc.netlify.app">Vue Composition API</a><br />
<a href="https://composition-api.nuxtjs.org">Nuxt Composition API</a></p>
Gestión de estado compartida entre componentes y la API de composición Vuehttps://www.crstin.com/es/vue-composition-api-shared-state/2020-06-19T00:00:00+02:002020-09-11T22:50:00+02:00crstin<pre><code class="language-js">import { ref, computed } from 'nuxt-composition-api'
const state = ref(false)
export default function useColoration() {
const toggle = () => (state.value = !state.value)
return {
state: computed(() => state.value),
toggle
}
}
</code></pre>
<p></p>
<p>Se puede lograr un estado compartido globalmente entre los componentes manteniendo la variable <code>state</code> fuera de la función exportada y devolviendo las propiedades <code>computed</code>.</p>
<pre><code class="language-js">import useColoration from '~/use/coloration'
export default {
setup() {
const { state: colorationState, toggle: colorationToggle } = useColoration()
return { colorationState, colorationToggle }
}
}
</code></pre>
<p><a href="https://vue-composition-api-rfc.netlify.app">Vue Composition API</a><br />
<a href="https://composition-api.nuxtjs.org">Nuxt Composition API</a></p>
Gestion d'état partagée entre les composants et l'API de composition Vuehttps://www.crstin.com/fr/vue-composition-api-shared-state/2020-06-19T00:00:00+02:002020-09-11T22:49:57+02:00crstin<pre><code class="language-js">import { ref, computed } from 'nuxt-composition-api'
const state = ref(false)
export default function useColoration() {
const toggle = () => (state.value = !state.value)
return {
state: computed(() => state.value),
toggle
}
}
</code></pre>
<p></p>
<p>Un état partagé globalement entre les composants peut être obtenu en gardant la variable <code>state</code> en dehors de la fonction exportée et en renvoyant les propriétés <code>computed</code>.</p>
<pre><code class="language-js">import useColoration from '~/use/coloration'
export default {
setup() {
const { state: colorationState, toggle: colorationToggle } = useColoration()
return { colorationState, colorationToggle }
}
}
</code></pre>
<p><a href="https://vue-composition-api-rfc.netlify.app">Vue Composition API</a><br />
<a href="https://composition-api.nuxtjs.org">Nuxt Composition API</a></p>
Shared State Management zwischen Komponenten und der Vue Kompositions-APIhttps://www.crstin.com/de/vue-composition-api-shared-state/2020-06-19T00:00:00+02:002020-09-11T22:50:07+02:00crstin<pre><code class="language-js">import { ref, computed } from 'nuxt-composition-api'
const state = ref(false)
export default function useColoration() {
const toggle = () => (state.value = !state.value)
return {
state: computed(() => state.value),
toggle
}
}
</code></pre>
<p></p>
<p>Ein global geteilter Zustand zwischen Komponenten kann erreicht werden, indem die Variable <code>state</code> außerhalb der exportierten Funktion gehalten und <code>computed properties</code> zurückgegeben werden.</p>
<pre><code class="language-js">import useColoration from '~/use/coloration'
export default {
setup() {
const { state: colorationState, toggle: colorationToggle } = useColoration()
return { colorationState, colorationToggle }
}
}
</code></pre>
<p><a href="https://vue-composition-api-rfc.netlify.app">Vue Composition API</a><br />
<a href="https://composition-api.nuxtjs.org">Nuxt Composition API</a></p>
Gestione dello stato condiviso tra i componenti e l'API di composizione Vuehttps://www.crstin.com/it/vue-composition-api-shared-state/2020-06-19T00:00:00+02:002020-09-11T22:49:49+02:00crstin<pre><code class="language-js">import { ref, computed } from 'nuxt-composition-api'
const state = ref(false)
export default function useColoration() {
const toggle = () => (state.value = !state.value)
return {
state: computed(() => state.value),
toggle
}
}
</code></pre>
<p></p>
<p>Uno stato condiviso a livello gobale tra i componenti può essere ottenuto mantenendo la variabile <code>state</code> fuori dalla funzione esportata e restituendo le proprietà <code>computed</code>.</p>
<pre><code class="language-js">import useColoration from '~/use/coloration'
export default {
setup() {
const { state: colorationState, toggle: colorationToggle } = useColoration()
return { colorationState, colorationToggle }
}
}
</code></pre>
<p><a href="https://vue-composition-api-rfc.netlify.app">Vue Composition API</a><br />
<a href="https://composition-api.nuxtjs.org">Nuxt Composition API</a></p>
Eventi Touch JavaScript – hammer.jshttps://www.crstin.com/it/hammerjs/2020-06-11T00:00:00+02:002020-06-11T21:20:40+02:00crstin<div data-module="touch-input">
<div>
Touch this.
</div>
</div>
<p></p>
<pre><code class="language-js">import Hammer from 'hammerjs'
const gestures = [
// TAP
{ event: 'tap' },
{ event: 'doubletap' },
{ event: 'trippletap' },
{ event: 'quadrupletap' },
// PRESS
{ event: 'press' },
{ event: 'pressup' },
// SWIPE
{ event: 'swipeleft' },
{ event: 'swiperight' },
{ event: 'swipeup' },
{ event: 'swipedown' },
// ROTATION
{ event: 'rotatestart' },
{ event: 'rotatemove' },
{ event: 'rotateend' },
{ event: 'rotatecancel' },
// PINCH
{ event: 'pinchstart' },
{ event: 'pinchmove' },
{ event: 'pinchend' },
{ event: 'pinchcancel' },
{ event: 'pinchin' },
{ event: 'pinchout' }
]
const mcBox = document.querySelector('[data-module="touch-input"]')
const mc = new Hammer(mcBox)
mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }))
mc.add(new Hammer.Tap({ event: 'trippletap', taps: 3 }))
mc.add(new Hammer.Tap({ event: 'quadrupletap', taps: 4 }))
mc.get('doubletap').recognizeWith('tap')
mc.get('trippletap').recognizeWith('tap')
mc.get('quadrupletap').recognizeWith('tap')
mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL })
mc.get('pinch').set({ enable: true })
mc.get('rotate').set({ enable: true })
for (let gesture of gestures) {
mc.on(gesture.event, (event) => {
event.preventDefault()
mcBox.textContent = gesture.event
})
}
</code></pre>
<p><a href="https://hammerjs.github.io/">Source</a></p>