-
vue生命周期（包含子孙组件的情况）
beforeCreate (创建前)
created 此时进行数据请求---- 初始化数据 此时不能操作dom，只能通过异步nexttick 来操作
beforeMount (载入前) 挂载开始之前被调用 挂载Dom
mounted. （载入后） dom渲染完成
beforeUpdate (更新前) 更新
updated (更新后）
beforeDestory (销毁前)
detoryed （销毁后）
- VUE 的原理 ： 数据双向绑定原理
obj.defineProperty 监听 对象的 set 和 get 方法 ，来监听对象属性值改变
- Vuex 原理 和 使用场景
Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可
Vue组件简单常用的通信方式有以下几种：
1、父子通信：
父向子传值，通过props；子向父传值通过events ($emit)； ----和 v-model 类似，v-model 不需要写子组件回传事件- 1，父组件调用子组件方法和属性：
a、父组件文件，声明ref属性：
<v-header ref="header"></v-header>b、父组件函数中，用this.$refs调子组件的数据或方法：如：
-
this.$refs.header.属性名
-
2，子组件调用父组件属性和方法
-
this.$parent.属性名
-
this.$parent.方法名
2、兄弟通信：bus 中央事件总线 -
- 上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过 bus.$emit 触发事件，bus.$on 监听触发的事件。
Vue.component('brother1',{
data(){
return {
mymessage:'hello brother1'
}
},
template:`
<div>
<p>this is brother1 compoent!</p>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
</div>
`,
methods:{
passData(val){
//触发全局事件globalEvent
bus.$emit('globalEvent',val)
}
}
})
Vue.component('brother2',{
template:`
<div>
<p>this is brother2 compoent!</p>
<p>brother1传递过来的数据：{{brothermessage}}</p>
</div>
`,
data(){
return {
mymessage:'hello brother2',
brothermessage:''
}
},
mounted(){
//绑定全局事件globalEvent
bus.$on('globalEvent',(val)=>{
this.brothermessage=val;
})
}
})
//中央事件总线
var bus=new Vue();
var app=new Vue({
el:'#app',
template:`
<div>
<brother1></brother1>
<brother2></brother2>
</div>
`
})- vue-router 大概原理
vue-router 包括三个组成
vueRouter : 路由器类，根据请求在视图中动态渲染选中的组件
router-link : 路由链接组件，
router-view ：路由视图组件，负责动态渲染路由选中的组件
前端路由直接找到与地址匹配的一个组件或者对象然后进行渲染
通过 hash 和 history 两种方式实现
1. Hash: 通过改变hash值
2. History: 利用history对象新特性
- axios怎么使用拦截器，是不是知道支持 node 和浏览器端发送请求，用的什么发送的请求
- vue-cli如何新增自定义指令？
a. 创建局部指令
var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { /*指令名称*/ dir1: { inserted(el) { /*指令中第一个参数是当前使用指令的DOM*/ console.log(el); console.log(arguments); // 对DOM进行操作 el.style.width = '200px'; el.style.height = '200px'; el.style.background = '#000'; } } } }) - b. 全局指令
-
Vue.directive('dir2', { inserted(el) { console.log(el); } }) //指令的使用 <div id="app"> <div v-dir1></div> <div v-dir2></div> </div> - 原型链 和 作用域链，主要表现在寄生组合继承和extends继承的区别和new做了什么。
作用域的特点 ：：先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。总结有以下两点！
1、函数限定变量作用域,就是说，在JavaScript中，在函数里面定义的变量，可以在函数里面被访问，但是在函数外无法访问
2、在JavaScript中使用变量，JavaScript解释器首先在当前作用域中搜索是否有该变量的定义，如果有，就是用这个变量；如 果没有就到父域中寻找该变量. 由于变量提升,因此在实际开发的时候，推荐将变量都写在开始的地方，也就是在函数的开头将变量就定义好.
原型链：
它也是一种查找机制，实例首先在自己的私有属性种进行查找，如果不是私有属性，基于__proto__向所属类的原型上进行查找，如果再找不到，则继续基于__proto__向上查找，一直找到Object.prototype为止。例如obj.hasOwnproperty这个属性就是找到Object.prototype才找到的
1、所有的函数都继承自 Function.prototype,Function,Object 是函数,所以继承自 Function.prototype
2、所有的对象都直接或间接继承自 Object.prototype,Function.prototype.proto === Object.prototype函数也是对象,所以函数最终继承自Object.prototype
3、Object.prototype 继承自 null,万剑归宗
4、vue一些高级特性（比如 自定义 v-model、插槽、mixins、keep-alive、动态组件、异步组件，$nextTick
自定义 v-model： 负责监听用户的输入事件，从而更新数据，
[参考链接](https://www.jianshu.com/p/20e485cb65d9)
插槽： 自组件用 给父组件做占位符，父组件用 分发内容到自组件占位中 （参考 https://www.cnblogs.com/mandy-dyf/p/11528505.html）
mixins： 是
keep-alive： keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，配合include使用，使得 keep-alive 中的组件缓存
动态组件：
让多个组件使用同一个挂载点，并动态切换，这就是动态组件，本文将详细介绍Vue动态组件
通过使用保留的 元素，动态地绑定到它的 is 特性，可以实现动态组件
<component :is="currentView"></component>
我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件：
<component v-bind:is="currentTabComponent"></component>
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
异步组件：
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
$nextTick：
使用场景： 在Vue生命周期的 created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中
在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题
v-if，v-show 区别：
v-if 按照条件是否渲染 ，一次性
v-show 是 display ：block or none
vue 常用的修饰符
一、v-model修饰符
.lazy： 输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：
.trim：输入框过滤首尾的空格：
.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：
二、事件修饰符
.stop ： 阻止事件冒泡，相当于调用了event.stopPropagation()方法：
.prevent ：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：
.self ：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡：
.once : 事件只能用一次，无论点击几次，执行一次之后都不会再执行
.capture： 事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
.sync : 对prop进行双向绑定
.keyCode ：监听按键的指令，具体可以查看vue的键码对应表
.prevent：提交时间不再重载页面，
.stop：阻止单击时间冒泡
.capture：事件监听，事件发生时候调用
- 什么是 vue 的计算属性
在模版中放入太多的逻辑会让模版过重且难以维护，在需要对数据进行复杂处理且可能 多次复用 情况下，尽量采取计算属性的方式，
好处：1，使得数据处理结构清晰，
2，依赖于数据，数据更新，处理结果自动更新，
3 ，计算属性内部 this 指向 vm 实例，
11，怎么定义 vue-router 的动态路由? 怎么获取传过来的值
在 router 目录下的 index.js 文件中，对 path 属性加上 /:id ，
使用 router 对象的 params.id 获取
12，css只在当前组件起作用
【答】 ：在style标签中写入scoped 即可，例如：