1.对于MVVM的理解
MVVM是 Model-View-ViewModel 的缩写。
Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层,因为它仅仅关注数据本身,不关心任何行为。
View:用户操作页面,当ViewModel对Model进行更新的时候,会通过数据绑定更新到View。
ViewModel:业务逻辑层,View需要什么数据,ViewModel要提供这个数据;View有某些操作,ViewModel就要响应这些操作,所以可以说它是Model for View。
总结:MVVM模式简化了界面与业务的依赖,解决了数据频繁更新。MVVM在使用当中,利用双向绑定技术,使得Model变化时,ViewModel会自动更新,而ViewModel变化时,View也会自动变化。
2.开发中常用的指令有哪些?
- v-model:一般用在表达输入,很轻松的实现表单控件和数据的双向绑定。
- v-html:更新元素的innerHTML
- v-show 与 v-if:条件渲染,注意二者区别
使用了 v-if 的时候,如果值为false,那么页面将不会有这个html标签生成。v-show 则是不管值为true还是false,html元素都会存在,只是CSS中的display显示或隐藏。
- v-on:click:可以简写为 @click,@绑定一个事件。如果事件触发了,就可以指定事件的处理函数。
- v-for:基于源数据多次渲染元素或模板块
- v-bind:当表达式的值改变时,将其产生的连带影响,响应式的作用与DOM
语法:v-bind:title="msg"
简写::title="msg"
3.Vue 生命周期
vue生命周期总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。
- beforeCreate(创建前) vue实例的挂载元素 $el 和数据对象 data 都是 undefined ,还未初始化
- created(创建后) 完成了 data 数据初始化,el 还未初始化
- beforeMount(载入前) vue实例的 $el 和 data 都初始化了,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上
- mounted(载入后) 在 el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互
- brforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程
- updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染器讲不被调用。
- beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用
- destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
4.Vue的双向数据绑定原理是什么?
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。具体实现步骤:
- 当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 都加上 setter和getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
- compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
- Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
- MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果