Vue学习系列——初识Vue.js核心

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue学习系列——初识Vue.js核心相关的知识,希望对你有一定的参考价值。

 前言

    vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

    vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一处需要动态更新的DOM节点创建一个指令对象。每当一个指令对象观测的数据变化时,它便会对所绑定的目标节点执行相应的DOM操作。基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中,业务代码只需要涉及模板和对数据状态的操作即可,这使得应用的开发效率和可维护性都大大提升。

    因此,数据绑定,组件是整个vue的核心。响应的数据绑定就是数据驱动视图的概念。它让你在写 Web 应用介面时,只需要关注两件事:数据如何展示和数据如何变化。一旦数据发生变化时,比如用户输入,或者 ajax 请求返回后数据发现修改,对应的视图介面会自动的进行更新。

 原理

    vue.js是MVVM的架构,如图:

 

    从图中可以看出视图层和模型层的相互传递,通过用户操作来绑定一些DOM事件来重新渲染到视图层。具体的内部架构如下图:

 

 开始

一、 数据绑定

    实现方式:数据绑定即是视图层和模型层的双向绑定。即数据的改变驱动了视图的自动更新。  

    通过ViewModel控制,修改数据,从而控制View的展示,实现MVVM的思想。

 

    里面的两个属性getter和setter,在这两个函数内部实现依赖的收集和触发,而且完美支持嵌套的对象结构。对于数组,则通过包裹数组的可变方法(比如push)来监听数组的变化。这使得操作Vue.js的数据和操作原生对象几乎没有差别。

  • Obejct.defineProperty 【提供getter 和 setter】
  • Observer 【提供getter 和 setter】—— 订阅者模式,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知,用来实时事件处理系统。
  • watcher 【提供getter 和 setter】 —— 模板和 Observer 对象结合在一起的纽带
  • Dep 【负责收集watcher】
  • Directive 【处理Vue模板指令】

    observe -> 触发setter -> watcher -> 触发update -> Directive -> 触发update -> 指令(如上图流程所示)

<span>Hello, this is {{name}}</span>
<script>
var app = new Vue({
    el : \'#app\',
    data : {
        name: \'i3yuan\'
    }
})

</script>

初识vue

VUE学习笔记:1.初识vue.js

Vue.js 初识

Vue.js实战:初识Vue.js

Vue.js初识

WEB前端,初识vue.js