vue官网总结

1.Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
2.在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)
3.只有当实例被创建时就已经存在于 data 中的属性才是响应式的，vm.b = 不会触发视图的更新。
4.Object.freeze()方法 ：Object.freeze()方法接收一个参数，如果此参数是一个对象，则此方法把这个对象冻结，
如果是其他类型则不会报错，无影响。被冻结的对象不能修改、添加、删除其属性或者属性值
5.每个 Vue 实例在被创建时都要经过一系列的初始化过程——
例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
6.生命周期钩子的 this 上下文指向调用它的 Vue 实例。
7.不要在选项属性或回调上使用箭头函数（选项属性：指vue实例的属性）因为箭头函数并没有 this，
this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致
Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误

8.（unknow）Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML
所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少

9. v-once 指令:能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

10.你的站点上动态渲染的任意 HTML (v-html)可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，
绝不要对用户提供的内容使用插值
11.Mustache 语法=vue中的 {{ }}双大括号

12.修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>

13.对于任何复杂逻辑，你都应当使用计算属性。
计算属性缓存 vs 方法：
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
当需要在数据变化时执行异步或开销较大的操作时，建议使用watch属性

14.表达式结果的类型除了字符串之外，还可以是对象或数组
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
15.当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

16.Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

17.一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

18.你也可以用 v-for 来遍历一个对象的属性。
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
19.Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组

20.由于 JavaScript 的限制，Vue 不能检测以下数组的变动：（视图不会刷新）
1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
解决办法：Vue.set(vm.items, indexOfItem, newValue)或者vm.items.splice(indexOfItem, 1, newValue)

21.对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。（已经实例的data属性，可以响应，通过实例外添加的data属性，无法响应）
但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

22.Vue.set( target, propertyName/index, value )
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

23.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。（备注：深拷贝）
常用于：复制对象；对象合并；深拷贝
const target = { a: 1, b: 2 };

const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 } //对象合并--属性被后续参数中具有相同属性的其他对象覆盖。
const copy = Object.assign({}, obj); //常用复制对象

24.不推荐在同一元素上使用 v-if 和 v-for
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中
2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。

25.is属性：根据HTML规范，<table>、<ul>、<ol>、<select>等元素只能包含特定元素。如果在这些标签中放入其他标签或组件，会导致报错
为了使vue的组件能加载到这些特定标签内，引入了is 属性
<tbody>
<tr is="row"></tr> //row是vue自定义的一个组件
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
26.有时需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法，Vue.js 为 v-on 提供了事件修饰符
事件修饰符：
.stop
.prevent
.capture
.self
.once
.passive

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

28.v-slot 只能添加在 <template> 上 v-slot可以用#代替

29.Vue动态组件：让多个组件使用同一个挂载点，并动态切换，这就是动态组件。
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件
is属性值可以是：已注册组件的名字，或一个组件的选项对象

30.我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。
这会帮助你避免和当前以及未来的 HTML 元素相冲突。
vue风格指南

31.全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，
全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。
这造成了用户下载的 JavaScript 的无谓的增加。

32.Babel 是一个 JavaScript 编译器。
主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

33.DOM模板：如template:"<h5>123</h5>"
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
<blog-post v-bind:is-published="false"></blog-post> prop:[isPublished]

字符串模版： `你好 ${str}` （比字符串拼接省事很多）=‘你好’+str ；在vue中 <script type="text/x-template" id="tr">

如果我们从以下来源使用模板的话，这条限制(个别标签内只能放置固定标签)是不存在的：

1.字符串 (例如：template: '...')
2.单文件组件 (.vue)
3.<script type="text/x-template">

34.export default 和 export 区别：
1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，export default则不需要
4.
(1) 输出单个值，使用export default
(2) 输出多个值，使用export

35.注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

36.组件的单向数据流：（会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解）
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
解决办法：1.将prop的值赋值给data
2.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性

37.对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。
所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！
庆幸的是，class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：

38.组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。

39.inheritAttrs:true 是允许组件绑定的未注册属性渲染到组件根节点上的,根节点会自动带有未注册的属性,(未注册属性：没有prop定义的)
inheritAttrs:false 是默认根节点不会继承未注册的属性，你可以通过 $attrs来控制那个节点能显示未注册的属性
heritAttrs: false 和 $attrs，你就可以手动决定这些 attribute 会被赋予哪个元素。在撰写基础组件的时候是常会用到的
注：inheritAttrs: false 选项不会影响 style 和 class 的绑定。

