Vue.js

1.0  MVVM

MVVM(Model-View-ViewModel)

Model(模型):由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据

View(视图):即用用户界面

ViewModel(视图模型):用于链接匹配模型和视图的专用模型

2.0  CDN

CDN,是指内容分发网络。通过构建分布式的内容分发网络，用户可以就近获取所需内容，这样可以提高用户访问的响应速度和命中率。有些提供商会免费提供常用框架的JavaScript文件的CDN服务，但是在商业化应用的过程中，需要注意版权问题。使用CDN方式引入Vue.js文件后，就不需要在本地部署该文件了。

3.0  键值对

任何一个对象的成员要么是数据成员，要么是函数成员。但无论是数据成员还是函数成员，在本质上都是一个"键-值"对，"键"是这个成员的名字，"值"是这个成员的内容。对于函数成员来说，"键"是函数的名字，"值"是函数的地址。因此，只要能够描述一个函数的名字和这个函数将要执行的操作就可以了。

4.0  字符串模块

字符串模块是ES6新增的一种语法，它以"`"符号开头和结尾，代表了普通字符串开头和结尾的单引号和双引号。使用模块字符串的另外一个优点是：可以跨行，直接产生多行文本。

5.0  生命周期钩子

1.beforeCreate():在实例创建之前调用。

2.created():在实例创建之后调用，此时尚未开始DOM编译。

3.beforeMount():在挂载开始之前调用

4.mounted():在实例被挂载后调用，这时页面的相关DOM节点已被新创建的vm.$el替换。它相当于JavaScript中的window.onload()方法。

5.beforeUpdate():每次页面中有元素需要更新时，在更新前就会调用beforeUpdate()钩子函数。

6.updated():每次页面中有元素需要更新时，在更新完之后就会调用updated()钩子函数

7.beforeDestroy():在销毁实例前调用，此时实例仍然有效。

8.destroyed():在实例被销毁之后调用。

6.0  数组侦听

当通过下列方法操作或更改数组时，变化可以被侦听到。这些方法包括:

push(): 尾部添加

pop():  尾部删除

unshift():头部添加

shift():头部删除

splice():删除,添加，替换

sort():排序

reverse():逆序

类似地，数组还会经常用到另一些方法，例如 filter() concat()  slice()等。它们不会变更原始数组，而是返回一个新数组。当使用这些非变更方法时，可以用新数组替换旧数组，这样也可以侦听器感知到数组的变化

由于受早期版本的JavaScript(ES5)的限制，在Vue2中并不能侦听到数组的某些变化,包括下列两种情况。

直接通过下标的方式来修改数组，例如vm.items[5] =new Value。

直接通过修改数组的length属性的方式来修改数组，例如vm.items.length =10

还有一种情况就是数组元素是一个对象，而我们改变的是数组元素的一个熟悉,例如vm.array[3].x=10

对于直接修改数组元素的情况，可以使用Vue.js提供的$set()方法。例如 vm.$set(vm.array[3],'3',10)。

如果使用了push()等标准的数组操作方法，那么可以被侦听到。

如果彻底替换为一个新的数组，那么可以被侦听到。

如果直接修改数组的元素，那么无法被侦听到，解决方法是使用$set()方法修改元素的内容，只有这样才能被侦听到。

如果侦听器已通过"{deep:true}" 设置为"深度侦听"的，那么当修改对象元素的属性时，可以被侦听到。但是，如果是元素本身被修改，那么依然无法被侦听到。

如果侦听器没有被设置为"深度侦听"的，那么对象的属性可以用$set()方法来修改，从而实现此修改被侦听到的目的

不要通过length属性来修改数组长度，而改用其他标准方法显示数组长度的变化

7.0  事件对象中的常见属性

标准DOM	类型	读/写	说明
altKey	Booleam	读写	按下Alt键则为true，否则为false
button	Integer	读写	鼠标事件，值对应按下的鼠标键
cancelable	Booleam	只读	是否可以取消事件的默认行为
stopPropagation()	Function	N/A	阻止事件向上冒泡
clientX	Integer	只读	鼠标在客户端区域(当前宽口)的水平坐标，不包括工具栏，滚动条等
clientY	Integer	只读	鼠标在客户端区域(当前宽口)的垂直坐标，不包括工具栏，滚动条等
ctrlKey	Booleam	只读	按下Ctrl键则为true，否则为false
relatedTarget	Element	只读	鼠标正在进入/离开的元素
charCode	Integer	只读	按下按键的Unicode值
keyCode	Integer	读写	按下按键时为0，其余情况下为按下按键的数字代号
detail	Integer	只读	鼠标按键的单机次数
preventDefault()	Function	N/A	阻止事件的默认行为
screenX	Integer	只读	鼠标相对于屏幕的水平坐标
screenY	Integer	只读	鼠标相对于屏幕的垂直坐标
shiftKey	Booleam	只读	按下Shift键则为true,否则为false
target	Element	只读	引起事件的元素/对象
type	string	只读	事件的名称

8.0  事件修饰符

