对MVC、MVP、MVVM的理解
-
MVC
阮一峰老师MVC图示
M 表示 Model , 专门用来处理数据模型。
V 表示View， 专注页面布局和数据显示。
C 表示Controller 专注于控制，执行业务逻辑，操作模型和视图。
MVC的数据之间通信都是单向的
View(视图层) 传送指令到 Controller(控制层)
Controller(控制层) 完成业务逻辑后，要求 Model(模型层) 改变状态
Model(模型层) 将新的数据发送到 View(视图层)，用户得到反馈
在MVC中，虽然View与Model之间的耦合度非常小，只需要Model修改的时候通知View发生改变即可，但是它们之间还有有很重要的联系，于是，就有了MVP
-
MVP
阮一峰老师MVP图示
M 表示 Model，专门用来处理数据模型
V 表示View，专门用来处理用户视图
P 表示Presenter，用来处理业务逻辑，在MVC的基础上，修改了通信方向
MVP中，View和Model之间没有任何通信关系，所有的通信和业务逻辑都放在Presenter层中
View(视图层) 发送指令到 Presenter层，
Presenter层 处理业务逻辑，要求 Model(模型层) 改变状态
Model(模型层) 修改状态之后，发送指令到 Presenter层
Presenter层通知View(视图层)做出改变
在MVP中，所有的通信都是双向的，View和Model不会直接发生通信，都通过Presenter层进行传递
在MVP中，所有的业务逻辑都写在Presenter层中，会导致Presenter层过于臃肿
在MVP中，View只负责显示视图，不包含任何业务逻辑，导致View层过薄，不具备任何主动性
由于在MVP模式中，所有的业务逻辑都放在Presenter层中，必须通过Presenter层来修改View层的界面，所以出现了MVVM
-
MVVM
阮一峰老师MVVM图示
M 表示 Model，专门用来处理数据模型
V 表示View，专门用来处理用户视图
VM 表示ViewModel，用来使的View视图层与Model层双向绑定，View的任何变动都会通知ViewModel，而Model的任何变动，也都会通知ViewModel，而不论哪一项发生改变，都会使对应的视图/数据模型同步发生改变
在MVVM中，与MVP一样，所有的通信都是双向的，数据与视图不直接发生依赖，全部通过VM层来进行双向绑定
所有的业务逻辑都由VM来进行处理，但是在View层和Model层修改都会通过VM来双向的绑定修改
谈谈对$nextTick的理解及使用场景
- 对nextTick的理解
- Vue的视图更新是通过数据驱动的，当数据发生改变的时候，将当前的数据更改保存在队列中，然后异步的更新视图
- 由于Vue的视图更新是异步的，所以我们在修改完成数据之后，不一定当前的View已经发生改变，于是就有了nextTick
- nextTick是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
- nextTick的使用场景
-
如果要在created()钩子函数中进行的DOM操作，由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作，需要通过
$nextTick()来完成。在created()钩子函数中进行的DOM操作，不使用$nextTick()会报错 -
更新数据后，想要使用js对新的视图进行操作时
-
在使用某些第三方插件时 ，这些插件需要dom动态变化后重新应用该插件，这3时候就需要使用$nextTick()来重新应用插件的方法
-
- nextTick的使用方法
- 使用
Vue.nextTick全局方法// 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了执行的回调 }) // 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示) Vue.nextTick() .then(function () { // DOM 更新了 }) - 在Vue实例对象中，使用
this.$nextTick方法new Vue({ // ... methods: { // ... example () { // 修改数据 this.message = 'changed' // DOM 还没有更新 this.$nextTick(function () { // DOM 现在更新了 // `this` 绑定到当前实例 this.doSomethingElse() }) } } })
- 使用
渐进式框架的理解
对于渐进式框架来说，主要就代表着它的主张性最小，没有多做职责之外的事。
-
什么是主张性？
在你使用一个框架的时候，如果你使用了它的一部分，你就必须使用它的全部，或是很大一部分东西，这个就叫强主张
而说Vue的主张性最小，是因为你可以只使用它的一部分东西，它可以很容易的集成到你原有的项目中去，甚至说你只是用它来改造一下一些公共的组件，你可以在传统的html页面中使用它，也可以使用脚手架工具来搭建一个大型的项目 - 在学习方面，Vue的学习代价也不是很大，你可以非常容易的上手，我们没有必要一上来就搞明白Vue的所有功能，可以先从核心功能扩展，然后在逐步学习，当你需要的时候，你再去使用它的其他功能，并且你可以非常容易的使用Vue结合其他的框架来进行搭配
组件样式属性 scoped 问题及解决方法
在Vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，局部有效。
Vue中的scoped属性的效果主要通过PostCSS转译实现，给所有的样式动态的生成一个属性，然后通过在编译后使用属性选择器加原有选择器的方式来设置样式，这样就不会对其它组件造成影响，当前组件的样式只对当前组件生效
然而，我们在使用scoped的时候，经常会遇到样式问题，比如说
- 要在父组件中修改子组件的布局样式等
- 要修改v-html渲染出的内容的样式时
- 使用一些UI框架时，修改样式的问题
对于这些问题的解决方案：
1.同时使用scoped局部样式和全局样式
<style>
/*全局样式*/
</style>
<style scoped>
/*局部样式*/
</style>
-
子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，这么设计的目的是父组件可以对子组件根元素进行布局。
-
使用深选择器，
>>>或者/deep/进行样式穿透
在Vue中，可以使用>>>或者/deep/来进行样式穿透，达到修改样式的功能
在sass或者less这种预编译器中，不支持>>>，可以使用/deep/
<style scoped>
.el-form >>> .el-input {
// 修改样式
}
.el-form /deep/ .el-input {
// 修改样式
}
</style>
建议使用第三种方法，这样既不会对全局样式造成污染，也可以达到修改样式的功能
Vue中的双向数据绑定是如何实现的
Vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的
要实现这种双向数据绑定，必要的条件有：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、MVVM入口函数，整合以上三者
Vue数据双向绑定实现的原理
个人理解：在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图
而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定
详述虚拟DOM中的diff算法
-
首先要先讲一下虚拟DOM是如何实现的
虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树，当数据发生改变的时候，会先对虚拟DOM进行模拟修改，然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比，而这个对比就是通过diff算法来进行的
虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象） -
接着，来看一下diff算法是如何进行比对的
正常的diff算法，是通过层层对比，单单对比来进行的，对于我们的前端性能来说，很明显是不可以这样实现的。
前端的虚拟DOM对比
所以，前端的diff算法是通过以下步骤来实现的
步骤一：用JS对象模拟DOM树
步骤二：比较两棵虚拟DOM树的差异
步骤三：把差异应用到真正的DOM树上
同时维护新旧两棵虚拟DOM树，当数据发生改变的时候，开始执行对比
首先对根元素进行对比，如果根元素发生改变就直接对根元素替换
如果根元素没有发生改变的话，再对下一层元素进行对比，如果对比发现元素发生删除，就执行删除，发现元素被替换就执行替换，发现添加了新的元素就执行添加
对比的同时，会通过key值来判断元素是否发生改变，判断元素是仅仅位置发生改变还是需要整个替换或删除
如果不是元素发生改变的话，再对内容进行对比，如果是内容发生改变的话，就直接修改内容
其实就是进行逐层对比，再通过不同的对比来判断执行不同的操作
Vue提供了几种脚手架模板
-
webpack- 一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。 -
webpack-simple- 一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。 -
browserify- 一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。 -
browserify-simple- 一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。 -
simple- 一个最简单的单页应用模板。 -
pwa- 一个集成pwa环境的webapp的模板
常见的几种MVVM的实现方式
实现数据绑定的做法有大致如下几种：
- 发布者-订阅者模式（backbone.js）
- 脏值检查（angular.js）
- 数据劫持（vue.js）
-
发布者-订阅者模式
一般通过sub,pub的方式实现数据和视图的绑定监听，
更新数据方式通常做法是vm.set('property', value)。这种方式现在毕竟太low了，我们更希望通过vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式。
-
脏值检查
angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，
最简单的方式就是通过 setInterval() 定时轮询检测数据变动，
angular只有在指定的事件触发时进入脏值检测，大致如下：1、DOM事件，譬如用户输入文本，点击按钮等。(
ng-click)
2、XHR响应事件 ($http)
3、浏览器Location变更事件 ($location)
4、Timer事件($timeout,$interval)
5、执行$digest()或$apply() -
数据劫持
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，
通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。
网友评论