1.什么是vuejs
vue是基于javascript的前端渐进式框架
2.v-show 与 v-if 的区别？
<1>v-show是css切换，v-if是完整的销毁和重新创建。
<2>使用频繁切换时用v-show，运行时较少改变时用v-if
<3>v-if=‘false’ v-if是条件渲染，当false的时候不会渲染
3.如何动态绑定class？
对象方法 v-bind:class="{'red': isOK, 'green': isGreen}"
数组方法v-bind:class="[class1, class2]"
行内 v-bind:class="a?'red':'green'"
4.计算属性和watch的区别？
计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。
说出一下区别会加分
<1>computed 是一个对象时，它有哪些选项？
有get和set两个选项
<2>computed 和 methods 有什么区别？
methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。
<3>computed 是否能依赖其它组件的数据？
computed可以依赖其他computed，甚至是其他组件的data
<4>watch 是一个对象时，它有哪些选项？
watch 配置
handler
deep 是否深度
immeditate 是否立即执行
总结
当有一些数据需要随着另外一些数据变化时，建议使用computed。
当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watcher
5.如何理解单项数据流？
这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：
在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：
export default {
props: {
value: String
},
data () {
return {
currentValue: this.value
}
}
}
如果是对 prop 值的转换，可以使用计算属性：
export default {
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase();
}
}
}
6.说一下什么是生命周期
创建前后 beforeCreate/created
在beforeCreate 阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象有了，el还没有。
载入前后 beforeMount/mounted
在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前未虚拟的DOM节点，data尚未替换。 在mounted阶段，vue实例挂载完成，data成功渲染。
更新前后 beforeUpdate/updated
当data变化时，会触发beforeUpdate和updated方法。这两个不常用，不推荐使用。
销毁前后beforeDestory/destoryed
beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后，触发的destroyed
7.组件之间进行通信
父子
props/event children ref
provide/inject
兄弟 bus vuex
跨级 bus vuex provide inject
8.路由跳转的方式
8.1<router-link to='home'> router-link标签会渲染为<a>标签，咋填template中的跳转都是这种；
8.2另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')
9.vue双向数据绑定的原理
通 过 Object.defineProperty() 来劫持各个属性的setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）
10.为什么vue中的data必须是一个函数
对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。
11.vue-router有哪几种导航钩子
三种。
一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
第三种：路由独享钩子
12.请说出vue.cli项目中src目录每个文件夹和文件的用法？
assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件
13.vuex 是什么？ 有哪几种属性？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
有 5 种，分别是 state、getter、mutation、action、module
14.vuex 的 store 是什么？
vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
15.vuex 的 getter 是什么？
getter 可以对 state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters
16.vuex 的 mutation 是什么？
更改Vuex的store中的状态的唯一方法是提交mutation
17.vuex 的 action 是什么？
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中
vuex 的 module 是什么？
面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回
18.什么是MVVM，和MVC有什么区别？
MVVM模式是有经典软件架构MVC衍生出来的，当View发生变化时，会自动更新到VIewModel中，反之，View和ViewModel之间通过双向数据绑定建立联系，与MVC不同的是他没有controller，而是演变为ViewlModel
ViewModel通过双向数据绑定把View层和model层链接了起来，而view和model之间的同步工作是有vue.js完成的，我们不需要手动操作Dom，只能维护好数据状态
19.vue双向数据绑定的原理
通过Object.defineProperty()来劫持各个属性的setter和getter，数据发生变动时发布消息给订阅者，触发相应的监听回调。
//js实现简单的双向数据绑定
<body>
<div id="app">
<input type="text" id="model">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('model).value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
20.vue中 key 值的作用
使用key来给每个节点做一个唯一标识，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
21.对keep-alive 的了解？
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。
使用方法:
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
参数解释:
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。
使用示例:
<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>
<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
<component></component>
</keep-alive>
22.vue等单页面应用及其优缺点
优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
后续还会进行完善！如果感觉有用就留下一个宝贵的赞，或者赞赏一下小编！！！！
网友评论