40.vm.$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，
并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
vm.$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

41.v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，
所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此，我们推荐你始终使用 kebab-case 的事件名。

42.一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。
model 选项可以用来避免这样的冲突：

43..sync 修饰符：
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。也就是想实现在子组件中改变值，父组件中的值也能随着变化
组件内触发的事件名称以“update:value”命名，相应的上述info组件改为 :value.sync="myValue"

44.$parent 属性可以用来从一个子组件访问父组件的实例。
它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

45.$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。
这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

46.在vue中如何处理内存泄漏的
1.如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要在beforeDestroy 中做对应解绑处理
2.如果在mounted/created 钩子中使用了第三方库初始化，需要在beforeDestroy 中做对应销毁处理
3.如果组件中使用了定时器，需要在beforeDestroy 中做对应销毁处理
4.模板中不要使用表达式来绑定到特定的处理函数，这个逻辑应该放在处理函数中
5.如果在mounted/created 钩子中使用了$on，需要在beforeDestroy 中做对应解绑($off)处理
6.某些组件在模板中使用 事件绑定可能会出现泄漏，使用$on 替换模板中的绑定

解决办法：1：beforeDestroy 中进行销毁 这里有两个潜在的问题：
1.1它需要在这个组件实例中保存这个 picker，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，
但是它可以被视为杂物。
1.2我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化地清理我们建立的所有东西。(意味着建立代码和清理代码应该同时进行)
2：优化：使用this.$once
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
47.注意 Vue 的事件系统不同于浏览器的 EventTarget API。
尽管它们工作起来是相似的，但是 $emit、$on, 和 $off 并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。

48.内联模板：当 inline-template 这个特殊的 attribute 出现在一个子组件上时，
这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。（template的内容可以直接写到插槽的位置）
不过，inline-template 会让模板的作用域变得更加难以理解。
所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 <template> 元素来定义模板。

49.X-Template：另一个定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去
这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。

50.如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。
51.vue数组或对象的变更检测注意事项：
数组：1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
对象：由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除，
但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

52.$forceUpdate 强制更新 ：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

53.过渡 & 动画 尚未看
54.自定义指令：有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

55.渲染函数：render render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement
createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数。
1.一个 HTML 标签字符串
2.一个包含模板相关属性的数据对象你可以在 template 中使用这些特性
3.子虚拟节点 (VNodes)，由 createElement() 构建而成
render: function (createElement) {
return createElement(
'h' , // 标签名称
this.$slots.default // 子节点数组
)
},
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

56.虚拟 DOM的理解 （VNode）
Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM
请仔细看这行代码：
return createElement('h1', this.blogTitle)
createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。
它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，
包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。
“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
组件树中的所有 VNode 必须是唯一的

57.当一个函数返回一个对象时，我们称之他为 工厂函数(factory function)。

58.map函数并不会遍历数组中没有初始化或者被delete的元素（有相同限制还有forEach, reduce方法）
Array.apply(null, {length: 20}).map(function(val, index){
console.log(index); // 循环20次
});
// 未被初始化的数组
Array(20).map(function(val, index){
console.log(index); // 不会被执行
});
Array.from({length: 20}) = Array.apply(null, {length: 20})
Array(2) 等价于[,,]，不等价于[undefined, undefined]

59.vue的数据劫持是通过Object.defineProperty()来对对象的setter和getter属性进行操作,
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
Object.defineProperty是Es5中无法shim的特性：
shim可以将新的API引入到旧的环境中，而且仅靠就环境中已有的手段实现。
Object.defineProperty这个特性是无法使用低级浏览器中的方法来实现的，所以Vue不支持IE8以及更低版本的浏览器

