Vue基础面试题11-19

11、v-if  和  v-show 的区别

两者都是控制元素的显示与隐藏不同的是：

v-if 是通过删除或添加dom元素来控制的

v-show是通过对元素添加display：none；属性来控制的

另外v-if可以搭配v-elseif、v-else来使用的，如果是频繁切换的话建议使用v-show，如果的单次操作的话可以使用v-if。

12、computed、watch、methods的区别

watch是用来监听数据的改变的，当监听的数据发生改变时就会触发定义的事件，它的值是一个对象。

methods是定义方法/函数的，他需要手动调用才能执行。

computed是计算属性，与data对象里的数据属性是同一类的。

但是不同的是computed中的方法是以变量的方式使用的并且会存到缓存中。

// methods：methods 里面是用来定义函数的，它需要手动调用才能执行。 而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / computed，methods 不处理数据逻辑关系，只提供可调用的函数 methods 里面定义的是 函数 ，仍然需要去调用它。 computed 是 计算属性 ，事实上和 data 对象里的数据属性是同一类的（使用上）。 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

13、axios的特点

axios是一个基于promise的http库，支持promise的所有API；

他可以拦截请求和响应；

他可以转换请求数据和响应数据，并对响应回来的内容自动转换为JSON类型的数据；

它安全性更高，客户端支持防御XSRF；

// promise：解决Ajax回调地狱问题，promise三种状态

pending  刚创建promise实例时的初始状态，fulfilled成功，rejected失败

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

14、vue中ref是什么

在标签中或者组建中加入ref = ‘name’ 属性，然后可以通过this.$refs.name获取到dom元素或者组件元素

15、vue中父子组件如何通信

父传子：1)父元素中设置自定义属性=属性值，变量加：(冒号)，然后再父元素data中定义这个值

2)在子元素中设置props：{ }接受并定义传过来的类型。注意：props中不能与data中重名。

子传父：1)在父组件中给引用的子组件标签注册一个自定义事件，然后再父组件的methods中定义这个事件，（）中传参数data，子组件传过来的就在这个data

2）子组件中可以触发这个事件this.$emit("事件名"，要穿的值) 注意：渲染和定义名字不能冲突。

16、axios和Ajax有什么不同

    axios是对Ajax的封装，axios返回的是promise对象可以使用promise的API，Ajax是通过回调函数获取数据。

17、vue等单页面网站的优势与不足

优势：单页面内容改变不需要重新加载整个页面，没有页面之间的切换，就不会出现“白屏现象”，也不会出现假死并有闪烁的现象，单页面相对服务器压力小，用户体检更加好。

不足：首次加载耗时比较多，SEO问题，不利于百度，360等搜索引擎收录，前进、后退、书签等都需要程序进行管理，页面的复杂度很高，需要一定的技术水平和开发成本高。

18、使用MVVM设计模式有什么优势

低耦合：数据趋向试图，view可以独立于model变化和修改，一个viewModel可以绑定不同的view上，当view变化的时候Model可以不变，当Model变化的时候view也可以不变。

独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计

可重用行：可以把一些试图逻辑放在一个viewModel里面，让很多view重用这段试图逻辑

可测试：界面素来是比较难于测试的，而现在测试可以针对viewModel来写。

19、如何编写可复用的组件

在编写组件的时候，首先要做的就是组价的抽象，考虑组件是否可复用，组件之间是否存在耦合，一次性组件很其他组件紧密耦合没关系，但是可复用组件一定要定义一个清洗的公共接口。

组件的接口主要分为三部分：prop、事件、slot：

prop：允许外部环境传递数据给组件，在vue-cli工程中也可以使用vuex等数据传递数据

事件：允许组件触发外部环境的action

slot：允许外部环境将内容插入到组件的试图结构内