Vue 实例

在刚接触Vue的时候,就知道 实例 在Vue中是一个重要的概念,在学习之后也整理了一篇有关于Vue实例和生命周期的学习笔记。经过一段时间的学习之后,重新再温习了一遍有关于Vue的实例,整理一下,提供给有需要的同学作为参考资料。

Vue 的基本原理

Vue是一个优势的JavaScript框架,其主要是用来处理 视图层(我的理解就是UI层)。当用户操作 View Model (即JavaScript,在Vue中指的是Vue实例,一个观察者)使其依照一定的逻辑取得需要改变的数据(Model),配合在HTML中Vue提供的模板语法来改变配置,重新渲染后使画面产生相应的变化(View)。用一张图来描述这个过程:

比如我们在浏览器中渲染出来的页面有个区域和“删除”按钮,当用户点击“删除”按钮之后,会移除这个区域。用户交互之后反馈给用户的是,界面(视图)中的区域被移除。看上去非常的简单,其实在Vue中,主要经历了以下几个过程:

  • (1) 用户在界面中点击“Remove”按钮进行交互
  • (2) 通过模板中的绑定触发Vue实例中注册的remove()事件
  • (3) remove()事件通过Ajax向服务器请求数据
  • (4) 服务器取得的数据后重新传给Vue实例
  • (5) Vue实例修改绑定的ViewModel
  • (6) ViewModel改变后触模板重新渲染
  • (7) 改变后的视图反馈给用户(用户看到重新渲染后的视图)

咱们可以用下图来描述这个交互的整个过程:

事实上Vue的原理要比这复杂的多,只不过用上图来阐述对于初学者而言在概念上有一定的辅助作用。但其也遵循一个原则:视图的状态由数据描述,并且通过数据来驱动视图变化

深入的概念还无法理解的情况之下,我们暂时只需要先记住,在Vue中视图和数据之间的关系是一个非常简单的关系,即双向数据绑定

Vue采用发布者 —— 订阅者模式实现双向数据绑定,首先Vue将会获得需要监听的对象的所有属性,通过Object.defineProperty方法完成对象属性的劫持,将其转化为gettersetter,当属性被访问或修改时,立即将变化能知给订阅者,并由订阅者完成相应的逻辑操作。

我们可以用下图来描述双向数据绑定主要流程:

  • Observer:主要处理属性监听逻辑,将监听属性转化为getset属性,当属性被访问时,调用dep.depend()方法,而属性被修改时,则调用了dep.notify()方法
  • Dep:担任发布者的角色,维护访问者列表,负责订阅者的添加和通知工作,上面所提到的depend()notify()方法在这里实现
  • Watcher:担任订阅者角色,即Dep.target,可以订阅多个Dep,在每次收到发布者消息通知时触发update()方法执行更新逻辑

创建Vue实例

接下来,我们来创建一个Vue实例,就是前面提到的ViewModel部分。Vue实例是Vue中很重要的一部分,创建他很简单:

let app = new Vue({

})

创建Vue实例很简单,通过new Vue({})即可。事实上,Vue实例就是一个JavaScript对象,而且常常将这

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-instances.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部