В общем проблему решил.
Причин было много, одна из них - это подсказанная Evgeny Kulakov: про вотчер,
также почему selected не выставлялся правильно: при получении данных асинхронно, формат был такой {'1':'string', '2':'string',,,,,,} , а т.к. в данном формате ключи автоматически приводятся из строки к числу, и, соответственно, автоматически происходит сортировка объекта по числовым ключам по возрастанию (оптимизация движка js), и, чтобы избежать этого и сохранить изначальный порядок сортировки значений, проставлял к строковым ключам дополнительно '+', вот так {'+1':'string'}, и тогда select выводил в правильном порядке значения. Но именно же и поэтому не выставлялся selected - на вход приходило число 1, а в option было значение '+1', и, т.к. значения не одинаковые, selected не находил нужный option.
Плюс также сами значения приходили асинхронно через 3 подряд идущих callback, а так как в родительском компоненте стояли вотчеры на изменение значений, то эти вотчеры срабатывали позже, чем обрабатывалось измененное значение у select, поэтому пришлось использовать next.tick для изменения порядка обработки изменений значений вотчерами...
В общем, достаточно сложная мешанина действий и событий, поэтому непросто было отследить кривой участок кода.
Всем спасибо за активное участие, отдельная благодарность Evgeny Kulakov: за грамотные и четкие ответы!
И еще один вопрос: можете разъяснить - в чем разница у select значения selected и value ?
Чем пользоваться надо, this.selected или this.value ?
Потому что у меня в коде сейчас через this.value = '999'; работает, а через this.selected = '999'; не работает.
Может наверное selected с index связан, а value с непосредственно значением?
В общем не совсем понятны зависимости....
Evgeny Kulakov:
давайте сформулирую, а вы pls поправьте если не так:
т.е. значение value, переданное в сам props будет передаваться всегда, но в сам select будет передаваться из props только один раз при создании select, а если в дальнейшем менять значение value, то в props будет передано новое значение value, а вот далее оно в сам select не передается? так?
и чтобы это значение из props передать далее в сам select, нужно через наблюдатель watch передать его вручную в select, так ?
У меня подозрение, что не биндятся данные.
Можете подсказать - data:{someState1.state1.value} - это будет реактивно?
Или только просто data:{state1} будет реактивно, а глубже уже нет?
И еще - при изменение данных data объекта с глубиной вложенности больше 1 будет работать v-bind ???
Андрей Хохлов:
Посмотрел пример - что то вроде того у меня, если брать ансинхронную загрузку данных. Еще информация к размышлению - у меня форма со множеством контролов-select, и те из них, которые сразу при создании компонента-родителя имеют все исходные данные (и options и selected value) , которые при создании передаются в компонент-потомок, вот эти контролы нормально показывают и все options и изначально установленное значение selected. А вот те, в которые потом данные (options и selected value) подгружаю асинхронно и меняю изначально установленные при создании данные на загруженные, то:
1. options у selecta есть - т.е. вручную могу выбрать новые значения.
2. selected value в data компонента-родителя присвоено новое значение, в консоль вывожу полный объект data - показывает что свойство data, передающее в компонент-потомок значение для selected изменено на новое.
3. т.е. получается, что новые данные в data компонента-родителя есть, но передается почему то только значения options, а для selected не передается.
Вопрос - почему? Что я делаю не так?
При начальной загрузке все показывает, но, допустим, я подгружаю асинхронно данные и меняю someState2.state2 = {....новые данные......}, то не биндятся они почему то. Пробовал и через $set, и через Object.assign - никак..
Хотя в DOM они есть - в браузере видно.
Меняю значение someState1.state1.value = 999, то же самое - в консоль выводит что значение новое присвоено, но select не отображает почему то... (компонент - это select)
Вот и не пойму - данные новые есть, но select не ставится в новую позицию selected
UPD
Вот еще по теме потребления памяти браузером.
Т.к. я выше упомянул, что работаю с изображениями, то в поисках оптимизации различных параметров, в т.ч. и расхода памяти наткнулся на давно мной прочитанную и уже позабытую статью, где как раз и упоминается про особенности потребления памяти при работе с изображениями в JavaScript Ресайз картинок в браузере. Все очень плохо
Этот момент обязательно нужно учитывать, тем более в SPA и подобных направлениях.
dimonchik2013:
Ну, кстати, да ;)
После всех проверок выяснил, что проблема была в неосвобожденных переменных - ну, и, соответственно, висячие данные накапливались и память кушалась.
Сейчас все почистил, обнулил - теперь держит +- 15Мб.
Да еще с роутером косячок нашел - тоже объем с сервера грузился не туда куда надо...
В общем - внимательнее надо быть :)
В приложении обработка изображений в канвас. Но при загрузке картинки 500 кб расход памяти прыгает +100мб. Вот и что то сомневаюсь, что это нормально..
Это и есть весь код.
Ну плюс div с id и подключение vue.js
Проверял в хроме и мозилле профилированием.
Причем потребление памяти в готовом приложении растет в пределах +(10Мб-50Мб) за нажатие F5, а голый объект около 5-7 Мб за одно обновление страницы. Вероятно зависит от количества данных и компонентов.
И сборщик мусора почти не сбрасывает размер, совсем немного, а потом если на вкладке не делать ничего стоит на месте одна цифра.
Причин было много, одна из них - это подсказанная Evgeny Kulakov: про вотчер,
также почему selected не выставлялся правильно: при получении данных асинхронно, формат был такой {'1':'string', '2':'string',,,,,,} , а т.к. в данном формате ключи автоматически приводятся из строки к числу, и, соответственно, автоматически происходит сортировка объекта по числовым ключам по возрастанию (оптимизация движка js), и, чтобы избежать этого и сохранить изначальный порядок сортировки значений, проставлял к строковым ключам дополнительно '+', вот так {'+1':'string'}, и тогда select выводил в правильном порядке значения. Но именно же и поэтому не выставлялся selected - на вход приходило число 1, а в option было значение '+1', и, т.к. значения не одинаковые, selected не находил нужный option.
Плюс также сами значения приходили асинхронно через 3 подряд идущих callback, а так как в родительском компоненте стояли вотчеры на изменение значений, то эти вотчеры срабатывали позже, чем обрабатывалось измененное значение у select, поэтому пришлось использовать next.tick для изменения порядка обработки изменений значений вотчерами...
В общем, достаточно сложная мешанина действий и событий, поэтому непросто было отследить кривой участок кода.
Всем спасибо за активное участие, отдельная благодарность Evgeny Kulakov: за грамотные и четкие ответы!