vue/react/webpack/node/模块化

VUE

Vue的执行流程，什么时候更新，代码的输出结果

理解

渐进式的JS框架。
易用，灵活，高效
构建用户界面的声明式框架，只关心图层，不关心是如何实现的

computed,watch

computed（计算属性）
对于任何复杂逻辑，你都应当使用计算属性

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: {
  message: 'Hello'
},
computed: {
  // 计算属性的 getter
  reversedMessage: function () {
    // `this` 指向 vm 实例
    return this.message.split('').reverse().join('')
  }
}
})

computed vs methods

某种程度上效果相同，区别在于缓存与否

computed属性:
计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数

方法使用：
不进行缓存；
每次触发渲染时都要再次执行函数

<p>Reversed message: "{{ reversedMessage() }}"</p>

watch（侦听器）
更通用的方式来观察和响应 Vue 实例上的数据变动

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器；
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

 watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

watch（侦听属性）vs computed

相同： computed和watch都起到监听/依赖一个数据，并进行处理的作用

异：它们其实都是vue对监听器的实现，只不过computed主要用于对同步数据的处理，watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。

能用computed的时候优先用computed，避免了多个数据影响其中某个数据时多次调用watch的尴尬情况。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

改为computed:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Vue-Router(路由)

SPA（单页应用）的路径管理器，WebApp的链接路径管理系统

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换

使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

Vue-Router两种模式

Hash（默认）
url中的#符号（不是散列值）,不被包含在http请求

使用 URL 的 hash 来模拟一个完整的 URL，于是当 hash 改变时，页面不会重新加载；
hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页；
每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置