在使用vue过程中的一些笔记吧,以前都是记doc,偶尔写在git,不过感觉还是放在博客,易于浏览一些。随时根据看到的东西更新……
1.模板编译原理
https://segmentfault.com/a/1190000006990480
https://mp.weixin.qq.com/s/OPQ5Nh_f3rp1mAkqsj6oDg
https://juejin.im/post/5ab2ff496fb9a028c06ab78f
1.1:html中的节点类型:
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
基于vue2的源码:
1.2:vue中的解析器类型:
解析AST节点过程中主要用到了HTML解析器,主要过程如下:
parseHTML( template, // 开始标签钩子函数 start (tag, attrs, unary, start, end){ // let element = createASTElement(tag, attrs, currentParent); let element = (function (tag, attrs, parent) { return { type: 1, tag, attrsList: attrs, children: [], parent, } })(); } // 文本标签钩子函数 chars (text, start, end) { // 文本节点的钩子函数,会忽略空格。同时会在模板中将这些空格截取掉。 return { type: 3, text } } // 注释钩子函数 comment (text, start, end) { return { type: 3, // Node.COMMENT_NODE是8,为什么这里要写成type 3 text, isComment: true } } // 结束标签钩子函数 end (tag, start, end) { // 将当前构建节点从AST层级关系栈中弹出来 } )
解析开始标签时,比如<div>和<input />,可通过解析标签结尾得到该标签是不是自闭合标签,自闭合标签没有子节点,所以一定是ast树的尾结点,解析时不必入栈。
怎么存储ast树的呢?
在start之前如何解析得到tag、attrs、unary?
<div class="temp" id="test"></div>
在解析上述模板时,利用正则表达式判断整段template是否有开始标签,如果有,得到标签名,然后截断,剩下class="temp" id="test"></div>,继续利用正则解析属性,得到class,截断,剩下id="test"></div>,继续解析属性得到id,截断,剩下></div>,再解析时发现是标签结尾,结束。得到了tag、attrs。
1.3:构建AST层级关系树
用栈来记录AST的dom层级关系,类似于dom的深度。(原理很像c语言编译时候)
解析过程是一个循环递归的过程,不断的截取开始或者结束标签,入栈出栈,这个栈可以帮助元素获取父元素,还能判断html标签元素是否正确闭合。。
纯文本内容元素,script、style、texteara,不需要被解析到ast中,直接当做文本advance即可。
1.4:文本解析器
文本分两种类型,不带变量的纯文本和带变量的文本,后者需要使用文本解析器进行二次加工。
2.vDom和Dom-diff
https://mp.weixin.qq.com/s/3G3VrG5VzOEBU5EcyCK7gg
创建虚拟DOM
createElement(type, props, children) 用来创建虚拟dom
• type: 指定元素的标签类型,如'li', 'div', 'a'等
• props: 表示指定元素身上的属性,如class, style, 自定义属性等
• children: 表示指定元素是否有子节点,参数以数组的形式传入
渲染DOM
render(就是vue的h)方法可以将虚拟DOM转化成真实DOM
DOM-diff比较两个虚拟DOM的区别
diff-patch算法: https://github.com/aooy/blog/issues/2
3.composition api的一些用法
因为我一直记不住这种写法,所以……搞个备份,哈哈哈哈哈
3.1 v-model
3.2 Hook
官方示例-逻辑提取与复用:https://composition-api.vuejs.org/zh/#%E9%80%BB%E8%BE%91%E6%8F%90%E5%8F%96%E4%B8%8E%E5%A4%8D%E7%94%A8
提取公用的一些自定义的hook
4.vue中怎么这么配置路径别名,如@/src
4.1.模板template中的路径别名处理规则,默认是:
https://cli.vuejs.org/zh/guide/html-and-static-assets.html#从相对路径导入
https://vue-loader.vuejs.org/zh/guide/asset-url.html#转换规则
vue-loader提供路径重定向转换能力。
4.2 vue.config.js中可配置
chainWebpack: config => { // 默认就是src,所以下面这一句不用写,源码地址:vue-cli/packages/@vue/cli-service/lib/config/base.js // config.resolve.alias.set('@', path.resolve(__dirname, 'src')); config.resolve.alias.set('@assets', path.resolve(__dirname, './src/assets')); }
4.3 tsconfig.json中可配置
https://www.tslang.cn/docs/handbook/module-resolution.html 指定映射的路径
{ "compilerOptions": { "target": "esnext", "baseUrl": ".", "paths": { "@/*": ["src/*"], }, "lib": [ "esnext", ] }, "include": [], "exclude": [] }
5.plop.js初始化组件和页面
高效的复制粘贴工程师