Repository: marktext/marktext
File: src/renderer/components/titleBar.vue (Vue)

Code before:
          <svg width="10" height="10">
            <path :d="windowIconMinimize" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { remote } from 'electron'
  import bus from '../bus'
  import { minimizePath, restorePath, maximizePath, closePath } from '../assets/window-controls.js'

  export default {
    data () {
      this.HASH = {
        'word': 'W',
        'character': 'C',
        'paragraph': 'P',
        'all': 'A'
      }
      return {
        isMaximized: remote.getCurrentWindow().isMaximized() || remote.getCurrentWindow().isFullScreen(),
        show: 'word',
        windowIconMinimize: minimizePath,
        windowIconRestore: restorePath,
        windowIconMaximize: maximizePath,
        windowIconClose: closePath
      }
    },
    created () {
      bus.$on('window-state-changed', this.handleWindowStateChange)

      const win = remote.getCurrentWindow()
      win.on('maximize', function () {
        bus.$emit('window-state-changed')
      })
      win.on('unmaximize', function () {
        bus.$emit('window-state-changed')
      })
      win.on('enter-full-screen', function () {
        bus.$emit('window-state-changed')
      })
      win.on('leave-full-screen', function () {
        bus.$emit('window-state-changed')
      })
    },
    props: {
      filename: String,
      pathname: String,

Review comment (performance):
I think `windowIconMinimize `, `windowIconRestore ` , `windowIconMaximize `, `windowIconClose ` are constants, and will not changed.

So don't need to put it in the return object, you can write like this:

```javascript
data () {
    this. windowIconMinimize = windowIconMinimize
    this. windowIconRestore = windowIconRestore
    // other codes
    return {
        // other codes
   }
}
```

Write in this way, Vue application will have a better performance.

Code after:
          <svg width="10" height="10">
            <path :d="windowIconMinimize" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { remote } from 'electron'
  import { minimizePath, restorePath, maximizePath, closePath } from '../assets/window-controls.js'

  export default {
    data () {
      this.HASH = {
        'word': 'W',
        'character': 'C',
        'paragraph': 'P',
        'all': 'A'
      }
      this.windowIconMinimize = minimizePath
      this.windowIconRestore = restorePath
      this.windowIconMaximize = maximizePath
      this.windowIconClose = closePath
      return {
        isMaximized: remote.getCurrentWindow().isMaximized() || remote.getCurrentWindow().isFullScreen(),
        show: 'word'
      }
    },
    created () {
      const win = remote.getCurrentWindow()
      ;['maximize', 'unmaximize', 'enter-full-screen', 'leave-full-screen'].forEach(type => {
        win.on(type, this.handleWindowStateChanged)
      })
    },
    props: {
      filename: String,
      pathname: String,
      active: Boolean,
      wordCount: Object,
      theme: String,
      platform: String,
      isSaved: Boolean
    },
    computed: {
      paths () {
        const pathnameToken = this.pathname.split('/').filter(i => i)
        return pathnameToken.slice(0, pathnameToken.length - 1).slice(-3)
      }
    },