1、介绍Vue中的常用的指令
- v-bind 绑定属性机制,可以简写为:
- 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
- 数组方法v-bind:class="[class1, class2]"
- 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"
- v-on 绑定事件机制,可以简写为@
- v-for
- v-html 以html标签形式显示
- v-text 可以简写为{{}}
- v-if
- v-show
- v-model 双向数据绑定
2、vue中常用的事件修饰符
- .prevent: 阻止默认事件;如:v-on:submit.prevent阻止默认事件;
- .stop: 阻止单击事件冒泡;如:v-on:click.stop阻止事件冒泡;
- .self: 当事件发生在该元素本身而不是子元素的时候会触发;
- .capture: 事件侦听,事件发生的时候会调用
- .once 事件只触发一次
3、谈谈你对MVVM开发模式的理解
- MVVM分为Model、View、ViewModel三者。
- Model 代表数据模型,数据和业务逻辑都在Model层中定义;
- View 代表UI视图,负责数据的展示;
- ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;
- Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新,View 中由于用户交互操作而改变的数据也会在 Model 中同步。
- 这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 DOM。
4、 v-if 和 v-show 有什么区别?
-
v-show
-
v-show是css切换,频繁切换时用v-show,
-
v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;
-
当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;
-
v-show对应的值无论是true还是false,对应HTML元素都会存在于浏览器的文档中;
-
-
v-if
-
v-if=‘false’ v-if是条件渲染,当false的时候不会渲染,
-
v-if是完整的销毁和重新创建,运行时较少改变时用v-if,而v-if会控制这个 DOM 节点的存在与否。
-
当只需要一次显示或隐藏时,使用v-if更加合理。
-
v-if如果是false的话,对应HTML元素直接不在浏览器的文档中了。
-
5、请详细说你对vue生命周期的理解?
- 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
- beforeCreate----创建前 组件实例更被创建,组件属性计算之前,数据对象data都为undefined,未初始化。
- created----创建后 组件实例创建完成,属性已经绑定,数据对象data已存在,但dom未生成,$el未存在
- beforeMount---挂载前 vue实例的$el和data都已初始化,挂载之前为虚拟的dom节点,data.message未替换
- mounted-----挂载后 vue实例挂载完成,data.message成功渲染。
- beforeUpdate----更新前 当data变化时,会触发beforeUpdate方法
- updated----更新后 当data变化时,会触发updated方法
- beforeDestory---销毁前 组件销毁之前调用
- destoryed---销毁后 组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在
7、vue中<keep-alive>
的作用;active-class是哪个组件的属性?
- 把切换出去的组件保留在缓存中,可以保留组件的状态或者避免重新渲染。
- active-class是vue-router模块的router-link组件的属性。
8、计算属性及和 watch 、methods的区别
-
computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算,
- computed可以依赖其他computed,甚至是其他组件的data;
- 依赖于数据,数据更新,处理结果自动更新;
- 计算属性内部this指向vm实例;
- 在组件调用时,直接写计算属性名即可;
- 有get和set两个选项,常用的是getter方法,获取数据,也可以使用setter方法改变数据;
-
watch 更像是一个 data 的数据监听回调,当依赖的 data 的数据变化,执行回调,在方法中会传入 newVal 和 oldVal。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情,使用watch。
-
相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算,methods不会。methods是一个方法,它可以接受参数,而computed不能。
10、父子组件之间的传值通信?
-
父组件向子组件传值:
-
子组件在props中创建一个属性,用来接收父组件传过来的值;
-
在父组件中注册子组件;
-
在子组件标签中添加子组件props中创建的属性;
-
把需要传给子组件的值赋给该属性
-
子组件向父组件传值:
-
子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
-
将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
-
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
12、非父子组件之间的通信
常用的方法有 EventBus 和 Vuex
-
EventBus 实现非父子组件通信的原理是:
- 通过实例化一个Vue对象( 比如bus = new Vue() )作为母线,在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) ),
- 然后在其他组件中再通过bus来监听此事件并接受参数( bus.$on(event, callback) )。
-
Vuex 是什么:
-
Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态
-
Vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化。
-