vue面试题专题

1，v-if和v-show的作用是什么？有什么区别？

　　v-if:        创建---删除，没有元素。切换开销大。适合不频繁切换的情况用。

　　　　　　例子：制作搜索框，导航栏和搜索框重叠的两个框，点击搜索图片按钮创建输入框，再点击按钮删除输入框。不占位置。

　　v-show: 显示---隐藏，有元素。   切换频繁的话用这。只是初始渲染开销大。如需求，点击按钮显示隐藏盒子。

 2，vue的生命周期：8大

　　beforecreate---created---beforeMount---mounted---beforeUpdate---updated---beforeDestroy---destroy

2-1：Vue 的父组件和子组件生命周期钩子函数执行顺序？

　　Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

　　加载渲染过程

　　1，父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

　　2，父组件更新过程

　　　　父 beforeUpdate -> 父 updated

　　3，子组件更新过程

　　　　父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

　　4，销毁过程

　　　　父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

3，封装过哪些组件?

 　　（个人）封装过分页，哈哈哈

4，父子组件怎么通信的 ? 兄弟组件怎么通信的?

 　　总的来说父传子是通过props，子传父是通过$emit。

       举个父传子例子：父组件传值给子组件，即父组件去改变子组件的数据，比如文字。

父：

　　0，首先引入子组件，import...

　　1,  设置components:{ BtnStyle  } 节点，,注册子组件。

　　2：return 返回真实数据：toMsg：“这是数据”。

　　3，再在视图层把子组件用标签的形式展示出来，想改变子组件还得绑定好数据传给子组件：  <BtnStyle :toMsg="toMsg"></BtnStyle>

子：绑定数据到父组件，让父组件可以随时修改。

　　0，暴露name，方便找到这个子组件。父组件也可以暴露自己组件的名字。

　　1,设置节点接收父组件传递过来的数据：  prop:["toMsg"]

　　2,不用设置return值，因为值在父组件设置了。

　　3,最后在视图层需要文字处，用花括号填上动态数据：<h1> {{toSonData}} </h1>

　　子传父：待补。

4，mvvm框架是啥？它和其它框架（jquery）的区别是什么？哪些场景适合？

　　一个model+view+viewModel框架，数据模型model，viewModel连接两个

　　区别：vue是数据驱动，通过数据来显示视图层而不是DOM节点去操作。

　　场景：数据操作比较多的场景，更加便捷。。。。

5，什么是 MVVM , 和 MVC 是什么区别, 原理是什么?

　　MVVM：数据模型数据双向绑定，view和model之间没有联系,通过 viewModel进行交互,而且Model和ViewModel之间的交互是双向的，

　　因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

　　MVC：是单向通信。

6，class与style 如何绑定实现动态改变样式 ？

　　1，绑定类，用三元判断：:class="[isActive?class1:class2]"

　　2，返回三个值，1 是 isActive是true还是false？ 以及两个类对应的类名。：class1：‘a’,.....b....

　　3，设置a和a的样式

　　延申：如何动态绑定多个类？

　　1，绑定一个动态类：:class="[active?'class-'+index:'']"，到时可以随意改变index的值去设置不同的类。

　　2，返回两个值：active: true,  和 index:1,

　　3，样式的选择器类选择器这样命名： .class-1{}

　　总结： 有个JS基础的知识点：

　　a=active -> true.

　　a=null    -> false

　　额外：

　　对象的方法，不是数组的，不用三元的话要在返回值处判断

　　<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

　　data: { isActive: true, hasError: false }。