Electron-vue开发实战Ⅱ（二）| 实现markdown实时渲染的三种方法

项目中采用marked.js用来实现对textarea区域的markdown文本进行实时渲染。具体的实现细节以后有空更。下面总结一下，我看到的多种可以用来进行实时渲染的方案。主要途径就是electron(调用webAPI)或者vue的一些功能。

通过webAPI使用addEventListener() API ⁍

之前说过，electron是结合了node.js和chromium，这意味着它可以处理DOM对象

因此，我们可以获取到相应的对象^[1]

1	`const markdownView = document.querySelector('#markdown');`

通过调用addEventListener()，检测keyup事件，即监听输入区域内是否有按完键盘的事情发生，来达到实时渲染的目的。

markdownView.addEventListener('keyup', (event) => {
  const currentContent = event.target.value;
  renderMarkdownToHtml(currentContent);
});

vue: 表单输入绑定⁍

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。^[2]

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

1	`<textarea :value="input" @input="update"></textarea>`

定义update方法

methods: {
  update (e) {
    this.input = e.target.value
  }
}

vue：监听内容变化⁍

有时也需要一个自定义的侦听器。Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。^[3]

代码参考^[4]

new Vue({
  name: 'notebook',
  // CSS selector of the root DOM element
  el: '#notebook',
  data () {
    return {
      content: localStorage.getItem('content') || 'You can write in **markdown**',
    }
  },

  computed: {
    //全写：notePreview: function () {
    notePreview () {
      // Markdown rendered to HTML
      return marked(this.content)
    },
  },
 
  watch: {
    content: {//content一变就执行handler
      handler: 'saveNote',
      // immediate: true,
      // deep:true,
    },
  },

  methods: {
    saveNote (val, oldVal) {
      console.log('new note:', val, 'old note:', oldVal)
      console.log('saving note:', this.content)
      localStorage.setItem('content', this.content)
    },
  },
})