60.函数式组件：
1.不维护响应数据
2.无钩子函数
3.没有instance实例
所以在组件内部没有办法像传统组件一样通过this来访问组件属性
4.渲染开销低
参数：functional：true;使用render函数传递一个context参数；props组件内部可以不用定义，使用context.props.attribute.
正是因为函数式组件精简了很多例如响应式和钩子函数的处理，因此渲染性能会有一定的提高，所以如果你的业务组件是一个纯展示且不需要有响应式数据状态的处理的，
那函数式组件会是一个非常好的选择。
61.Shift+Escape 查看任务管理器
62.提前声明所有的响应式属性，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。否则Vue 将警告你渲染函数正在试图访问不存在的属性
63.async function 用来定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。
如果你在代码中使用了异步函数，就会发现它的语法和结构会更像是标准的同步函数。
64.Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。
为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用
65.什么情况下我应该使用 Vuex？
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex
一个简单的 store 模式就足够您所需了。
66.store模式：
组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 Flux 架构。
这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。
说了一圈其实又回到了 Vuex
如果没有使用stroe模式，调试将会变为噩梦。任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录
67.服务端渲染 ---暂时未看
假设你已经熟悉 Vue.js 本身，并且具有 Node.js 和 webpack 的相当不错的应用经验。如果你倾向于使用提供了平滑开箱即用体验的更高层次解决方案，你应该去尝试使用 Nuxt.js
68.vue与reat的对比：
1.vue的数据劫持是通过Object.defineProperty()来对对象的setter和getter属性进行操作，Object.defineProperty()不支持ie8以下浏览器
（实际ie8还存在很多问题，实际完全兼容为ie9）
而react通过Knockout可以支持到ie6
2.都使用了 Virtual DOM
3.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
4.将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
5.react比Vue具有更丰富的生态系统。---开源社区第三方库的软件包，这些软件包使用 React 补充其它功能，以便提供完整的应用程序解决方案。
6.运行性能：React 和 Vue 都是非常快的，所以速度并不是在它们之中做选择的决定性因素
7.在 React 中，一切都是 JavaScript，在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。
在 Vue中， Vue 也提供了渲染函数，甚至支持 JSX。

使用 JSX 的渲染函数有下面这些优势：
1.你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
2.开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。
vue官网：我们可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。
这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。
8.vue设置样式：Vue 设置样式的默认方法是单文件组件里类似 style 的标签。加上scope实现组件内的css不污染
react设置样式：React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)

69.vue与angularjs的对比：
Vue 的一些语法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因为 AngularJS 是 Vue 早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。
1.Vue.js 是一个更加灵活开放的解决方案，它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 AngularJS 制定的规则，这让 Vue 能适用于各种项目。
我们知道把决定权交给你是非常必要的。
2.AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流(虽然也能实现双向绑定)。这使应用中的数据流更加清晰易懂。
3.在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元——有自己的视图和数据逻辑。
在 AngularJS 中，每件事都由指令来做，而组件只是一种特殊的指令。
4.Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查，使用数据劫持（object.defineProperty对对象的setter和getter属性进行操作）
在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。
并且，如果一些 watcher 触发另一个更新，脏检查循环 (digest cycle) 可能要运行多次。
Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。
70.Knockout
Knockout 是 MVVM 领域内的先驱，并且追踪依赖。
它的响应系统和 Vue 也很相似。它在浏览器支持以及其他方面的表现也是让人印象深刻的。它最低能支持到 IE6，而 Vue 最低只能支持到 IE9。（react通过他实现支持ie6）
71.Vue的组件类型
1.单文件组件 ---.vue文件中的组件，1个.vue文件即一个组件
2.单列组件 ---组件内部没有props，为特制的组件
3.普通组件 --常用组件
4.异步组件 -- 组件的按需加载
5.动态组件 --组件keep-alive
6.函数式组件 --没有响应式数据,也没有实例,没有 this 上下文.
7.render(jsx)组件 --javascript式html

模板类型：
1.dom模板(html模板) <component>666</component>
2.字符串模板 template:'666'
3.render函数模板 render:function()

72.Vue风格指南：
1.组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。
2.组件的 data 必须是一个函数。
3.Prop 定义应该尽量详细。在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。
4.总是用 key 配合 v-for。在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。
5.永远不要把 v-if 和 v-for 同时用在同一个元素上。 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中
6.为组件样式设置作用域（scoped）,不管怎样，对于组件库，我们应该更倾向于选用基于 class 的策略而不是 scoped attribute。
解释：对于组件的样式尽可能的使用class形式（使用CSS命名规范——BEM思想或者CSS Modules）,而不是scoped attribute
7.使用模块作用域保持不允许外部访问的函数的私有性。例如：模块内部的方法A需要暴露出去，使用publicMethod，如果这个A方法的实现是通过B方法达成的，B方法不应该暴露出去，
应该使用myPrivateFunction()--私有方法。
推荐把这两个前缀结合为 $_，作为一个用户定义的私有属性的约定，以确保不会和 Vue 自身相冲突。
1-7是风格要求是必要的。
8.只要有能够拼接文件的构建系统，就把每个组件单独分成文件。---使用.vue文件组件代替Vue.componet() 原因：见单文件组件的介绍
9.单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
10.应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
11.只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。 --单例组件名
单例组件：这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。
如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。
12.和父组件紧密耦合的子组件应该以父组件名作为前缀命名
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
13.在.vue文件中的组件应该是自闭合的，在.html中的组件不能这样做。 自闭合：<my-component/>
14.我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
15.多个 attribute 的元素应该分多行撰写，每个 attribute 一行。
16.vue路由懒加载的意义：
16.组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
17.应该把复杂计算属性分割为尽可能多的更简单的属性。
18.指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。
19.在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
73.BEM规范 ：BEM方法是一种css类名的命名规范，通过定义命名空间解决域的问题来使css可维护。BEM 分别代表着：Block（块）、Element（元素）、Modifier（修饰符）
.[Block 块]__[Element 元素]--[Modifier 修饰符]
.m-search__button--disabled{} .m-serch代表块（m为前缀），_button 代表元素，--disabled代表修饰符

