Ilya
props
Anonymous
Я, кажется, разобрался. Keep-alive может сохранять состояние компонента. запоминает все свойства
Ilya
почитай про vue-router
Michael
ок, тогда последний вопрос =)
у svg vue loader есть вот такая строчка: https://github.com/visualfanatic/vue-svg-loader/blob/4921cf1069f59db5a0a30b169ee001db72bd1755/index.js#L22
это типа содержимое svg подается на вход vue-компайлеру, а он возвращает render-функцию.
меня почему-то этот момент смутил - оно точно затормозит сборку, и, скорее всего, затормозит рантайм (потому что при рендере компонента весь svg будет собираться обратно из vnode-ов)
мне захотелось тупо зафигачить содержимое через innerHTML, что я на коленке и сделал =)
вопрос: есть ли у моего решения недостатки?
не затормозит. У тебя же тут рендер-функция. Она на выходе уже готовая. И будет вызываться, а не перекомпиливатья, при перерисовке в рантайме.
Michael
Илья
ну на первый взгляд у твоего решения нет svgo optimizer'a
есть же ) я из него получаю готовую строку
Michael
тогда у тебя велосипет с:
Michael
потому что у него по внутренней сути на первый взгляд то же самое, но немного более vue-way.
Илья
ну смотри, у меня по сути ровно тот же код, что и у vue-svg-loader, но разница в том, как устроена рендер-функция
Илья
моя не собирает svg из vnode-ов, а вставляет его в innerhtml
Michael
ааааа
Michael
ну если код свгшки не будет меняться
Michael
сам хтмл свгшки
Michael
но твой выигрышный
Илья
ну вроде не должен
Michael
ибо разница только в виртуалдоме
Илья
ну и меня еще пугает мысль, что мы заставляем компайлер ву-шаблонов парсить что-то, что, во-первых, шаблоном не является, а во-вторых даже не нами написано
Michael
может, есть, правда, подводные камни в кеше виртуалдома
Илья
у меня свгшки экспортируются из фигмы, есть такой стремный сервис
Michael
там где внодный вариант закешится и будет обновляться хитро, твой может перерисоваться целиком
Michael
но тут больше хз чем нет
Michael
думать немного уже надо
Michael
)))
Илья
ну короче надо потестить, ок +) про кеш понял мысль, да
Илья
собсно надо почитать исходники и понять, как оно перерисовывается
Michael
ну и меня еще пугает мысль, что мы заставляем компайлер ву-шаблонов парсить что-то, что, во-первых, шаблоном не является, а во-вторых даже не нами написано
если сильно не путаю, вю шаблоны являются надмножеством хтмл
Michael
так что если свг не срака, то всё ок
Michael
если что найдёшь интересное, напиши, указав меня где-нибудь чтобы уведомление вылезло) интересно
Илья
свг как минимум валидный xml, потому что он предварительно через svgo прогоняется, но все равно
Илья
окей =)
Michael
ну хмл имеет неограниченный набор тегов
Michael
как минимум
Michael
на хмл вю может заругаться
Michael
и будет прав
Michael
а вот на хтмл нет
Илья
ну там теоретически может возникнуть конфликт, если в спецуху свг добавят теги <component> и <template> 🙂
Илья
или например если где-то в проекте кто-то добрый зарегает глобально компонент <g> или <path> 🙂
Michael
ну там теоретически может возникнуть конфликт, если в спецуху свг добавят теги <component> и <template> 🙂
за год до этого их добавят в новую версию вю)
Michael
Michael
или мухобойку для джунов
Michael
палочку из бамбука
Илья
ну у себя я это могу контроллировать, а если делать какое-то отчуждаемое решение, то уже хз
Илья
вообще глобальная регистрация компонентов - это типа считается бэд пректис, или норм?
Илья
я все импортирую руками, но иногда подбешивает )
Michael
это классическая тема про глобальные переменные. Слать такие решения куда подальше. А авторам пособие для чайников.
Michael
https://stackoverflow.com/questions/484635/are-global-variables-bad
Stanislav
Vue нормально поддерживает svg и умеет работать с его нодами.
На счет вставки кода в innerHTML - не понял, куда оно будет вставляться
Michael
а вообще это в каждой первой книжке для чайников есть
Michael
v-html например
Michael
а можно еще знаешь как
Michael
$('.my-vue-ccomponentinstance').each(function() {this.html(window.mySVG)})
Илья
export default function({svg, viewBox, width, height}) {
return {
props: ['className'],
render: function(c) {
return c(
'svg',
{
attrs: {
class: 'icon ' + this.className,
// ...
},
domProps: {
innerHTML: svg
}
}
)
}
}
}
Michael
Michael
а можно еще знаешь как
Michael
$('.my-vue-ccomponentinstance').each(function() {this.html(window.mySVG)})
Michael
Michael
😂😂😂😂😂😂 самосмейка
Stanislav
Илья
=)
Stanislav
Вот лучше через v-html, да.
Илья
дык v-html вроде ровно это и делает
Michael
вю*
Stanislav
дык v-html вроде ровно это и делает
Надо смотреть исходники :) Думаю, он делает чуть чуть больше
Stanislav
С оглядкой на vdom
Илья
по идее внутри domProps.innerHTML нет ничего реактивного, соответственно обновляться оно не должно, но действительно исходники почитаю ночью
Michael
Надо смотреть исходники :) Думаю, он делает чуть чуть больше
экранирует, проверяет на инъекции же.
Michael
классика
Michael
по идее внутри domProps.innerHTML нет ничего реактивного, соответственно обновляться оно не должно, но действительно исходники почитаю ночью
лучше вюшную виртаулдом имплементацию. и читать доклад на HolyJS
Michael
по идее внутри domProps.innerHTML нет ничего реактивного, соответственно обновляться оно не должно, но действительно исходники почитаю ночью
если бы и было, то это стоило бы обернуть в конструктор функции, как это сделал автор вю-свг проекта.
Michael
иначе там нет ссылок на данные. нет ссылок -- гг бб
Anton
Всем привет.
Народ помогите решить баг с сортировкой. Есть массив объектов заказов. В у заказа есть свойство date. Необходимо получить массив уникальных дней отсортированных начиная с раннего дня. Вот реализация которую мне подсказали здесь:
getDays () {
return this.orders.map(function (item) {
return item.date
}).filter(function (value, index, self) {
return self.indexOf(value) === index
}).sort(function (a, b) {
let dateA = moment(a, 'DD.MM.YYYY')
let dateB = moment(b, 'DD.MM.YYYY')
console.log(a + ' > ' + b + ' - ' + dateB.isBefore(dateA))
return dateB.isBefore(dateA)
})
},
Баг вылезает на выбрках больше одного месяца, произвольные даты подставляются в начало. В чем может быть проблема?
Илья
ну короче шаблон
<template><span v-html="html"></span></template>
рендерится вот в такое
return (t._self._c || e)("span", {
domProps: {
innerHTML: t._s(t.html)
}
})
где t._s - это функция toString вот отсюда https://github.com/vuejs/vue/blob/350f5788d39741d690d49aea91c084f2db764992/src/shared/util.js#L73 - она ничего полезного не делает )
Илья
так что в этом смысле моя рендер-функция ничем не хуже v-html 🙂
Victor
так что должно быть что-то типа:
if isBefore return -1
if isEqual return 0
if isAfter return 1
Anton
Вообще-то sort ожидает -1, 0, или 1, а isBefore возвращает true/false
Спасибо тебе добрый человек, походу помогло
Michael
Вообще-то sort ожидает -1, 0, или 1, а isBefore возвращает true/false
Надо было его к преподу послать))))))
Anonymous
Я пропустил вчера, что там по weex? Кто-то пишет? И как ощущения?
Anonymous
В идеале - с RN можете сравнить?