vuejs using computed property for array elements
I\'ve got basic template that is outputing text from wysiwyg editor via two-ways data binding as below:
-
Any time you have an array and you think each item needs a computed, you should look at making a component. That is how data and computeds get attached to each other.
In a lot of cases, you can make a computed based on the array, and it's fine, but you should be aware that any change to the array causes a recompute of the entire computed array. With a component, only the affected rows are recomputed. A simple example is embedded here.
new Vue({ el: '#app', data: { arr: [1, 2, 3] }, computed: { carr() { console.log("Computing the whole array"); return this.arr.map(x => 'hi ' + x); } }, components: { addHi: { props: ['value'], template: '<div>{{a}}</div>', computed: { a() { console.log("Computing for", this.value); return 'hi ' + this.value; } } } }, created() { setTimeout(() => { console.log("** Changing a value"); this.arr.splice(2, 1, 'X'); }, 1500); } });<script src="//unpkg.com/vue@latest/dist/vue.js"></script> <div id="app"> <div v-for="a in carr">{{a}}</div> <add-hi v-for="a in arr" :value="a" :key="a"></add-hi> </div>If you need your computed to be writable, you won't be able to edit individual items, so you're really forced to make a component. It is pretty straightforward: just move the HTML into the template of the component, move the computed into the component (adjusting it to work on the prop
value), and then – because it is operating on a prop – change thesetfunction to use$emitrather than changing its value directly.debouncedQuillEditor: { props: ['value', 'options'], template: '<quill-editor v-model="debouncedValue" :options="options"></quill-editor>', computed: { debouncedValue: { get() { return this.value; }, set: _.debounce(function(newValue) { this.$emit('input', newValue); }, 100) } } },I made a fiddle to demonstrate. I made a second component to handle the output HTML, although it could have been included in the first component.
讨论(0)
加载中...
- 热议问题