Vue.jsのReactiveの中をのぞいてみた件

 Vue.jsのReactiveの中をのぞいてみた件

v-kansai#5でLTを発表した際の資料です

Bde09eb5aa93e53c91a88fc1573cd99f?s=128

morimorikochan

April 25, 2019
Tweet

Transcript

  1. Vue.jsのReactiveの中を のぞいてみた件 morifuji kodai @marooon88

  2. 流れ • 誰? • こんな経験ないですか • やってみた • まとめ

  3. • 名前 ◦ morifuji ◦ @marooon88 • 趣味 ◦ kotlin

    ◦ ゲーム(switch) • 会社 ◦ atma株式会社 ◦ サーバーサイドエンジニア ▪ 最近はvue.js成分多め 誰?
  4. サーバーサイドエンジニア・フロントエンドエンジニア 絶賛採用中 誰?

  5. サーバーサイドエンジニア・フロントエンドエンジニア 絶賛採用中 誰?

  6. こんな経験ないですか objectにプロパティを加え ても反映されない this.$refs経由の dom操作ができない 僕たちはリアクティブ に振り回されている

  7. こんな経験ないですか https://jp.vuejs.org/v2/guide/reactivity.html

  8. こんな経験ないですか https://jp.vuejs.org/v2/guide/reactivity.html ほんとに?

  9. observer/index.js index.js /vue/dev/src/core/*

  10. observer/index.js index.js /vue/dev/src/core/* 無理

  11. やってみた 実際にアプリケーションを動かして どう変化するかを観測 Evan you 氏のサンプルアプリを拝借。 感謝 連携

  12. addTodo: function () { var value = this.newTodo && this.newTodo.trim()

    if (!value) { return } this.todos.push({ id: todoStorage.uid++, title: value, completed: false }) this.newTodo = '' }, やってみた
  13. addTodo: function () { var value = this.newTodo && this.newTodo.trim()

    if (!value) { return } this.todos.push({ id: todoStorage.uid++, title: value, completed: false }) this.newTodo = '' }, やってみた Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value },
  14. addTodo: function () { var value = this.newTodo && this.newTodo.trim()

    if (!value) { return } this.todos.push({ id: todoStorage.uid++, title: value, completed: false }) this.newTodo = '' }, やってみた Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, depend () { if (Dep.target) { Dep.target.addDep(this) } }
  15. やってみた https://jp.vuejs.org/v2/guide/reactivity.html

  16. やってみた doneEdit: function (todo) { if (!this.editedTodo) { return }

    this.editedTodo = null todo.title = todo.title.trim() if (!todo.title) { this.removeTodo(todo) } },
  17. やってみた doneEdit: function (todo) { if (!this.editedTodo) { return }

    this.editedTodo = null todo.title = todo.title.trim() if (!todo.title) { this.removeTodo(todo) } }, Object.defineProperty (obj, key, { enumerable: true, configurable: true, get: …………, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if (process.env.NODE_ENV !== 'production' && customSetter ) { customSetter () } // #7981: for accessor properties without setter if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify() }
  18. やってみた doneEdit: function (todo) { if (!this.editedTodo) { return }

    this.editedTodo = null todo.title = todo.title.trim() if (!todo.title) { this.removeTodo(todo) } }, Object.defineProperty (obj, key, { enumerable: true, configurable: true, get: …………, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if (process.env.NODE_ENV !== 'production' && customSetter ) { customSetter () } // #7981: for accessor properties without setter if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify() } notify () { // stabilize the subscriber list first const subs = this.subs.slice() if (process.env.NODE_ENV !== 'production' && !config.async) { // subs aren't sorted in scheduler if not running async // we need to sort them now to make sure they fire in correct // order subs.sort((a, b) => a.id - b.id) } for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } }
  19. やってみた https://jp.vuejs.org/v2/guide/reactivity.html

  20. なんやこれクソ仕様やんけ!! 仕方ないよなぁ(畏怖) 寛大な心 まとめ こういう処理どうするんやろう こう書けばええんか! 新たな知見

  21. ご静聴ありがとうございました 参考資料 • リアクティブの探求 ◦ https://jp.vuejs.org/v2/guide/reactivity.html • Understanding Rendering Process

    with Virtual DOM In Vue.js ◦ https://medium.com/@koheimikami/understanding-rendering-process-with-virtual-dom-in-vue-js-a6e602811782 • Evan you 氏のサンプルアプリ ◦ https://github.com/vuejs/vue/tree/dev/examples/todomvc • madge(依存関係を可視化するnpmライブラリ) ◦ https://github.com/pahen/madge まとめ