( 第二篇 )仿写'Vue生态'系列___'模板小故事.'

ivydom 发布于2019-08-30 15:44 / 2556人阅读

摘要：第二篇仿写生态系列模板小故事本次任务承上完成第一篇未完成的热更新配置核心完成模板解析模块的相关编写很多文章对模板的解析阐述的都太浅了本次我们一起来深入讨论一下尽可能多的识别用户的语句启下在结构上为双向绑定等模块的编写打基础最终效果图一模板页

( 第二篇 )仿写"Vue生态"系列___"模板小故事."

本次任务

承上: 完成第一篇未完成的"热更新"配置.

核心: 完成"模板解析"模块的相关编写, 很多文章对模板的解析阐述的都太浅了, 本次我们一起来深入讨论一下, 尽可能多的识别用户的语句.

启下: 在结构上为"双向绑定"、watch、dep等模块的编写打基础.

最终效果图

一. 模板页面

我们既然要开发一个mvvm, 那当然要模拟真实的使用场景, 相关的文件我们放在:"cc_vue/use"路径下, 代码如下:

"cc_vue/use/1:模板解析/index.html", 本篇专门用来展示模板解析的页面

"cc_vue/use/1:模板解析/index.js", 本篇专门用来展示模板解析的逻辑代码

本来要展示html文件的信息, 但是内容冗长而且没有什么技术可言, 所以不在此展示了.

function init(){
  new C({
    el: "#app",
    data: {
      title: "努力学习",
      ary: [1, 2, 3],
      obj: {
        name: "金毛",
        type: ["幼年期", "成熟期", "完全体"]
      },
      fn() {
        return "大家好我是: " + this.obj.name;
      }
    }
  });
}

export default init;

一. 配置文件与简易的热更新

之所以说它是简易的, 原因是我们并不会去做到很细致, 比如本次不会去追求每一次的精准更新, 而是每一次都会对整体采取更新, 毕竟本次工程热更新只是一个知识点, 我们还有很多很多更重要的事要做emmmm

一些自己的观点
热更新并不是算很神奇, 我之前配置过vuex的热更新相关, 后来总结了一下, 它与回调函数概念差不多, 原理就是当编辑器, 或者是serve检测到你的文件有相应变化的时候, 执行一个回调函数, 这个回调函数里面就是一些重新渲染, 更新dom等等的操作, 你可能会有疑问, vue的热更新做的那么好, 也没看见有什么热更新的回调函数啊, 其实这都归功于"vue-loader", css 热更新考的是css-loader, 他们在处理文件的阶段就把热更新的回调代码注入了js文件里面, 所以我们才会是无感的, 所以没有"loader"帮助我们注入热更新, 那本次我们就自己手动实现.

GPU云服务器云服务器网站模板&039 attr&039&039checked&039&039 given&039&039 php游戏代码&039&039

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116309.html

( 第二篇 )仿写&#039;Vue生态&#039;系列___&#039;模板小故事.&#039;

摘要：第二篇仿写生态系列模板小故事本次任务承上完成第一篇未完成的热更新配置核心完成模板解析模块的相关编写很多文章对模板的解析阐述的都太浅了本次我们一起来深入讨论一下尽可能多的识别用户的语句启下在结构上为双向绑定等模块的编写打基础最终效果图一模板页 ( 第二篇 )仿写Vue生态系列___模板小故事. 本次任务承上: 完成第一篇未完成的热更新配置. 核心: 完成模板解析模块的相关编写, ...

wangtdgoodluck 2019-08-26 14:06 评论0 收藏0
( 开篇 )仿写&#039;Vue生态&#039;系列___&#039;你webpack溜么?�

摘要：开篇仿写生态系列你溜么关于这个系列作者离职深造也有一个月了前端相关的视频与资料学了非常多自己感觉到现在的知识之间只是呈现出一种相互之间的弱联系也就是还不成体系每一个知识点我都学过我都会用但是统一起来就有些地方不是很明朗了相信很多前端仔也会有 ( 开篇 )仿写Vue生态系列___你webpack溜么? 关于这个系列作者离职深造也有一个月了, 前端相关的视频与资料学了非常多, 自己感...

betacat 2019-08-30 15:44 评论0 收藏0
( 开篇 )仿写&#039;Vue生态&#039;系列___&#039;你webpack溜么?�

摘要：开篇仿写生态系列你溜么关于这个系列作者离职深造也有一个月了前端相关的视频与资料学了非常多自己感觉到现在的知识之间只是呈现出一种相互之间的弱联系也就是还不成体系每一个知识点我都学过我都会用但是统一起来就有些地方不是很明朗了相信很多前端仔也会有 ( 开篇 )仿写Vue生态系列___你webpack溜么? 关于这个系列作者离职深造也有一个月了, 前端相关的视频与资料学了非常多, 自己感...

孙吉亮 2019-08-26 10:41 评论0 收藏0
写了2年python，知道 if __name__ == &#039;__main__&#039;

摘要：原因很简单，因为中的代表的就是当前执行的模块名。缺点就是主程序会受待执行程序的影响，会出现待执行程序中抛异常或主动退出会导致主程序也退出的尴尬问题。总结来说就是，一个是在子进程中执行代码，一个是在当前进程中执行代码。 showImg(https://segmentfault.com/img/remote/1460000018607395?w=502&h=318); 相信刚接触Pytho...

wangbinke 2019-07-31 10:11 评论0 收藏0
[每日小记]如何创建一个&#039;干净&#039;的map

摘要：以上的描述说，此方法有两个参数，新创建对象的原型对象。创建一个干净的对象，我们就要借助上面的这个方法了是基本数据类型，是没有原型的，所以讲作为第一个参数传入创建出来的对象就是干净的对象。这个对象不会继承任何。什么叫干净的map 一般声明一个map对象我们使用字面量的方法 let map = {}; 我们知道，使用字面量声明的对象其实就是默认继承了Object对象，也就是说这个对象拥有...

happen 2019-08-22 17:23 评论0 收藏0