74.VueX
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

75.es6展开运算符
可将数组或对象里的数据提取出来（原先是什么类型，提取出来就是什么类型）
例如: let arr=[1,2,3]; let arr1=["1",...arr,"3"] ---- ["1",1,2,3,"3"]
...arr=1,2,3 (原先为数字型)
let obj={a:1,b:2}; let obj1={c:4,...obj,d:5} ---{c:4,a:1,b:2,d:5}
...obj= a:1,b:2
computed:{
...mapState(["depositList"]) //展开运算符 mapState(["depositList"])返回一个对象
}
76.Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。
就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用
77.Vuex 中，mutation 都是同步事务：
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，
或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
78.Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
载荷方式(payload):你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
79.你在组件中使用 this.$store.dispatch('xxx') 分发 action，
或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store)
80.箭头函数，如果只有一个表达式，可以省略return
const add = (a, b) => a + b; == const add = (a, b) => { return a + b; };
81.vuex中的state不要写成Array，Object等 ，写成[] , {}
vuex中的state的改变会导致computer的重新计算和页面的渲染
Array类型会导致state的值是个类数组，无法使用数组的一些方法
如果无法确定state的值类型，可以写成空值。（vuex会加载2次getters方法，目前不知道原因）
类数组转数组的方法：Array.prototype.slice.call(state.useData) state.useData为类数组
82.Vuex 使用单一状态树，这可以让我们能够直接地定位任一特定的状态片段，
在调试的过程中也能轻易地取得整个当前应用状态的快照。需要注意，单状态树和模块化并不冲突！
83.当我们的组件遇到多个组件共享状态，单向数据流的简洁性很容易被破坏…
因此我们将组建的共享状态抽取出来，以一个全局单例模式管理
84.老版本的vue-cli 创建：
npm install -g vue-cli
vue init webpack my-project
新版本的vue-cli的创建
npm install vue -g
npm install -g @vue/cli
vue create my-project
85.vue-cli打包发布：
npm install -g serve
serve dist
86.对象解构赋值--展开运算符

