vue基本的执行流程—Vue源码的学习

day01

Vue与模板

使用步骤

1. 编写 页面 模板
   1）直接在html标签中写 标签 作为模板
   2）使用 template 作为模板
   3) 使用单文件 （ < template /> ） 作为模板
2. 创建VUE的实例 ，（new 一个vue对象）
   1）在vue的构造函数中提供渲染数据所需要的各种方法：data,methods,…
3. 将vue挂载到 页面中 （mounted）或者vue源码中实现

数据驱动模型

VUE 的执行流程

1. 获得模板：模板中有“坑”
2. 利用vue构造函数中所提供的数据来“填坑”，得到可以在页面中显示的“标签”
3. 将标签替换页面中原来有坑的标签

vue 利用 我们提供的数据 和页面中模板 生成了一个新的html标签 （node元素），
替换到了 页面中放置模板的位置

示例: vue执行流程

简化版

    <div id="root">
        <div>
            <div>
                <p>{{name}} --- {{message}}</p>
            </div>
        </div>
        <p>{{name}}</p>
        <p>{{message}}</p>
    </div>

     let regKuohao = /\{\{(.+?)\}\}/g; // 匹配{{}}括号
     // 以{{开始  }}结束，中间匹配除回车换行之外的多个字符， ( ) 里面表示分组
     
     // 1 找到模板
     let temNode = document.querySelector('#root'); //模板

     // 2 模拟数据
     let data = {
         name:'名字',
         message:'一个消息'
     }

     // 3. 将数据放到模板中
     //  一般都是使用 递归 
     // 在现在这个案例中，template是DOM 元素
     // 在真正的Vue 源码中是字符串  :  DOM -> 字符串模板 -> 抽象语法树 -> 虚拟DOM -> 真正的DOM 
     function compiler(template, data){
         // 把 template 的子元素带有 {{ }} 的给处理一下
         let childNodes = template.childNodes; // 子元素
         for(let i=0; i < childNodes.length; i++ ){
             let type = childNodes[i].nodeType; //节点类型 1 元素  3 文本节点
             if( type === 3){
                 // 文本节点，可以判断里面是否有 {{}} 插值
                 let txt = childNodes[i].nodeValue; // 该属性只有文本节点才有意义

                 // 有没有双括号？ //正则表达式
                 txt = txt.replace(regKuohao,function( _ , g1 ){ // relace 使用正则匹配一次， 函数就会被调用一次
                                                           // 函数的第 0 个参数，表示匹配到的内容
                                                           // 函数的第 n 个参数，表示正则中的第n 组
                     g1 = g1.trim();
                     //将 {{ xxx }} 用这个 值替换
                     return data[g1]
                 })

                 // 注意 txt 现在和 DOM元素 是没有关系的
                 childNodes[i].nodeValue = txt;

             }else if( type === 1){
                 // 元素，有没有子元素？是否需要将其子元素 进行判断是否插值
                 compiler(childNodes[i], data)
             }
         }
         
     }

     let generateNode = temNode.cloneNode(true); // 注意这里是Dom元素，可以这么用，（虚拟DOM就不行）
	
	 console.log(temNode)
     compiler(generateNode,data);
     console.log(generateNode)
     //temNode 是引用类型，
     //我们没有生成新的template，所以这里看到的是直接在页面中就更新的数据
     //这样做 模板就没了

     // 4. 放到页面中
     root.parentNode.replaceChild(generateNode,root)

以上代码实现了Vue最基本的数据显示。

总结

步骤拆解：

1. 拿到模板
2. 拿到数据（data 等）computed 、props
3. 将数据和模板结合，得到的 是html 元素（dom元素）
4. 放到页面中