vue的核心是什么
vue是一套构建用户界面的MVVM框架。vue的核心值关注视图层。
核心思想：
- 数据驱动（视图的内容随着数据的改变而改变）
- 组件化（可以增加代码的复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚低耦合）
vue单页面的优缺点
优点：
- 数据驱动视图，对真实dom进行抽象出virtual dom（本质就是一个js对象），并配合diff算法，响应式和观察者、异步队列等手段以最小代价更新dom，渲染页面。
- 组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文件里编写html/css（scoped属性配置css隔离）/js，并且配合vue-loader之后，支持更强大的预处理器等功能
- 强大且丰富的API提供一系列的api能满足业务开发中各类需求
- 由于采用虚拟dom，让vue ssr（服务器端渲染） 先天不足
- 生命周期钩子函数，选项式的代码组织方式，写熟了还是蛮顺畅的，但是仍然有优化空间（vue3 composition-api）
- 生态好，社区活跃
缺点：
- 由于底层基于Object.defineProperty实现响应式，而这个api本身不支持IE8及以下浏览器
- csr的先天不足，首屏性能问题（白屏）
- 由于百度等搜索引擎爬虫无法爬取js中的内容，故spa先天就对SEO优化不好。
请详细说下你对vue生命周期的理解？
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。总结起来八个字：创建 加载 更新 销毁
创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，还未初始化。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
vue中组件如何通讯
父子组件：props和this.$emit(自定义事件名，要发送的数据)
自定义事件：event.$on event.$off event.$emit Vue 实例自带api，可以定义一个全局vue实例。
还有 vuex插件 通讯。
请简述vue的单向数据流
父级prop的更新会向下流动到子组件中，每次父组件发生更新，子组件所有的prop都会刷新为最新的值
数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改父组件传递过来的数据（可以使用data和computed解决）
vue双向绑定的原理
双向绑定就是：数据变化更新视图，视图变化更新数据
vue数据双向绑定是通过数据劫持和观察者模式来实现的。
数据劫持： object.defineproperty 它的目的是：当给属性赋值的时候，程序可以感知到，就可以控制改变属性值
观察者模式： 当属性发生改变的时候，使用该数据的地方也发生改变
双向数据绑定v-model的实现原理
- input 元素的 value = this.name
- 绑定input事件this.name = $event.target.value
- data更新触发re-render
vue中常用的修饰符有哪些
// 输入框修饰符：
.lazy 改变后触发，光标离开input输入框的时候值才会改变
.number 将输出字符串转为number类型
.trim 自动过滤用户输入的收尾空格
// 事件修饰符
.stop 阻止点击事件冒泡，相当于原生js中的event.stopPropagation()
.prevent 防止执行预设的行为，相当于原生js中的event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式，就是谁有改事件修饰符，就先触发谁。
.self 只会触发自己范围内的事件，不包括子元素
.once 只执行一次
// 键盘修饰符
.enter 回车键
.tab 制表键
.esc 返回键
.space 空格键
.up 向上键
.down 向下键
.left 向左键
.right 向右键
// 系统修饰符
.ctrl
.alt
.shift
.meta
vue中指令有哪些？
- v-for: 循环数组，对象，字符串，数字
- v-on: 绑定事件监听
- v-bind: 动态绑定一个或者多个属性
- v-model: 表单控件或者组件上创建双向绑定
- v-if v-else v-else-if 条件渲染
- v-show: 根据表达式真假，切换元素的display
- v-html: 更新元素的innerHtml
- v-text: 更新元素的textcontent
- v-pre: 跳过这个元素和子元素的编译过程
- v-clock：这个指令保持在元素上知道关联实例结束编译
- v-once 只渲染一次
v-if 和 v-show 的区别
v-if 是根本不会渲染DOM节点。
v-show 是基于css的display属性值对DOM进行显示隐藏的。
v-if 与 v-for 优先级
首先不要把v-if与v-for用在同一个元素上，原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
vue循环的key作用
- 必须用key，且不能是index和random
- diff算法中通过tag和key来判断，是否是sameNode
- 减少渲染次数，提升渲染性能。
v-on 可以绑定多个方法吗？
可以，如果绑定多个事件，可以用键值对的形式（事件类型：事件名）
如果绑定是多个相同事件，直接使用逗号分隔就行。
如何定义一个过滤器
过滤器本质就是一个有参数返回值的方法
new Vue({
filters: {
myCurrency: function(myInput){
return 处理后的数据
}
}
})
// 使用方法
<span>{{ 表达式 | 过滤器 }}</span>
过滤器高级用法：可以指定参数，告诉过滤器按照参数进行数据的过滤
什么是计算属性
计算属性是用来声明时的描述一个值依赖了其他的值，当它依赖的这个值发生改变时，就更新 DOM
当在模板中把数据绑定到一个计算属性上时， vue 会在它依赖的任何值导致该计算属性改变时更新 DOM
每个计算属性都包括一个 getter 和 setter，读取时触发 getter，修改时触发 setter
计算属性与watch区别
Computed watch 区别就是 computed 的缓存功能，当无关数据数
据改变时，不会重新计算，直接使用缓存中的值。计算属性是用来声明
式的描述一个值依赖了其他的值，当所依赖的值后者变量发生变化时，
计算属性也跟着改变，
Watch 监听的是在 data 中定义的变量， 当该变量变化时， 会触发 watch
中的方法
watch怎么深度监听对象变化
new Vue({
el: "#first",
data: { msg: {name: 'zz'} },
watch:{
msg: {
handler(newMsg, oldMsg){
console.log(newMsg);
},
immediate: true,
deep: true
}
}
})
何时需要使用beforeDestory
- 解除自定义事件 event.$off
- 清除定时器
- 解绑自定义的DOM事件，如window.onscroll等
在vue项目中如何引入第三方库（比如jQuery）？有哪些方法可以做到？
1.绝对路径直接引入。
在index.html中用`script`引入
<script src="./static/jquery-1.12.4.js"></script>
然后在webpack中配置external
externals:{'jquery': 'jQuery'}
在组件中使用时import
import $ from 'jquery'
2.在webpack中配置alias
resolve: {
extensions: ['.js','.vue','.json'],
alias: {
'@': resolve('src),
'jquery': resolve('static/jquery-1.12.4.js')
}
}
然后在组件中import
3.在webpack中配置plugins
plugins: [new webpack.ProvidePlugin({ $: 'jquery' })]
全局使用，但在使用eslint情况下会报错，需要在使用了$的代码前添加 /*eslint-disable*/ 来去掉eslint的检查。