Vue面试题(3)部分

Vue面试题(3)部分

一、Vue与Angular以及React的区别？

1、与AngularJS的区别
相同点

都支持指令：内置指令和自定义指令；
都支持过滤器：内置过滤器和自定义过滤器；
都支持双向数据绑定；
都不支持低端浏览器。

不同点：

AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；
在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；
Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

2、与React的区别
相同点：

React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；
            中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；
             都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；
              在组件开发中都支持mixins的特性。

不同点：

React采用的Virtual DOM会对渲染出来的结果做脏检查；
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

二、vue等单页面应用及其优缺点？

优点

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。
1、数据驱动
2、组件化
3、轻量
4、简洁
5、高效
6、模块友好
7、页面切换快

缺点

1、不支持低版本的浏览器，最低只支持到IE9；
2、不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
3、首屏加载耗时相对长一些；
4、不可以使用浏览器的导航按钮需要自行实现前进、后退。

三、怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

• 在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id获取。

四、vue优点是什么？

1、轻量级框架
2、简单易学
3、双向数据绑定
4、组件化
5、视图
6、数据和结构分离
7、虚拟DOM
8、运行速度快

五、vue中如何获取一个dom对象并且进行操作？

方法一：
直接给相应的元素加id,然后再document.getElementById(“id”);获取，然后设置相应属性或样式
方法二：
使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

六、vue-loader是什么？使用它的用途有哪些？

ue-loader会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块；module.exports出一个vue.js组件对象；
1：< temlate>语言块

（1）默认语言：html 
（2）每个.vue文件最多包含一个< template>块 
（3）内容将被提取为字符串，将编译用作VUE组件的template选项； 

2：< script>

（1）默认语言：JS（在监测到babel-loader或者buble-loader配置时，自动支持ES2015） 
（2）每个.vue文件最多包含一个< script>块 
（3）该脚本在类CommonJS环境中执行（就像通过webpack打包的正常JS模块）。所以你可以require()其他依赖。在ES2015支持下，也可以使用import跟export语法 
（4）脚本必须导出Vue.js组件对象，也可以导出由VUE.extend()创建的扩展对象；但是普通对象是更好的选择；

3：< style>

（1）默认语言：css 
（2）一个.vue文件可以包含多个< style>标签 
（3）这个标签可以有 scoped 或者 module属性来帮助你讲样式封装到当前组件；具有不同封装模式的多个< style>标签可以在同一个组件中混合使用 
（4）默认情况下，可以使用style-loader提取内容，并且通过< style>标签动态假如文档的< head>中，也可以配置webpack将所有的styles提取到单个CSS文件中； 

4：自定义块

可以在.vue文件中添加额外的自定义块来实现项目的特殊需求；

例如< docs>块；vue-loader将会使用标签名来查找对应的webpack loaders来应用到对应的模块上；webpack需要在vue-loader的选项loaders中指定； 
vue-loader支持使用非默认语言，比如CSS预处理器，预编译的HTML模板语言，通过设置语言块的lang属性：
<style lang='sass'>
    /*sass*/
</style>