1、谈谈你对Vue的理解
简单来说,vue就是一个用于创建用户界面的渐进式的Javascript框架。
它有3个优点:
第一个是采用组件化模式,把html、css、js等组合封装成一个vue组件,这个vue组件是可以重复使用的,这样的话就大大提高了代码的利用率,以及代码维护起来会更加方便。
第二个是声明式编码,程序员可以直接在页面上用vue指令循环遍历数据源,不用手动操作DOM节点,提高软件开发效率。
第三个是采用虚拟DOM和利用Diff算法,把后台的数据传到虚拟DOM中,利用Diff算法比较前后数据更新的变化,这样就可以尽量地复用DOM节点,优化性能。
2、谈谈你对MVVM原理的理解
M就是Model模型,对应Vue实例中的data函数,V就是View视图,对应Vue中的模拟,VM就是ViewModel视图模型,对应Vue实例。
传统的前端需要手动地操作DOM节点来渲染页面,而MVVM模式就直接把后台的数据挂载到Vue实例中。
ViewModel会自动把Model中的数据渲染到View视图中,而当View视图发生变化时,ViewModel也会更新Model层的数据,所以ViewModel是View和Model之间的桥梁,这是一个双向的过程,也就是MVVM是一个数据双向绑定的过程。
这样的好处,就是可以把前后端独立分离开来,提高软件开发效率。
3、什么是响应式数据原理
首先,我们要知道什么是响应式?
响应式就是,页面渲染时使用到了一个数据,当数据改变时,页面会响应是否更新数据,这就叫相应式,这样的好处是不用手写进行操作DOM节点。
然后,什么是响应式数据原理?
简单地来说,响应式数据原理就是,vue通过Object.defineProperty对data中的所有属性进行重新定义,在数据获取和设置时添加一个拦截功能,当我们获取数据时,就会对数据进行收集依赖。当数据改变时,就会通知对应的依赖,进行页面更新渲染。
具体地来说,就是在vue实例初始化的时候,首先会利用initData方法来初始化data数据,然后new Observer来对数据进行检测。
如果数据类型不是对象或者数组的时候,是不会检测的,直接返回数据。
如果数据类型是一个对象,就会调用this.walk()方法对对象进行一个处理,它内部使用defineReactive()方法循环属性,定义响应式变化,它的核心就是通过Obejct.defineProperty重新定义属性,当用户获取数据时,就会调用get方法,收集当前数据的依赖。当改变数据时,就会通知对应的依赖,利用set方法判断数据更新变化,然后触发notify方法进行视图更新。
如果数据类型是数组的话,首先我们要知道改变数组内容的方法有7种,分别是pop、push、shift、unshift、splice、sort、reverse。只要操作其中的一个方法,就会改变数组内容。
那么如何检测数组变化呢?
这就需要使用函数绑定方法,具体来说就是重新定义该数组的原型方法,通过原型链找到我们自己写的原型方法,这样数组内容改变时,调用我们写的方法,这样视图就会更新渲染。如果数组里面的属性有对象的话,就用Observer进行深度遍历,对对象进行检测。
4、说一下computed和methods的区别
computed和methods的区别主要有两个:
第一个是属性、方法调用。computed是属性调用,在定义函数时以属性的形式调用,methods是方法调用,在定义函数时以方法的形式调用,要加()
第二个是缓存功能,computed是计算属性,是有缓存的,当它的依赖属性改变的时候,才会进行重新计算,如果数据没有改变,它是不会运行的。而methods是方法,没有缓存功能,只要你调用一次,不管数据是否改变,它都是执行。
所以,性能方面的比较的话,computed是比methods的性能会好一点,去掉那些无谓的操作。
5、说一下computed和watch的区别
computed是计算属性,它依赖于其他的属性值,当属性值改变的时候,才会重新计算。
watch是监听属性,用来监测自身的属性值,不需要依赖其他属性值。
它们的相同点:都是监听数据变化的。
不同点在于应用场景:computed是用于计算的,适合依赖多个属性值进行计算。
而watch是监听一个属性值,适合用于进行异步操作或者比较大的开销的时候,进行数据监听。比如说设置一个定时器或者监听路由变化这种,这里就需要watch监听,这是computed计算属性没有的。
6、说一下vue的生命周期
vue的生命周期,用一句话来概述就是,一个vue实例从开始创建到销毁的过程,就叫做vue的生命周期
vue的生命周期的关键阶段有8个vue生命周期函数,也叫做生命周期方法/钩子。可以分为3类:
第一类是创建期间的生命周期函数:
1、beforeCreate:这个时期,已经初始化好了vue实例,但是数据和方法还没有被初始化,还没有够被调用。
2、created:这个时期,vue中的数据和方法已经初始化好了,这是第一个可以调用数据和方法的函数
3、BeforeMoute:这个时期,vue中的数据已经预编译好了,但是还没有渲染到模板中。
4、Mouted:这个时期,数据已经渲染到了模板中,可以获取页面中的数据,这里Vue实例已经创建完成。
第二类是运行期间的生命周期函数:
1、beforeUpdate:这个时期,Vue中的数据改变时,视图还没有更新。
2、Updated:这个时期,视图已经更新完毕。
第三类是销毁期间的生命周期函数:
1、beforeDestroy:这是最后一个可以调用Vue中的数据和方法
2、Destroyed:Vue组件销毁,生命周期结束。