1.v-show 与 v-if 区别
v-show 只是 CSS 级别的 display: none; 和 display: block; 之间的切换,而 v-if 决定是否会选择代码块的内容(或组件)。频繁操作时,使用 v-show,一次性渲染完的,使用 v-if。因为当 v-if=“false” 时,内部组件是不会渲染的,所以在特定条件才渲染部分组件(或内容)时,可以先将条件设置为 false,需要时(或异步,比如 $nextTick)再设置为 true,这样可以优先渲染重要的其它内容,合理利用,可以进行性能优化。
2.计算属性和 watch 的区别
计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。
computed 是一个对象时,它有哪些选项?
computed 和 methods 有什么区别?
computed 是否能依赖其它组件的数据?
watch 是一个对象时,它有哪些选项?
问题 1,有 get 和 set 两个选项。
问题 2,methods 是一个方法,它可以接受参数,而 computed 不能;computed 是可以缓存的,methods 不会;一般在 v-for 里,需要根据当前项动态绑定值时,只能用 methods 而不能用 computed,因为 computed 不能传参。
问题 3,computed 可以依赖其它 computed,甚至是其它组件的 data。
问题 4,
handler 执行的函数
deep 是否深度
immediate 是否立即执行
事件修饰符
怎样给这个自定义组件 custom-component 绑定一个原生的 click 事件?
<custom-component @click=“xxx”>,就已经错了,说明它对这个没有概念。这里的 @click 是自定义事件 click,并不是原生事件 click。绑定原生的 click 是这样的:
<custom-component @click.native=“xxx”>内容
.exact 是 Vue.js 2.5.0 新加的,它允许你控制由精确的系统修饰符组合触发的事件,比如:
<button @click.ctrl=“onClick”>A
<button @click.ctrl.exact=“onCtrlClick”>A
<button @click.exact=“onClick”>A
你可能还需要了解常用的几个事件修饰符:
.stop
.prevent
.capture
.self
而且,事件修饰符在连用时,是有先后顺序的。
3.组件中 data 为什么是函数
为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象?
因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。
4.keep-alive 的理解
就是把一个组件的编译缓存起来。
5.自定义组件的语法糖 v-model 是怎样实现的
这里的 v-model,并不是给普通输入框 用的那种 v-model,而是在自定义组件上使用。
这个组件中,只有一个 props,但是名字叫 value,内部还有一个 currentValue,当改变 currentValue 时,会触发一个自定义事件 @input,并把 currentValue 的值返回。这就是一个 v-model 的语法糖,它要求 props 有一个叫 value 的项,同时触发的自定义事件必须叫 input。这样就可以在自定义组件上用 v-model 了:
6.Vuex 中 mutations 和 actions 的区别
主要的区别是,actions 可以执行异步。actions 是调用 mutations,而 mutations 来修改 store。
7.怎样理解单向数据流
这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的,但是这个 prop 只能由父组件修改,子组件不能修改,否则会报错。子组件想修改时,只能通过 $emit 派发一个自定义事件,父组件接收到后,由父组件修改。
一般来说,对于子组件想要更改父组件状态的场景,可以有两种方案:
在子组件的 data 中拷贝一份 prop,data 是可以修改的,但 prop 不能:
export default {
props: {
value: String
},
data () {
return {
currentValue: this.value
}
}
}
如果是对 prop 值的转换,可以使用计算属性:
export default {
props: [‘size’],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase();
}
}
}
8.生命周期
Vue.js 生命周期 主要有 8 个阶段:
创建前 / 后(beforeCreate / created):在 beforeCreate 阶段,Vue 实例的挂载元素 el 和数据对象 data 都为 undefined,还未初始化。在 created 阶段,Vue 实例的数据对象 data 有了,el 还没有。
载入前 / 后(beforeMount / mounted):在 beforeMount 阶段,Vue 实例的 $el 和 data 都初始化了,但还是挂载之前为虚拟的 DOM 节点,data 尚未替换。在 mounted 阶段,Vue 实例挂载完成,data 成功渲染。
更新前 / 后(beforeUpdate / updated):当 data 变化时,会触发 beforeUpdate 和 updated 方法。这两个不常用,且不推荐使用。
销毁前 / 后(beforeDestroy / destroyed):beforeDestroy 是在 Vue 实例销毁前触发,一般在这里要通过 removeEventListener 解除手动绑定的事件。实例销毁后,触发 destroyed。
9.组件间通信
父子通信:父向子传递数据是通过 props,子向父是通过 events( e m i t ) ; 通 过 父 链 / 子 链 也 可 以 通 信 ( emit);通过父链 / 子链也可以通信( emit);通过父链/子链也可以通信(parent / $children);ref 也可以访问组件实例;provide / inject API。
兄弟通信:Bus;Vuex;
10.路由的跳转方式
一般有两种:
通过 ,router-link 标签会渲染为 标签,在 template 中的跳转都是用这种;
另一种是编程式导航,也就是通过 JS 跳转,比如 router.push(’/home’)。
11.Vue.js 2.x 双向绑定原理
通过 Object.defineProperty() 来劫持各个属性的 setter / getter,在数据变动时发布消息给订阅者,触发相应的监听回调,这也是为什么 Vue.js 2.x 不支持 IE8 的原因(IE 8 不支持此 API,且无法通过 polyfill 实现)。
12.什么是 MVVM,与 MVC 有什么区别
MVVM 模式是由经典的软件架构 MVC 衍生来的。当 View(视图层)变化时,会自动更新到 ViewModel(视图模型),反之亦然。View 和 ViewModel 之间通过双向绑定(data-binding)建立联系。与 MVC 不同的是,它没有 Controller 层,而是演变为 ViewModel。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作是由 Vue.js 完成的,我们不需要手动操作 DOM,只需要维护好数据状态。