1、Vue 表单修饰符（lazy,number,trim）
| 修饰符 | 作用 |
|---|---|
| .lazy | lazy 修饰符修改 input 触发为 change 触发 |
| .number | number 修饰符可以将返回结果自动转化为 Number 类型，否则就是 String 类型 |
| .trim | trim 过滤首尾空格符 |
1、 lazy:使用了这个修饰符将会从“input 事件”变成 change 事件进行同步
<div id="example">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
new Vue({
el:"#example",
data:{
message:""
}
})
如在 input 上输入 '123456' 这时光标还没有失去焦点 p 标签是不会显示内容的
要在 input 标签失去焦点后 p 标签上才会显示出 123456 的内容
2、number
首先明白这个 number 并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型
举个例子，如果用户输入 300，data 中绑定的其实是'300'(string)，添加 number 指令后可以得到 300(number)的绑定结果。
而如果用户输入的不是数字，这个指令并不会产生任何效果。
v-model.number="message"
3、 trim
trim 可以用来过滤前后的空格
v-model.trim="message"
它会限制用户的输入 不会让用户在开始和结束输入空格符
2、vue 指令中的 v-once
v-once 在日常开发中用的很多，
只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
常见用法如下：
当修改 input 框的值时，使用了 v-once 指令的 p 元素不会随之改变，而第二个 p 元素时可以随之改变的
<div id="app">
<p v-once>{{msg}}</p> //msg不会改变
<p>{{msg}}</p>
<p>
<input type="text" v-model = "msg" name="">
</p>
</div>
<script type="text/javascript">
let vm = new Vue({
el : '#app',
data : {
msg : "hello"
}
});
</script>
一开始两个 p 标签显示的都是 hello 内容 如果在 input 中输入其他内容 那么第一个 p 标签的内容并不会受到影响 只有第二个标签会发生改变
3、Object.defineProperty()的理解
对象是由名／值对组成的无序的集合。
定义对象可以使用构造函数或字面量的形式：
var obj = new Object();
obj.name = 'sss';
我们还可以使用 Object.defineProperty 定义新属性或修改原有的属性。
语法：
Object.defineProperty(obj, prop, descriptor)
参数说明：
obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性
给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。
数据描述
当修改或定义对象的某个属性的时候，给这个属性添加一些特性：
var obj = {test:'sss'}
Object.defineProperty(obj,'test',{
value:任意类型的值， //不设置该属性 ，默认为undefined
configurable: true | false, // 是否可以delete删除目标属性或者是否可以再次修改属性的特性
enumerable: true | false, //是否可以被枚举（for..in |Object.keys()）
writable: true | false //是否可以被重写
})
存取器描述
var obj = {};
var initValue = 'hello';
Object.defineProperty(obj, 'newKey', {
get:
function() {
return initValue;
} | undefined, //不设置get方法，则默认undefined
set:
function(value) {
initValue = value;
} | undefined,
configurable: true | false,
enumerable: true | false
});
ps:当使用了 getter 或 setter 方法，不允许使用 writable 和 value 这两个属性
4、vue 在哪些情况下会执行生命周期中的销毁这个钩子？
组件被销毁时
<demo v-if="hasDemo"></demo>
那么将 hasDemo 由 true 改为 false 时，会触发 Demo 组件的销毁钩子。
注意 v-show 指令不销毁元素而只是隐藏，故不会触发这个钩子。
5、在组件中怎么访问到根实例？
- 通过 this.$root
6、<template></template>有什么用？
- 当做一个不可见的包裹元素，减少不必要的 DOM 元素，整个结构会更加清晰
7、函数式组件
<template functional>
<div class="cell">
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
函数式组件，即无状态，无法实例化，内部没有任何生命周期处理方法，非常轻量，因而渲染性能高，特别适合用来只依赖外部数据传递而变化的组件。
函数式组件比普通组件性能更好，缺点是定义的数据没有响应式。
8、vue 中组件 name 的作用
我们在写 vue 项目的时候会遇到给组件命名
这里的 name 非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的
1.当项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
举个例子：
我们有个组件命名为 detail,其中 dom 加载完毕后我们在钩子函数 mounted 中进行数据加载
export default {
name:'Detail'
}，
mounted(){
this.getInfo();
}，
methods:{
getInfo(){
axios.get('/xx/detail.json',{
params:{
id:this.$route.params.id
}
}).then(this.getInfoSucc)
}
}
因为我们在 App.vue 中使用了 keep-alive 导致我们第二次进入的时候页面不会重新请求，即触发 mounted 函数。
有两个解决方案,一个增加 activated()函数,每次进入新页面的时候再获取一次数据。
还有个方案就是在 keep-alive 中增加一个过滤，如下图所示：
<div id="app">
<keep-alive exclude="Detail">
<router-view />
</keep-alive>
</div>
exclude 就是排除 name 为 Detail 的组件不进行缓存 那这样就会每次进页面都会进行数据请求了
9、vue diff 算法详解
10、$attrs及$listeners 属性使用教程
Vue v2.4 中新增的$attrs及$listeners 属性使用教程
11、vue中scoped的原理
作用功能：
实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模
块虽然方便但是我们需要慎用，因为当我们使用公共组件时会造成很多困难，
增加难度，想知道造成那些难度，需要先从scoped实现原理了解
实现原理：
通过观察DOM结构可以发现：vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用，如图，样式属性上也会多一个该字符，以保证唯一
可以看出加上scoped后的组件里的标签都会多一个data-v-469af010的属性，并且在css样式部分可以看出
由此可知，添加scoped属性的组件，为了达到不污染全局，做了如下处理：
给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性
在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局
如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件（ 注意 ）
慎用原因：
其实从原理已经能够了解到慎用原因，这里权当总结
从原理可见，之所以scoped可达到类似组件私有化、样式设置“作用域”的效果，其实只是在设置scoped属性的组件上的所有标签添加一的data开头的属性，且在标签选择器的结尾加上和属性同样的字段，起到唯一性的作用，但是这样如果组件中也引用其他组建就会出现类似下面的问题：
1.父组件无scoped属性，子组件带有scoped，父组件是无法操作子组件的样式的（原因在原理中可知），虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件
2.父组件有scoped属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都会带有data-v-469af010唯一标志，但子组件不会带有这个唯一标志属性，与1同理，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件
3.父子组建都有，同理也无法设置样式，更改起来增加代码量
