computed 中的属性名和 data 中的属性名不可以相同的原因
不能同名，因为不管是 computed 属性名还是 data 数据名还是 props 数据名都会被挂载在 vm 实例上，因此这三个都不能同名。
if (key in vm.$data) {
warn(`The computed property "${key}" is already defined in
data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
warn(`The computed property "${key}" is already defined as
a prop.`, vm)
}
Vue 的计算属性
在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式，好处：使得数据处理结构清晰
- 依赖于数据，数据更新，处理结果自动更新
- 计算属性内部 this 指向 vm 实例
- 在 template 调用时，直接写计算属性名即可
- 常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据
- 相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算
Vue 中 key 值的作用
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM
Vue-loader 的使用用途
Vue-loader 会解析文件，提取出每个语言块，如果有必要会通过其他 loader处理，最后将他们组装成一个 commonjs 模块；module.exports 出一个 Vue.js 组件对象
< temlate> 语言块
- 默认语言：html
- 每个.Vue 文件最多包含一个< template>块
- 内容将被提取为字符串，将编译用作 Vue 组件的 template 选项
< script>
- 默认语言：JS（在监测到 babel-loader 或者 buble-loader 配置时，自动支持 ES2015）
- 每个.Vue 文件最多包含一个< script>块
- 该脚本在类 CommonJS 环境中执行（就像通过 webpack 打包的正常 JS 模块）。所以你可以 require()其他依赖。在 ES2015 支持下，也可以使用 import跟 export 语法
- 脚本必须导出 Vue.js 组件对象，也可以导出由 Vue.extend()创建的扩展对象；但是普通对象是更好的选择
< style>
默认语言：css
- 一个.Vue 文件可以包含多个< style>标签
- 这个标签可以有 scoped 或者 module 属性来帮助你讲样式封装到当前组件；具有不同封装模式的多个< style>标签可以在同一个组件中混合使用
- 默认情况下，可以使用 style-loader 提取内容，并且通过< style>标签动态假如文档的< head>中，也可以配置 webpack 将所有的 styles 提取到单个CSS 文件中
自定义块
可以在.Vue 文件中添加额外的自定义块来实现项目的特殊需求；例如< docs>块；Vue-loader 将会使用标签名来查找对应的 webpack loaders 来应用到对应的模块上；webpack 需要在 Vue-loader 的选项 loaders 中指定；Vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模板语言，通过设置语言块的 lang 属性：
<style lang='sass'>
/*sass*/
</style>
