vue面试题

1、v-if（虚拟dom元素）和v-show有什么区别？

1.手段：

• v-if是动态的向DOM树内添加或者删除DOM元素；
• v-show是通过设置DOM元素的display样式属性控制显隐；

2.编译过程：

• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
• v-show只是简单的基于css切换

3.编译条件

• v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载）；
• v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

4.性能消耗

• v-if有更高的切换消耗；
• v-show有更高的初始渲染消耗；

5.使用场景

• v-if适合运营条件不大可能改变；
• v-show适合频繁切换；

2、vue-router使用步骤

<div class="container">
	<router-link to="/user?name=张三&age=22">用户中心</router-link>
	<router-view></router-view>

</div>

步骤

1.定义不同的路由切换时需要显示的内容

var User=Vue.component("User",{
	template:"<div>{{$route.query.name}}</div>"
})

2.配置路由规则

var routes=[{
	path:"/user",
	component:User
}]

3.创建vue-router实例

        var router=new VueRouter({
            routes:routes
        })

4.将vue-router的实例挂载到vue的实例

new Vue({
	el:".container",
	router:router
})

2(1)、vue-router是什么？它有哪些组件？

• vue用来写路由一个插件。router-link,router-view

3、vue-resource使用

$http.get(url,[options])

• url String ajax请求的接口地址

• options Object 需要发送的参数

    new Vue({
    	el:".container",
    	data:{
    		content:"",
    	}
    })
    $http.get("addcomment",{params,{content:this.content}})
  

$http.post(url,[options])

• url String ajax请求的接口地址

• options Object 需要发送的参数

    new Vue({
    el:".container",
    data:{
    	content:"",
    }
    })
    $http.post("/addcomment",{content:this.content})
  

4、vue的生命周期（vue的钩子函数）

• beforeCreate 组件还未被创建

• created 组件已被创建

• beforeMount 组件已被创建但还未挂载到DOM节点上

• mounted 组件已挂载到DOM节点上

• beforeDestory 组件即将被销毁

• destoryed 组件已经被销毁

    vm = new Vue({
        el:".box",
        data:{},
        beforeCreate(){},
        created(){},
        boforeMount(){},
        mounted(){},
        boforeDestroy(){},
        destroyed(){}
    })
  

4、什么是vue

• 是一个mvvm模型的js框架（m--->model v--->view）
• model本质上来说就是数据
• view就是试图（及最终展现给客户的页面）
• mv model--->view (由数据驱动视图)
• vm view --->model(由视图通过事件更新数据)
• 特点是
• 01.简单上手容易
• 02.比较的轻量级（相对于AngularJs,RectJs...）
• 03.组件齐全，文档便于阅读

5、mvvm框架是什么？它和其他框架（jQuery）的区别是哪些？哪些场景适合？

• 一个model+view+viewModel框架，数据模型model，viewModel连接两个
• 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
• 场景：数据操作比较多的场景，更加便捷

6、自定义指令（v-check,v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

• 全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另一个是函数。
• 组件内定义指令：directives
• 钩子函数：bind(绑定事件触发),inserted(节点插入的时候触发),update(组件内相关更新)
• 钩子函数参数：el,binding

7、说出至少4种vue当中的指令和它的用法？

• v-if：判断是否隐藏；
• v-for:数据循环出来；
• v-bind:class（简写 @class）：绑定一个属性；
• v-model：实现双向绑定;

8、v-model是什么？怎么使用？vue中标签怎么绑定事件？

• 可以实现双向绑定，指向（v-class,v-for,v-if,v-show,v-on）。vue的model层的data属性。
• 绑定事件： <input @click=doLog() />

8（1）、Vue的双向数据绑定原理是什么？

• vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter,在数据变动时发布消息给订阅者，触发相应的监听回调

具体步骤

第一步：需要observe的数据对象进行遍递归历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：

• 1.在自身实例化时往属性订阅器（dep）里面添加自己
• 2.自身必须有一个update()方法
• 3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer,Compile和Watcher三者，

• 通过Observer来监听自己的model数据变化，通过Compile来解释编译模板指令，最终利用Watcher搭起Observer和Compile之间通信桥梁，达到数据变化->视图更新；视图交互变化（input）->数据model变更的双向绑定效果

9、导航钩子函数有哪些？它们有哪些参数？

• 导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter.afterEnter.beforeRouterUpdate,beforeRouteLeave
• 参数：有to(去的那个路由),form(离开的路由),next(一定要用这个函数才能去到下一个路由，如果不用就拦截)最常用就这几种

10、请说下封装vue组件的过程？

• 首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低，难维护，复用性等问题
• 然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义，而子组件修改好数据后想把数据传递给父组件。可以采用emit方法。

11、vue.cli项目中目录中src目录每个文件夹和文件的用法？

• assets文件夹是放静态资源；
• components是放组件；
• router是定义路由相关的配置；
• view视图；
• app.vue是一个应用组件；
• main.js是入口文件；