Vuejs

Vuejs - 图1
Vue.js 的核心是采用HTML模板语法来声明式地将数据渲染进 DOM 的响应式系统模型。
关键点渐进式框架：Vue核心只关注视图层，如果你想要在框架中加入路由、状态管理的功能，需要另外引入库文件。

视图渲染

构建DOM有两种方式：

  • 直接使用html文档，利用浏览器解析html，直接构成DOM树。

  • 通过DOM提供的API，基于vdom使用JS来构建渲染函数，生成DOM树。

    前端MVC

    image.png
    关键点MVC并没有解决直接操作DOM的麻烦，只是为了分离代码的功能块。
    缺点MVC在每一层都有驱动函数，不能将驱动管理在一起。

  • model：管理视图所需要的数据，以及监听数据，更新视图。

  • view：HTML模板 + 渲染函数。

  • controler：管理事件逻辑。

    1. <body>
    2.   <div class="app"></div>    
    3.   <script>
    4.       //数据层  
    5.       const M = {
    6.           data: {
    7.               _message: 'hello',
    8.           },
    10.           //data数据劫持
    11.           init: function () {
    12.               let _this = this;
    13.               Object.defineProperty(_this.data, 'message', {
    14.                   get: function () {
    15.                       return _this.data._message;
    16.                   },
    17.                   set: function (value) {
    18.                       _this.data._message = value;
    19.                       console.log(_this.data._message);
    20.                     //data改变时，重新渲染视图。
    21.                       V.render(value);
    22.                   }
    23.               })
    24.           }
    25.       }
    27.       //视图层：数据模型，需要注入到渲染函数里。
    28.       const V = {
    29.           el: '.app',   //使用innerhtml将模板挂载在html页面里。
    30.           template: 
    31.           `<div>{{ message }}</div>
    32.           <input type="text" class="textInput">`,
    33.           render: function (mutedData) {
    34.               if (!mutedData) {
    35.                   this.template = this.template.replace(/{{(.*?)}}/g, M.data.message);
    36.                   var div = document.createElement('div');
    37.                   div.innerHTML = this.template;
    38.                   document.querySelector(this.el).appendChild(div);
    39.               }else{
    40.                   document.querySelector(this.el).children[0].children[0].innerText = mutedData;
    41.               }
    42.           }
    43.       }
    45.       const C = {
    46.           bindEvent: function () {
    47.               const oInput = document.getElementsByClassName('textInput')[0];
    48.               oInput.addEventListener('input', this.handleInput, false);
    49.           },
    50.           handleInput: function (e) {   
    51.               console.log(e)            
    52.               M.data.message = e.data;
    53.           }
    54.       }
    56.           ; (function () {
    57.               M.init();
    58.               V.render();
    59.               C.bindEvent();
    60.           })();
    61.   </script>
    62. </body>

    前端MVVM

    image.png
    语义一种软件架构模式，分离图形界面和业务逻辑（根据用户交互行为，编写一些curd数据的代码）。

  • model：页面模板渲染所需要的数据模型。本质上就是javascript对象，用于存取数据，并提供curd操作或者一些高级的特性方便操作数据。

  • viewModel：负责视图显示的逻辑。
  • view：HTML模板 + 视图渲染。本质上就是DOM结构。

关键点把关注点放在视图上。视图的改变有两种情况：事件触发改变model（重点）、model中的数据库变更。

  • 数据绑定：model中的数据发生改变后，View中的页面显示同步发生变化。

  • DOM监听：View中的UI元素发生事件，同时能够跳转到Model中定义的事件处理程序。

    <body>
    //view层
  <div id="vue">
      <button class="btn1" v-on:click="add()">按钮+</button>
      <h3>计数：{{ counter }}</h3>
      <button class="btn2">按钮-</button>
  </div>

  <script>
    //new Vue就是view-model，传入的对象就是Model层。
      const app = new Vue({
          el: "#vue",
          data: {
              counter: 1,
          },
          methods: {
              add() {
                  this.counter++;
              }
          }
      })
  </script>
</body>

    不同点

    MVVM视图的更新渲染，事件的绑定，都是由VM来驱动管理。而MVC模型的驱动分散在不同的层。

生命周期

语义实例化new Vue( options )，Vuejs内部所做的一系列操作，比如：绑定事件，数据劫持，模板挂载，模板渲染…
关键点在Vue实例化的生命周期过程中，也提供钩子函数，自动执行回调。