Vue基础理解及深入响应式原理

目录

    • 初步认识vue
        • 1. vue版本
        • 2. vue源代码 【 思维 】
        • 3. 数据驱动视图
        • 4. 双向绑定
        • 5. 面试题/理解: 如何理解Vue深入响应式原理?


初步认识vue

1. vue版本

  1. vue 1.0 2014年
  2. vue 2.0 2016年
  3. vue 3.0【 试用版 】 2019年国庆

2. vue源代码 【 思维 】

当我们通过script引入vue.js后,就会全局注册一个Vue变量,它是一个构造函数

  • 匿名函数
      (function (形参1,形参2) {
     
        /* 你的代码 */
      })(实参1,实参2)
  • 好处
    1. 防止全局作用域
    2. 防止命名冲突
    3. 防止一些脚本的攻击
    4. 封装js库基本上都是用它来完成
  • 模仿Vue源代码
(function(global, factory) {
     
/* 
 ! global是浏览器的全局对象  window
*/
global.MiniVue = factory();  //将MiniVue变成全局变量
})(this, function() {
     
'use strict'; 

function MiniVue(options) {
     
 if (!(this instanceof MiniVue)) {
     
   warn(
     'MiniVue is a constructor and should be called with the `new` keyword'
   );
 }
 this._init(options); 
}

MiniVue.prototype._init = function(options) {
       //通过原型编写
 console.log(options);  //传入的参数
 document.querySelector(options.el).innerHTML = options.data.msg;  
 //模仿挂载传数据功能
};

return MiniVue;
});

3. 数据驱动视图

  • 意义: 当数据发生改变时,视图也会随之改变
  • 我们从现在开始,不在关注v的变化了,我们关注data

4. 双向绑定

  • 数据绑定视图,input标签的value值等于数据的值,数据变,value也会跟着变。
  • 视图绑定数据,input元素内容变,数据也跟着变。
    
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Documenttitle>
    head>
    <body>
      <div id="app">
        
        <p> {
    { msg }} p>
      div>
    body>
    <script src="../../../lib/vue.js">script>
    <script>
      new Vue({
      
        el: '#app',
        data: {
      
          msg: 'Hello Vue'
        }
      })
    script>
    html>

5. 面试题/理解: 如何理解Vue深入响应式原理?

  • 注: 数据驱动原理 <=> 双向数据绑定原理 <=> 深入响应式原理
  • 答: Vue是通过数据劫持和事件的订阅发布来实现的,数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 Object.defineProperty 】,事件的订阅发布指的是Vue通过事件来监听,通知Vue进行视图更新。
    Vue基础理解及深入响应式原理_第1张图片
  • 总结:
    • 先设置了Data中的getter和setter,然后就有一个Watcher去监听Data的数据,如果发生了改变,就重新渲染视图。
    • getter相当于 视图驱动数据
    • setter相当于 数据驱动视图
  var model = {
     
            info: 'ZERO'
        };
        input.onkeyup = function(e) {
     
            Object.defineProperty(model, 'info', {
     
                get: function() {
      //获得视图的内容 转为数据,视图驱动数据
                    return e.target.value
                },
                set: function(val) {
      // 
                    div.innerHTML = val; //视图的内容等于数据,数据驱动视图
                }
            })
            div.innerHTML = model.info;
        }

        btn.onclick = function() {
     
            model.info = '千锋教育'
        }

你可能感兴趣的:(Vue,Vue基础,深入响应式原理)