vue两radio间距_vue常见⾯试题（1）
1、v-show 与 v-if 有什么区别？
v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件和⼦组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进⾏切换。
所以，v-if 适⽤于在运⾏时很少改变条件，不需要频繁切换条件的场景；v-show 则适⽤于需要⾮常频繁切换条件的场景。
2、Class 与 Style 如何动态绑定？
Class 可以通过对象语法和数组语法进⾏动态绑定：
对象语法：
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: {
isActive: true,
hasError: false
}
数组语法：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
Style 也可以通过对象语法和数组语法进⾏动态绑定：
对象语法：
<div v-bind:></div>
data: {
activeColor: 'red',
fontSize: 30
}
数组语法：
<div v-bind:></div>
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
3、computed 和 watch 的区别和运⽤的场景
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发⽣改变，下⼀次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作⽤，类似于某些数据的监听回调 ，每当监听的数据变化时都会执⾏回调进⾏后续操作；
运⽤场景：
当我们需要进⾏数值计算，并且依赖于其它数据时，应该使⽤ computed，因为可以利⽤ computed 的
缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执⾏异步或开销较⼤的操作时，应该使⽤ watch，使⽤ watch 选项允许我们执⾏异步操作 ( 访问⼀个 API )，限制我们执⾏该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性⽆法做到的。
4、谈谈你对 Vue ⽣命周期的理解？
（1）⽣命周期是什么？
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，我们称这是 Vue 的⽣命周期。
（2）各个⽣命周期的作⽤
⽣命周期的描述htmlradio添加切换事件
beforeCreate 组件实例被创建之初，组件的属性⽣效之前
created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有⽣成，$el 还不可⽤
beforeMount 在挂载开始之前被调⽤：相关的 render 函数⾸次被调⽤ mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调⽤该钩⼦ beforeUpdate 组件数据更新之前调⽤，发⽣在虚拟 DOM 打补丁之前
update 组件数据更新之后
beforeDestory 组件销毁前调⽤
destoryed 组件销毁后调⽤
5、在哪个⽣命周期内调⽤异步请求？
可以在钩⼦函数 created、beforeMount、mounted 中进⾏调⽤，因为在这三个钩⼦函数中，data 已经创建，可以将服务端端返回的数据进⾏赋值。（本⼈常放置到mounted中可以操作dom，当然也可以放到created中）
6、v-model 的原理？
我们在 vue 项⽬中主要使⽤ v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输⼊元素使⽤不同的属性并抛出不同的事件：
text 和 textarea 元素使⽤ value 属性和 input 事件；
checkbox 和 radio 使⽤ checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
7、什么是 MVVM？
Model–View–ViewModel （MVVM） 是⼀个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是⼀种简化⽤户界⾯的事件驱动编程⽅式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表
MVVM 源⾃于经典的 Model–View–Controller（MVC）模式 ，MVVM 的出现促进了前端开发与后端业务逻辑的分离，极⼤地提⾼了前端开发效率，MVVM 的核⼼是 ViewModel 层，它就像是⼀个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使⽤，该层向上与视图层进⾏双向数据绑定，向下与 Model 层通过接⼝请求进⾏数据交互，起呈上启下作⽤。如下图所
⽰：
（1）View 层
View 是视图层，也就是⽤户界⾯。前端主要由 HTML 和 CSS 来构建 。
（2）Model 层
Model 是指数据模型，泛指后端进⾏的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接⼝。
（3）ViewModel 层
ViewModel 是由前端开发⼈员组织⽣成和维护的视图数据层。在这⼀层，前端开发者对从后端获取的 Model 数据进⾏转换处理，做⼆次封装，以⽣成符合 View 层使⽤预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和⾏为两部分，⽽Model 层的数据模型是只包含状态的，⽐如页⾯的这⼀块展⽰什么，⽽页⾯加载进来时发⽣什么，点击这⼀块发⽣什么，这⼀块滚动时发⽣什么这些都属于视图⾏为（交互），视图状态和⾏为都封装在了 ViewModel ⾥。这样的封装使得 ViewModel 可以完整地去描述 View 层。
MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开发者再也不必低效⼜⿇烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的⼀块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会⾃动得到相应更新。这样 View 层展现的不是 Model 层
的数据，⽽是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和Model 层，这个解耦是⾄关重要的，它是前后端分离⽅案实施的重要⼀环。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。