vue-日常笔记

在使用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初始化组件和页面

高效的复制粘贴工程师