.stop

.stop事件修饰符会自动调用stopPropagation()方法，从而阻止事件的继续传播。

.self

.self事件修饰符的作用是，仅当一个事件的目标是当前元素自身时，才会触发处理函数。也就是说，内部的子元素不会触发这个事件。也就是说，只有单击的对象是绑定的对象本身(外层div)时，才会触发事件。如果是从内层对象(内层div) "冒泡"上来的话，则不会触发事件。

.capture

.capture事件修饰符的作用是改变事件流的默认处理方式，从默认的冒泡方式改为捕获方式。当没有.capture事件修饰符的时候，如果单击内层div，就会先弹出一个提示框，显示"内层div被单击"，之后再弹出另一个提示框，显示"外层div被单击"。也就是说，默认情况下先触发内层元素的事件，并在冒泡之后才触发外层元素的事件。

.once

.once事件修饰符的含义是只触发一次事件。如果给外层div增加.once事件修饰符，那么每次刷新页面以后，只有第一次才会弹出提示框，此后单击时都不会再弹出提示框。

.prevent

在添加了.prevent事件修饰符以后，程序就会自动调用event.preventDefault()方法，从而取消事件触发的默认事件

9.0  v-model修饰符

v-model指令在绑定的时候，也可以指定修饰符，以实现一些特殊的约束或效果。

.lazy ：

对于文本输入框，默认情况下，v-model指令在每次input事件触发后，都会对文本输入框的值与数据进行同步。通过添加lazy修饰符，可以将上诉行为改为在change事件触发之后进行同步，这样就只有在文本框失去焦点后才会改变对应的模型属性的值，因此称为"惰性"绑定。

.number

如果希望用户输入的值能够自动转为数值类型，那么可以给v-model指令添加.number修饰符。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给v-model指令添加.trim修饰符。

10.0  key属性的作用

Vue.js会尽可能高效地渲染元素，并且通常会复用已有元素而不是重新构造DOM结构。这样做除了能够提高性能之外，还有其他一些好处。但是，在实际项目中，这样做不一定符合实际需求。如果我们希望在更换登陆方式以后，文本框中的内容也随之清除。Vue.js提供了一种方法来告诉渲染引擎"这两个元素是完全独立的"，即添加一个具有唯一值的key属性。

11.0   v-if和v-show的区别

Vue.js还提供了一个与v-if类似的指令v-show，v-show也可以用于根据条件展示元素，且用法和v-if一致。它们的区别在于，v-if操作的是DOM元素，而v-show操作的是元素的CSS属性(display)属性。此外，v-show不能与v-else配合使用。v-if运行后DOM根本就不存在，但v-show有DOM但不显示.

v-if是"真正"的条件渲染，因为它会确保在切换过程中条件块内的事件侦听器被销毁和重建

v-if是"惰性"的，即如果在进行初始渲染时条件为假，则不会渲染，直到条件第一次变为真时，才开始渲染相应的DOM结构.

v-show相对简单，不管初始条件是什么，元素总是会被渲染，并且还会基于CSS的display属性进行切换

通常，v-if的切换开销更大，而v-show的初始渲染开销更大。因此，如果切换非常频繁，建议优先使用v-show；而如果在运行时条件很少改变，则使用v-if效果较好。

12.0 v-for和v-if一同使用的注意事项

v-for的优先级比v-if高，v-for每次迭代时都会执行一次v-if，这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中队列表进行过滤，以减少视图中的判断。在这种情况下，可以使用计算属性，在数据模型中事先做好处理，然后将符合条件的结果v-if显示出来。

13.0  父子组件之间传递数据的方法

组件时Vue.js开发中的基本单元，组件之间不可避免地需要传递数据。

从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现。

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

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

子组件在通过props得到从父组件传来的数据之后，应该复制出本地副本，或者通过计算属性的方式使用这些数据，而不应该直接修改props属性的值

从子组件向父组件传递数据

如果子组件需要向父组件传递数据，就需要使用事件机制来实现。总结起来就是"从上向下通过属性传递数据，从下向上通过事件传递数据"。

当子组件向父组件传递数据时，需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传来的数据。

14.0  单页应用

单页应用的说法是在JavaScript和AJAX技术比较成熟以后才出现的，指的是通过浏览器访问一个网站时，只需要加载一个人口页面，此后显示的内容和数据都不会再刷新浏览器页面。

	单页应用	多页应用
页面结构	一个页面+许多模块的组件	很多完整页面
体验效果	页面切换流畅	页面切换慢，网速不好的时候，体验效果不好
资源文件	公共资源只需要加载一次	每个页面都要加载一次公共资源
路由模式	可以使用hash，也可以使用history	使用普通链接进行跳转
适用场景	对体验效果和流畅度有较高要求的应用不利于SEO	适用于对SEO有较高要求的应用
内容更新	相关组件的切换，仅局部更新	整体HTML的切换
相关成本	前期开发成本较高，后期维护较为容易	前期开发成本低，后期维护比较麻烦，可能一个功能就需要改很多地方