Vue3工具函数源码踩坑记

    git clone https://github.com/vuejs/vue-next.git
复制代码

admin@ayuandeMacBook-Pro vue-next % node -v
v10.19.0
admin@ayuandeMacBook-Pro vue-next % yarn -v 
zsh: command not found: yarn
复制代码

    npm install --global yarn
    
复制代码

admin@ayuandeMacBook-Pro vue-next % yarn build
yarn run v1.22.11
    
复制代码

    node -v
    # v14.16.0
    # 全局安装 yarn

    # 推荐克隆我的项目
    git clone https://github.com/lxchuan12/vue-next-analysis.git
    cd vue-next-analysis/vue-next

    # 或者克隆官方项目
    git clone https://github.com/vuejs/vue-next.git
    cd vue-next

    npm install --global yarn
    yarn # install the dependencies of the project
    yarn build
复制代码

yarn

yarn build

复制代码

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
复制代码

199.232.68.133	raw.githubusercontent.com
复制代码

git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
复制代码

vi ~/.bash_profile
复制代码

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
复制代码

source ~/.bash_profile
复制代码

echo $SHELL

---------
如果显示：
/bin/zsh
复制代码

vim ~/.zshrc
复制代码

source ~/.bash_profile
复制代码

source ~/.zshrc
复制代码

nvm -v

0.38.0
复制代码

sudo npm install --global yarn
复制代码

/**
 * List of @babel/parser plugins that are used for template expression
 * transforms and SFC script transforms. By default we enable proposals slated
 * for ES2020. This will need to be updated as the spec moves forward.
 * Full list at https://babeljs.io/docs/en/next/babel-parser#plugins
 */
export const babelParserDefaultPlugins = [
  'bigInt',
  'optionalChaining', 
  'nullishCoalescingOperator'
] as const

复制代码

/**
*用于模板表达式的@babel/parser插件列表
*转换和SFC脚本转换。默认情况下，我们启用计划的提案
*以下都是针对ES2020新特性做babel转换用的。
*详细babel插件列表查看：https://babeljs.io/docs/en/next/babel-parser#plugins
*/
const babelParserDefaultPlugins = [
    'bigInt', //ES2020新增特性 
    'optionalChaining', // 可选链`?.`
    'nullishCoalescingOperator' //空值合并运算符`??`
];
复制代码

const x = Number.MAX_SAFE_INTEGER; // 9007199254740991
const y = x + 1; // 9007199254740992 • equal to 2^53
const z = x + 2; // 9007199254740992 • well, it's broken
复制代码

const aBigInteger = 9007199254740993n;
// There is also a constructor:
const evenBigger = BigInt(9007199254740994); // 9007199254740994n
const fromString = BigInt("9007199254740995"); // 9007199254740995n
复制代码

let sum = 1n + 2, multiplication = 1n * 2;
// TypeError: Cannot mix BigInt and other types, use explicit conversions
复制代码

Number(900719925474099267n); // 900719925474099300 • ????‍♂️

复制代码

// Checking for intermediate nodes:
const deeplyNestedValue = obj && obj.prop1 && obj.prop1.prop2;// Checking if the node exists in the DOM:
const fooInputEl = document.querySelector('input[name=foo]');
const fooValue = fooInputEl && fooInputEl.value;
复制代码

// Checking for intermediate nodes:
const deeplyNestedValue = obj?.prop1?.prop2;// Checking if the node exists in the DOM:
const fooValue = document.querySelector('input[name=foo]')?.value;
复制代码

// x is incremented if and only if 'a' is not null or undefined
a?.[++x] 
复制代码

const test = {
  null: null,
  number: 0,
  string: '',
  boolean: false
};
const undefinedValue = test.dog || "Cat"; // "Cat"
const undefinedValue = test.dog ?? "Cat"; // "Cat"const nullValue = test.null || "Default"; // "Default"
const nullValue2 = test.null ?? "Default"; // "Default"const numberValue = test.number || 1; // 1
const numberValue2 = test.number ?? 1; // 0const stringValue = test.string || "Hello"; // "Hello"
const stringValue2 = test.string ?? "Hello"; // ""const booleanValue = test.boolean || true; // true
const booleanValue2 = test.boolean ?? true; // false
复制代码

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

//有兼容性问题, 在使用到了JSX的时候兼容性不是很好
复制代码

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;
复制代码