87.arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
解析:数组的reduce方法，包含2个参数，
1. 接收一个回调函数，回调函数包含四个个参数
1.accumulator参数 累计值
2.currentValue参数 当前值
3.[, index[, array]] [,代表参数可选 index参数：数组中正在处理的当前元素的索引
4.array 可选 调用当前reduce（）的数组
2.initiaValue参数 可选

88.Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用

渐进式概念？
提供给用户足够的选择，没有很多强制性的要求

自底向上逐层应用
由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能

89.Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5（es5） 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

90.在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

91.vue-cli提供热重载：就是页面代码每次改动，不需要手动去刷新页面，可自动刷新代码更新的内容

92.vue data中图片的地址引用 使用require 或者使用import 引入

93.JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ES推出了自己的模块化系统ES Module。

94.ES Module：ES Module模块采用export和import关键字来实现模块化，export负责将模块内的内容导出
import负责从其他模块导入内容，采用ES Module将自动采用严格模式：use strict

现在大部分的开发都写es6的语法了，借助babel（背波）进行转换兼容。
babel:是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，
以便能够运行在当前和旧版本的浏览器或其他环境中

95.运行时版本和完整版的区别

在创建一个编译模时，vue.js为我们提供了一套模板，使我们能够使用v-if，v-for等这样的语法来编写html。
但实际上浏览器是无法识别v-if，v-for这种语法，而是需要通过一个模板编译器来将这样的模板转换为浏览器认识的html。

所以vue.js完整版需要编译器将template模板字符串编译成JavaScript渲染函数的代码，从而实现将html字符串插入到页面的html中实现渲染。
在实际环境中，应当使用运行时版本，原因是因为vue.runtime.js的体积更小（30%左右），在用户网络不好的情况下，能够更快的加载
vue.runtime.js和vue.js的区别在于:vue.runtime.js不包含模板编译器，

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。
你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。 （vue-loader起编译器的作用）

96.Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

97.vue代码中，你改变了data的值，页面的数据发生了变化。但是我们并没有直接触碰到
Dom,所有的dom操作都是由vue自己处理的，所以编写者只需要关注逻辑层即可

98.vue 组件实现了 Slot API 与 is attribute

99.Vue 组件不需要任何 polyfill

Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能，或模拟 CSS 实现 rem 单位的支持

100.Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化

101.Vue无法从根数据对象上添加响应式 property。
因此推荐在创建实例之前，就声明所有的根级响应式 property。
解析：1.没有通过data声明的数据对象它不是响应式的
2.为已有data数据对象赋予新的属性，也不是响应式（vue无法检测对象属性的添加和删除）
解决办法：可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

102.以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。
你可以使用例如 vm.$data._property 的方式访问这些 property。
即：当你定义的data数据对象名为 property ，你可以使用vm.property 去访问这个data数据对象（vue 实例代理了 data 对象上所有的 property）
但，当你定义的data数据对象名为 _property或者$property 时，你就不能使用vm._property去访问到这个data数据对象
你只能使用vm.$data._property访问

103.当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，
我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

104.所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

105.父组件向子组件传数组或者对象时，子组件修改传过来的数组或者对象时，父组件的数据也相应的修改。

原因：JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，
在子组件中改变这个对象或数组本身将会影响到父组件的状态（官网说明）

解决办法：1、如果能传单独的值，就不要传数组或者对象。

2、必须传数组或者对象，就用 JSON.parse(JSON.stringify(data ))这种方法处理一下要传的数据。

106.带有默认值的对象或者数组必须从一个工厂函数获取
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},

107.注意那些 prop 会在一个组件实例创建之前进行验证，
所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
解析：意味着prop里的validator 和default 的值不能使用data和computed里的数据

108.一个非 prop 的 attribute 传向一个组件，但是该组件并没有相应 prop 定义的 attribute时
这些 attribute 会被添加到这个组件的根元素上
而如果根元素的attribute 和父组件传入attribute 相同时，
对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值
但是对于class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，
即class和style是例外

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false
注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

inheritAttrs: false尤其适合配合实例的 $attrs property 使用，
该 property 包含了传递给一个组件的 attribute 名和 attribute 值，
有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些 attribute 会被赋予哪个元素。在撰写基础组件的时候是常会用到的

109.Object.freeze() 方法可以冻结一个对象。
一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，
不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。
此外，冻结一个对象后该对象的原型也不能被修改

Object.freeze()会阻止修改现有的 data property，也意味着响应系统无法再追踪变化

110.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，
需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

111. created 钩子可以用来在一个实例被创建之后执行代码
生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，
经常导致 Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function 之类的错误

112.Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
所有 Vue.js 的模板都是合法的 HTM

解析：template选项中插入html

113.Mustache 语法 即{{}} 双大括号

114.通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
但请留心这会影响到该节点上的其它数据绑定
v-once 指令只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
这可以用于优化更新性能

115.注意，你不能使用 v-html 来复合局部模板（将组件内容放置在v-html），因为 Vue 不是基于字符串的模板引擎。
反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。
请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

116.模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。
你不应该在模板表达式中试图访问用户定义的全局变量。

(尚未理解)
即：{{msg+1}} ,msg+1 只能访问 Math或Date的全局变量，不能访问var msg=55

117.从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，
那么这个绑定将等价于 v-bind:href，如果attributeName的值变化为"click",则等价于v-bind:click

118.在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，
因为浏览器会把 attribute 名全部强制转为小写:

在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作

解析：如果你在html文件里写vue代码，应当避免使用大写字符来命名动态参数，
因为浏览器会把 attribute 名全部强制转为小写
而如果在.vue文件里写，就不会有这种问题

119.修饰符 .prevent 是拦截默认事件,.passive是不拦截默认事件
<form v-on:submit.prevent="onSubmit">...</form>