vue的8个⽣命周期函数？
1. beforeCreated
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestory
8. destoryed
v-show 与 v-if的区别？
1、v-show: 是否显示，元素肯定已经渲染在dom节点上，然后通过样式来控制是否显示。
2、v-if: 是否渲染，如果没有额外的样式控制，只要渲染就是显示的。v-if有⽐较⼤的渲染开销（符合条件要渲染到dom节点中，不符合条件要从dom节点中去掉元素）。当频繁执⾏条件时，不适合使⽤v-if，⽤v-show；反之执⾏条件的次数很少，使⽤v-if即可
v-for与v-if优先级？
v-for优先，对循环的每⼀项来执⾏v-if，根据v-if条件执⾏的结果再决定输出内容
v-for中的key的作⽤？
key的作⽤是标示⼀组兄弟节点中每⼀项的唯⼀性，在下次更新时进⾏⼆次元素⽐对，去定位元素是更新、删除、新增、移动等
vue中每个周期函数⼀般放置什么业务逻辑？
1、在组件加载时就需要发送的异步请求，可以放在beforeCreated或者created上
2、如果从路由获取⼀些数据来使⽤，可以放在created
3、如果要操作dom，放在mounted, 因为这个阶段是把前⾯创建的组件实例的dom结构 挂载 到了dom节点中
4、如果需要在组件更新后，需要发送数据给后台或者前台⾃⼰的⼀些存储，放在updated
5、如果需要在组件销毁时处理⼀些数据、定时器等，放在beforeDestoryed
vue中data为什么是function？
因为vue中内部使⽤的组件没有使⽤new Vue这种实例化的形式，不是创建⼀个新的实例，所以data数据需要进⾏区分，函数每次执⾏之间没有任何关系，所以使⽤函数来返回data数据，这样每次使⽤这个组件，组件的数据都只是这次的，下次再使⽤，下次数据跟这次的数据没有关系就不会相互影响了
vue中双向绑定的原理？
借助js中 Object.defineProperty(obj, 'a', {set: fn, get: fn}) 定义数据时可以对这个数据进⾏修饰，修饰的属性有：
1、value： 这个属性的值
2、writeable: 是否可写
3、configurable: 是否可配置
4、enumable: 是否可遍历
5、set: 设置数据
6、get: 获取数据
上面的6种装饰属性分为2组使用，第一组：1234；第二组：3456
Object.defineProperty(obj, 'a', {
set: function(n) {
a = n
document.getElementById('root').innerHTML = '<div>hello world</div>'
document.getElementById('abc').innerHTML = n
},
get: function() {
// 依赖分析和收集
return a
}
})
obj.a = 2 // this.abc = 123
console.log(a) // var b = obj.a
双向：
1. 视图view => 数据model：通过事件绑定的形式把数据从视图层传递到逻辑层
2. 数据model => 视图view：通过拦截setter getter来重新定义其中的逻辑，然后在模板解析阶段收集其中使⽤的数据（依赖收集），后续数据发⽣变化，会执⾏set⽅法的逻辑，set⽅法其中会根据上次依赖收集的结果去更新 使⽤当前变化的数据的那个template
keep-alive的作⽤和被keep-alive声明的组件的⽣命周期？
keep-alive作⽤是保持组件不销毁，⽤来处理要保持组件状态的那些场景；被keep-alive声明的组件不被销毁，⼀直存在，多两个⽣命周期，actived 激活和deatvied 不激活状态
vue组件间传值有哪些⽅式？
1、⽗⼦传值: props
2、⼦⽗传值: 回调
3、兄弟节点传值: $on 与$emit ，在触发事件时可以传递参数，参数会被监听事件的处理函数接收到
computed和watch的区别？
1、computed是⼀个计算属性，对⼀些基于data数据产⽣的数据进⾏计算，或者⻚⾯要使⽤的数据是⽐较复杂的，每次在模板中运算1是逻辑和结构混淆代码不分离不清晰2是每次都执⾏耗费性能，所以计算属性另⼀个特征是他能把计算结果缓存下来，下次的计算因⼦如果没有变化，那么直接返回上次缓存的值供组件使⽤
2、watch是监听数据的变化，执⾏⾃⼰的业务逻辑
3、共同点：都会监听他们使⽤的数据是否变化，但是作⽤倾向不同，watch也可以做computed做的事情，还可以去做其他事情：⽐如发送⽹络请求，存储本地数据、改变⻚⾯的ui结构、添加定时操作、跳转路由
vue中改变数组内索引的值，数据不更新，如何处理？
- vue对数据进⾏劫持，当数据变化时去更新⻚⾯上⽤到该数据的地⽅
- 数组的劫持⽐较例外，它只对数组本身进⾏劫持，并没有对数组中每⼀个元素进⾏劫
持，所以根据索引改变某项的值，不会触发setter，所以⻚⾯就得不到更新了。
- 解决⽅法：就是让vue知道数据变化了，使⽤splice⽅法改变数组或者this.$set或者
Vue.set来定义
data: function() {
return {
list: [1, 21, 3],
a: 1,
b: 'abc',
c: {aa: 11, bb: 22, cc: 33}
}
}
methods: {
handler: function() {
this.$set(this.list, 2, 33)
// Vue.set(this.list, 2, 35)
// this.list.splice(2, 1, 355)
}
}
vue中传参的⽅式？
1、使⽤中转
1、全局中转 window
2、如果是在组件内部中转，把数据寄存在this实例对象上
3、vuex也是⼀个中转⽅案，所有的组件都可以从这⾥拿数据和改变数据，vuex会制定⼀系列的规范和操作约束，让数据管理更加的灵活、⽅便操作
4. 本地存储，如果是需要⻓期存在的数据，使⽤localStorage；临时的数据使⽤sessionStorage
2、使用vue-router 进行传参
2-1、使用query查询词
// 在某些操作函数（⽐如点击某个元素）执⾏跳转
this.$router.push({
path: 'list',
query: {
phone: '15192407777',
}
})
// query参数就是url后⾯跟上?及后⾯的内容 => /list?phone=15192407777
// 在list⻚⾯获取参数的值：this.$route.query
2-2、使⽤params路径
1、注意路径是由多部分组成的，所以要使⽤path的话，必须把path拼接完整（例外的情况：可变部分是可有可⽆的）
this.$router.push({
// 如果可变部分的是可以没有的，那么就不需要添加了
path: 'info/' + 后⾯定义的可变部分的参数值,
})
// 在info⻚⾯获取参数: this.$route.params
// 错误演示： 如果想使⽤params传参，不要使⽤path，会导致params⽆效
this.$router.push({
path: 'info',
params: {
id: 11
}
})
// 正确演示： 使⽤name和params配合使⽤
this.$router.push({
name: 'info',
params: {
id: 11
}
})
