浅谈MVVM和旧的前端

浅谈MVVM和旧的前端

区别

旧的前端代码分为三部分

语言	作用
html	专门定义网页的内容和结构
css	专门添加网页样式
JavaScript	添加网页交互效果

css和html太弱,弱到喝水都会GG,缺少程序最基本的要素,所以哪怕是很小的一个修改都要js来实现,所以导致js里面有大量重复的代码

问题

采用MVVM设计模式,对前端重新划分:三部分

关于MVVM

界面：采用View：包含HTML+CSS，且HTML还是增强版

• HTML中支持变量不需要js只要程序中变量值变化界面中自动显示变化
  -可以在HTML支持分支和循环了，大大减轻了js的分支

模型对象Model：专门负责替界面保存所有变量和函数

视图模型 ViewModel：专门将莫心中的模型对象中的变量值和函数配送到界面中。并且制动保存

如何实现MVVM原理设计模式

Vue的绑定原理

针对data中的函数

• 创建new Vue({})对象：将data对象和methods对象，引入到new Vue()对象内
• 正对data对象中的每个变量都青了一对保镖——访问器属性
• 自动隐藏原data对象及其内部的变量

针对methods中的函数

• methods对象被打散为多个函数，在分别加入new vue

• 所以，methods中的函数只想要访问data中的变量，都要加this

• 特殊：DOM和jq中：时间处理函数中的this都指当前VUE

• vue里面的this都指向当前vue对象或当前组件对象

虚拟dom树
new vue会扫描界面中的所有元素创建一个简化版的虚拟dom树

1，当首次加载界面是new Vue() 对象会遍历扫描原始DOM树
2，new Vue() 之江可能发生变化的元素对象保存进虚拟DOM树中

虚拟DOM树

举例：

html代码

    <div id="app">
      <!-- 按钮1 -->
      <button @click="minus">-</button>
      <!-- 数据标签 -->
      <span>{{name}}</span>
      <!-- 按钮2 -->
      <button @click="add">+</button>
    </div>

dom树

{
  {span,innerHtml,{{数值}}}
}

结论：

当在任何位置修改了data中的属性变量值（访问器属性）都会自动调用访问器属性的set函数，都会自动调用通知函数()

通知函数会通知虚拟dom树，某个变量发生改变

虚拟DOM树会立刻遍历自己内部所有可能发生变化的元素， 只找到受当前这个变量影响的个别元素

用已经疯传好的原生DOM操作，自动修改界面中真实的DOM元素，从而显示变量的新值

总结

vue的绑定原理：

访问器属性虚拟DOM树

虚拟DOM树的优点：

• 小：只包含可能变化的元素
• 遍历查找快
• 避免重复编码：提前封装了增删改查
• 更新效率高：只更新受影响的元素