归纳整理VUE实例参数与MVVM模式知识点

本篇文章给大家带来了关于vuejs/" target="_blank">vue的相关知识，其中主要介绍了关于vue实例参数以及mvvm模式的相关问题，实例化一个vue对象，参数是一个选项对象，下面一起来看一下，希望对大家有帮助。

【相关推荐：javascript视频教程、web前端】

配置参数

实例化一个Vue对象，参数是一个选项对象，下面将会对其中包含的选项做些简单的说明。

new Vue({
  options})

在Vue实例中可以通过this.$options查看实例的配置项

数据相关选项

DOM相关选项

生命周期钩子相关选项

资源相关选项

组合选项

其它选项

了解MVC

Model、View、Controller，分别表示数据、视图、控制器。其实这只是一种设计思想，

Model：数据模型，用来存储数据

View：视图界面，用来展示UI界面和响应用户交互

Controller：控制器(大管家角色)，监听模型数据的改变和控制视图行为、处理用户交互

MVVM模式

M(model)：代表的是数据

V(view)：代表的是视图(页面)

VM(viewmodel)：代表的是视图模型，作用：用来管理视图和模型的转换

MVVM是MVC的增强版，实质上和MVC没有本质区别，只是代码的位置变动而已

简单来说就是视图发生改变时模型也会发生改变，模型发生改变时视图也会发生改变，这就是vue的数据双向绑定
关键点在于 data 如何更新 view，因为 view 更新 data 其实可以通过事件监听即可，比如 input 标签监听 input 事件就可以实现了

双向绑定步骤：

• 实现一个监听器 Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

• 实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

• 实现一个解析器 Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

vue的双向绑定原理：

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

【相关推荐：javascript视频教程、web前端】

以上就是归纳整理VUE实例参数与MVVM模式知识点的详细内容，更多请关注php中文网其它相关文章！