Vue：Vue.js专业中文社区

Flutter全套教程_Flutter+Getx仿小米商城项目实战视频教程-V3版

phonegap100 — Wed, 25 Oct 2023 02:48:23 GMT

Flutter全套教程_Flutter+Getx仿小米商城项目实战视频教程-V3版

2023年新出

Dart Flutter网盘下载地址：https://pan.baidu.com/s/1iaLGIyR9UmyJyHDGH6hepg 提取码：abcd

在线学习地址：https://www.bilibili.com/video/BV1S4411E7LY?p=17

Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程-免费学

phonegap100 — Wed, 25 Oct 2023 02:44:59 GMT

Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程分享： Vue3.x视频课件及源码在线学习及网盘下载地址： https://www.itying.com/goods-1159.html

JavaScript 中 Promise 高階面試題求問

BoisonChang — Fri, 20 May 2022 01:24:00 GMT

問題:

new Promise((resolve) => {
    console.log(1)
    resolve()
}).then(async () => {
    console.log(2)
}).then(async () => {
    console.log(3)
})
new Promise((resolve) => {
    console.log('a')
    resolve()
}).then(() => {
    console.log('b')
}).then(() => {
    console.log('c')
}).then(() => {
    console.log('d')
}).then(() => {
    console.log('e')
})

正解:

1 a 2 b c d 3 e

求問思路，我自己的答案應該是 1 a 2 b 3 c d e，就是 then 之後的我覺得都會放入 microtask

爬了很多篇文作了以下筆記，但還是不知道這題為何這樣?

已知的是 async 如果沒有接 await 還是會回傳 Promise 物件
.then 中沒有回傳值的話，還是會回傳 Promise 物件 return new Promise.resolve()
.then 後的內容會被放入 microtask
會先在 task 處理完同步的，再以先進先出的方式將 microtask 任務取出執行
Promise 的狀態只能改一次改成 resolved 或者 rejected，前者可執行 then 後者 catch
Promise 在 resolve/reject 前的內容是同步的
本題貌似沒有出現會被放入 macrotask 的

vue3里怎么使用prerender-spa-plugin

dragonnext — Tue, 08 Mar 2022 01:16:30 GMT

官方给到实例是vue2的在vue3里要怎么用啊我把它放到App.vue里了打包不起作用

vue开源社区项目

getPokemon — Sat, 26 Feb 2022 04:33:50 GMT

为什么我用token登陆不了？

面试官：你真的了解 v-model 吗？(vue2)Vue.js前端

banyungong — Tue, 18 Jan 2022 08:15:00 GMT

阅读本文

你将:

弄明白： v-model 是什么的语法糖？ vue2 对原生组件究竟做了什么特殊处理？
弄明白： v-model 到底是单向数据流还是数据双向绑定？
弄明白： v-model 在语法糖之外的『副作用』？
学会如何让你的组件也支持 v-model 语法。

一、`v-model` 的本质是语法糖。

『v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。』 – 官方文档

什么是语法糖？

语法糖，简单来说就是『便捷写法』。

在大部分情况下， v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"；

<!-- 在大部分情况下，以下两种写法是等价的 -->
<el-input v-model="foo" />

<el-input :value="foo" @input="foo = $event" />

没错，在大部分情况下如此。
但也有例外：

vue2 给组件提供了 model 属性，可以让用户自定义传值的prop名和更新值的事件名。这个暂且略过，第四节会细说。
对于原生 html 原生元素，vue 干了大量『脏活儿』，目的是为了能让我们忽视 html 在api上的差异性。以下元素的左右两种写法是等价的：

textarea 元素：
select 下拉框：
input type='radio' 单选框：
input type='checkbox' 多选框：

在编程思想上，这种帮助使用者『隐藏细节』的方式叫封装。

二、v-model 仅仅是语法糖吗？(冷知识)

v-model 不仅仅是语法糖，它还有副作用。

副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。

举个例子，看下面的代码：

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: '公众号: 前端要摸鱼',
      }
    }
  }
}

响应式数据中没有定义 user.tel 属性，但是 template 里却用 v-model 绑定了 user.tel，猜一猜当你输入时会发生什么？

看效果：

揭晓答案吧： user 上会新增 tel 属性，并且 tel 这个属性还是响应式的。

这就是『副作用』带来的效果，你学会了吗？

三、 `v-model` 是双向绑定还是单向数据流？

2.1 `v-model` 是双向绑定吗？

是，官方说是。

『你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。』 —— vue2官方文档

2.2 那 `v-model` 是单向数据流吗？

是的，它甚至是单向数据流的典型范式。

虽然官方没有明确表示这点，但我们可以捋一捋两者的关系。

什么是单项数据流？
子组件不能改变父组件传递给它的 prop 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。
v-model 的做法是怎样的？
v-model 做法完全符合单项数据流。甚至于，它给出了一种在命名和事件定义上的规范。

众所周知 .sync 修饰符是单向数据流的另一个典型范式。

『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。

四、如何让你开发的组件支持 `v-model`

虽然不想说，但这确实是高频面试题。

在定义 vue 组件时，你可以提供一个 model 属性，用来定义该组件以何种方式支持 v-model。

model 属性本身是有默认值的，如下：

// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}

也就是说，如果你不定义 model 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"。

如果把 model 属性进行一些改装，如下：

// 默认的 model 属性
export default {
  model: {
    prop: 'ame',
    event: 'zard'
  }
}

那么，v-model="foo" 就等价于 :ame="foo" 加上 @zard="foo = $event"。

没错，就是这么容易，让我们看个例子。

先定义一个自定义组件：

<template>
<div>
  我们是TI{{ ame }}冠军
  <el-button @click="playDota2(1)">加</el-button>
  <el-button @click="playDota2(-1)">减</el-button>
</div>
</template>
<script>
export default {
  props: {
    ame: {
      type: Number,
      default: 8
    }
  },
  model: { // 自定义v-model的格式
    prop: 'ame', // 代表 v-model 绑定的prop名
    event: 'zard' // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit('zard', newYear)
    }
  }
}
</script>

然后我们在父组件中使用该组件：

// template中
<dota v-model="ti"></dota>
// script中
export default {
  data() {
    return {
      ti: 8
    }
  }
}

看看效果：

让你的组件支持 v-model 就这么容易。

五、demo和源码

获取源码请访问github zhangshichun的github

六、结束

我是春哥。
我热爱 vue.js , ElementUI , Element Plus 相关技术栈，我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼。

你可以在掘金关注我，也可以在公众号里找到我：前端要摸鱼。
希望大家玩得开心。

面试官：项目中常用的 .env 文件原理是什么？如何实现？前端JavaScript__Vue.js

banyungong — Tue, 18 Jan 2022 07:15:00 GMT

highlight: darcula theme: smartblue

1. 前言

大家好，我是若川。正在参加掘金年度人气作者活动，可以点此帮我投票。为了能帮助到更多对源码感兴趣、想学会看源码、提升自己前端技术能力的同学。我倾力组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与。每周大家一起学习200行左右的源码，已进行5个月。

想学源码，极力推荐关注我写的专栏（目前2K人关注）《学习源码整体架构系列》包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue 3.2 发布、vue-this、create-vue、玩具vite等20余篇源码文章。

本文仓库 https://github.com/lxchuan12/dotenv-analysis.git，求个star^_^

源码共读活动每周一期，已进行到18期。于是搜寻各种值得我们学习，且代码行数不多的源码。dotenv 主文件仅118行，非常值得我们学习。

阅读本文，你将学到：

1. 学会 dotenv 原理和实现
2. 学会使用 fs模块 获取文件并解析
3. 等等

2. 环境准备

# 推荐克隆我的项目，保证与文章同步
git clone https://github.com/lxchuan12/dotenv-analysis.git
# npm i -g yarn
cd dotenv-analysis/dotenv && yarn i
# VSCode 直接打开当前项目
# code .
# 我写的例子都在 examples 这个文件夹中，可以启动服务本地查看调试
# 在 dotenv-analysis 目录下
node examples/index.js

# 或者克隆官方项目
git clone https://github.com/motdotla/dotenv.git
# npm i -g yarn
cd dotenv && yarn i
# VSCode 直接打开当前项目
# code .

如果需要对源码进行调试，可以看我的这篇文章：新手向：前端程序员必学基本技能——调试JS代码，这里就不再赘述了。

3. dotenv 的作用

dotenv

Dotenv 是一个零依赖模块，可将 .env 文件中的环境变量加载到 process.env 中。

如果需要使用变量，则配合如下扩展包使用。

dotenv-expand

众所周知，.env 文件在我们项目中非常常见，在 vue-cli 和 create-react-app 中都有使用。

vue-cli .env

create-react-app .env

4. .env 文件使用

我们项目中经常会用到.env 文件写法：

NAME=若川
AGE=18
BLOG=https://lxchuan12.gitee.io
MP_WEIXIN='若川视野'
ACTIVITY=每周一起学200行左右的源码共读活动
WEIXIN=加我微信 ruochuan12 参与

单从这个文件来看，我们可以知道有如下功能需要实现：

读取 .env 文件
解析 .env 文件拆成键值对的对象形式
赋值到 process.env 上
最后返回解析后得到的对象

5. 简单实现

根据分析问题，我们最终可以简单把代码实现如下：

const fs = require('fs');
const path = require('path');

const parse = function parse(src){
    const obj = {};
    // 用换行符 分割
    // 比如
    /**
     * NAME=若川
     * AGE=18
     * MP_WEIXIN=若川视野
     * BLOG=https://lxchuan12.gitee.io
     * ACTIVITY=每周一起学200行左右的源码共读活动
     * WEIXIN=加我微信 ruochuan12 参与
    */
    src.toString().split('\n').forEach(function(line, index){
        // 用等号分割
        const keyValueArr = line.split('=');
        // NAME
        key = keyValueArr[0];
        // 若川
        val = keyValueArr[1] || '';
        obj[key] = val;
    });
    // { NAME: '若川', ... }
    return obj;
}

const config = function(){
    // 读取 node 执行的当前路径下的 .env 文件
    let dotenvPath = path.resolve(process.cwd(), '.env');
    // 按 utf-8 解析文件，得到对象
    // { NAME: '若川', ... }
    const parsed = parse(fs.readFileSync(dotenvPath, 'utf-8'));

    // 键值对形式赋值到 process.env 变量上，原先存在的不赋值
    Object.keys(parsed).forEach(function(key){
        if(!Object.prototype.hasOwnProperty.call(process.env, key)){
            process.env[key] = parsed[key];
        }
    });

    // 返回对象
    return parsed;
};

console.log(config());
console.log(process.env);

// 导出 config parse 函数
module.exports.config = config;
module.exports.parse = parse;

6. 继续完善 config 函数

简版的 config 函数还缺失挺多功能，比如：

可由用户自定义路径
可由用户自定义解析编码规则
添加 debug 模式
完善报错输出，用户写的 env 文件自由度比较大，所以需要容错机制。

根据功能，我们很容易实现以下代码：

function resolveHome (envPath) {
    return envPath[0] === '~' ? path.join(os.homedir(), envPath.slice(1)) : envPath
}

const config = function(options){
    // 读取 node 执行的当前路径下的 .env 文件
    let dotenvPath = path.resolve(process.cwd(), '.env');
    // utf8
    let encoding = 'utf8';
    // debug 模式，输出提示等信息
    let debug = false;
    // 对象
    if (options) {
        if (options.path != null) {
            // 解析路径
            dotenvPath = resolveHome(options.path)
        }
        // 使用配置的编码方式
        if (options.encoding != null) {
            encoding = options.encoding
        }
        // 有配置就设置为 true
        if (options.debug != null) {
            debug = true
        }
    }

    try {
        // 按 utf-8 解析文件，得到对象
        // { NAME: '若川', ... }
        // debug 传递给 parse 函数 便于
        const parsed = parse(fs.readFileSync(dotenvPath, { encoding }), { debug });

        // 键值对形式赋值到 process.env 变量上，原先存在的不赋值
        Object.keys(parsed).forEach(function(key){
            if(!Object.prototype.hasOwnProperty.call(process.env, key)){
                process.env[key] = parsed[key];
            } else if (debug) {
                console.log(`"${key}" is already defined in \`process.env\` and will not be overwritten`);
            }
        });

        // 返回对象
        return parsed;
    }
    catch (e) {
        return { error: e };
    }
};

dotenv 源码中，parse 函数主要是一些正则和单双引号、跨平台等细致处理。这里就暂时不阐述，读者朋友可以查看dotenv 源码。

7. 总结

鉴于文章不宜过长，文章只比较深入的分析了 config 函数。parse 函数目前没有深入分析。

一句话总结 dotenv 库的原理。用 fs.readFileSync 读取 .env 文件，并解析文件为键值对形式的对象，将最终结果对象遍历赋值到 process.env 上。

我们也可以不看 dotenv 源码，根据 api 倒推，自己来实现这样的功能。最终看看和 dotenv 源码本身有什么差别。这样也许更能锻炼自己。或者用 ts 重构它。

本文同时也给我们启发：围绕工作常用的技术包和库值得深入学习，做到知其然，知其所以然。

值得一提的是：dotenv 源码使用的是 flow 类型。vue2 源码也是用的 flow。vue3 源码改用 ts了。

最后可以持续关注我@若川。欢迎加我微信 ruochuan12 交流，参与源码共读活动，每周大家一起学习200行左右的源码，共同进步。

花60秒给Vue3提的PR，竟然被尤大亲自Merge了~JavaScriptVue.js__开源

banyungong — Tue, 18 Jan 2022 06:15:00 GMT

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

先来一个图镇楼！

终于等到一个活动可以让我分享在去年定下的目标

我要成为Vue3的Contributor

然而，在定下目标60秒后，我就完成了它！

我成为了Vue3的Contributor

我这个PR举世无双的水，说是世界第一水也不过分！

但是不好意思啊，即便是如此水的一个PR，尤大也不得不Merge！

尤大亲手让我成为了Vue3的Contributor

因为我确实修正了源码中一处错误！

哈哈哈，我甚至连那个TODO都没帮忙完成！

我知道还有很多顶级项目都有这类问题，因为拼错单词是很常见的，手快了、脑抽了、晃神了都有可能拼错，这问题还不太好发现。因为错词的可读性依然很高。

Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae we do not raed ervey lteter by itslef but the wrod as a wlohe.

对不对？

那么只要找出开源项目中那些拼错的单词再改掉，岂不是各种顶级项目的Contributor标记拿到手软？

下面我来教大家如何对开源项目进行单词拼写检查

把代码文件copy到Word里

就这的话我是不是要被大家的唾沫淹死？

原理就是这么个简单的原理

有没有帮我们搞效检查项目代码中拼写错误的仓库呢？

有的！

请大家自行前往Github搜索SpellCheck 或点击下方链接

https://github.com/search?q=spellcheck

One more times and Follow me 大声say!

大帅是Vue3的Contributor

弱弱的问大家一句，尤大要是看到这篇文章，还有能力撤销这个Merge吗？

用Vue3.2 + Vite2.7 快速从0快速打造一个UI组件库Vue.js前端

banyungong — Tue, 18 Jan 2022 05:15:00 GMT

1. 前言

最近自己学习写了一个基于Vue3的组件库，感觉有点意思，这篇文章来记录一下我是怎么从0快速打造一个UI组件库的

先来个预览
附上访问地址jw-ui

2. 使用Vite搭建官网

Vite是尤雨溪开发的一种新型前端构建工具，具体介绍可以查看官方文档

2.1 创建项目

2.1.1. 全局安装vite（这里我装的时候是2.7.2）

$ yarn create vite@2.7.2

2.1.2. 构建一个vue模板(项目名可以改成自己的名字)

yarn create vite jw-ui --template vue

2.1.3. 装好之后按照提示逐步执行命令

cd jw-ui
yarn
yarn dev

可以看到界面

ps: 推荐的IDE和设置：VSCode + Volar

2.2 基本完成官网的搭建

2.2.1. 下载vue-router

yarn add vue-router@4

2.2.2. 创建home首页与doc文档页以及顶部导航栏

/* /views/home/index.vue 首页*/
<template>
    <div>
        Home
    </div>
</template>

/* /views/doc/index.vue 文档页面 */
<template>
  <div>
    Doc
  </div>
</template>

/* /components/Topnav.vue 顶部导航栏组件 */
<template>
  <div class="topnav">
    <router-link to="/home">首页</router-link>
    <router-link to="/doc">文档</router-link>
  </div>
</template>

2.2.3. 配置路由

创建路由配置文件

// router/index.ts 
import { createRouter, createWebHashHistory } from "vue-router";
const history = createWebHashHistory();

const router = createRouter({
  history,
  routes: [
    { path: "/", redirect: "" },
  ],
});

export default router;

在main.ts里导入，使得整个应用支持路由。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);

app.mount("#app");

修改App.vue

<template>
  <Topnav />
  <router-view />
</template>
<script setup>
import Topnav from "./components/Topnav.vue";
</script>

到目前为止的效果

装饰一下顶部导航栏后的效果

这里首页按照自己喜欢的来写CSS就好了，接下来讲一下文档页面。

文档页需要一个侧边栏来切换不同组件的文档，这里我就举例做一个Button组件

// doc/index.vue
<template>
  <div class="layout">
    <div class="content">
      <aside>
        <router-link class="menu-item text-overflow" to="/doc/button"
          >Button 组件</router-link
        >
      </aside>
      <main style="padding-left: 302px">
        <router-view />
      </main>
    </div>
</template>

// router/index.ts 添加一个展示的button页面
import { createRouter, createWebHashHistory } from "vue-router";

import Home from "../views/home/index.vue";
import Doc from "../views/doc/index.vue";
import ButtonDoc from "../views/doc/button/index.vue";

const history = createWebHashHistory();

const router = createRouter({
  history,
  routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    {
      path: "/doc",
      component: Doc,
      children: [{ path: "button", component: ButtonDoc }],
    },
  ],
});

export default router;

// /views/doc/button/index
<template>
  <Button />
</template>

<script setup>
import Button from '../../../lib/button/index.vue'
</script>

<style lang="scss" scoped>

</style>

展示效果

好了到这里官网总算是基本搭建完了，我们终于就可以愉快的在src/lib/button/index.vue文件里封装组件啦。（封装的组件都放在lib文件夹里，以后打包用）

3. 封装一个Button组件

下面附上我写的一个Button组件以及使用效果

PS: 需要注意的一点是封装的样式一定要加自己独特的前缀我这里是 jw 以避免在项目中产生样式重叠

<template>
  <button class="jw-button" :class="classes">
    <span v-if="loading" class="jw-loadingIndicator"></span>
    <slot> {{ theme }} </slot>
  </button>
</template>
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
  theme: {
    type: String,
    default: "default",
  },
  dashed: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "default",
  },
  round: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const { theme, dashed, size, round, disabled } = props;
const classes = computed(() => {
  return {
    [`jw-theme-${theme}`]: theme,
    [`jw-theme-dashed`]: dashed,
    [`jw-size-${size}`]: size,
    [`is-round`]: round,
    [`is-disabled`]: disabled,
  };
});
</script>

<script lang="ts">
export default {
  name: "JwButton",
};
</script>

<style lang="scss" scoped>
$h-default: 32px;
$h-small: 20px;
$h-large: 48px;
$white: #fff;
$default-color: #333;
$primary-color: #36ad6a;
$info-color: #4098fc;
$success-color: #85ce61;
$warning-color: #f0a020;
$error-color: #d03050;
$grey: grey;

$default-border-color: #d9d9d9;

$radius: 3px;
$green: #18a058;

.jw-button {
  box-sizing: border-box;
  height: $h-default;
  background-color: #fff;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border-radius: $radius;
  box-shadow: 0 1px 0 fade-out(black, 0.95);
  transition: all 250ms;
  color: $default-color;
  border: 1px solid $default-border-color;
  user-select: none;

  &:focus {
    outline: none;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &.jw-size-large {
    font-size: 24px;
    height: $h-large;
    padding: 0 16px;
  }
  &.jw-size-small {
    font-size: 12px;
    height: $h-small;
    padding: 0 8px;
  }

  &.is-round.jw-size-default {
    border-radius: calc($h-default / 2);
  }
  &.is-round.jw-size-large {
    border-radius: calc($h-large / 2);
  }
  &.is-round.jw-size-small {
    border-radius: calc($h-small / 2);
  }

  &.jw-theme-default {
    &:hover {
      color: $green;
      border-color: $green;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $green $green $green transparent;
      }
    }
    &:active {
      color: darken($green, 20%);
      border-color: darken($green, 20%);

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: darken($green, 20%) darken($green, 20%)
          darken($green, 20%) transparent;
      }
    }
    &.jw-theme-dashed {
      border-style: dashed;
    }
    > .jw-loadingIndicator {
      border-style: dashed;
      border-color: $default-color $default-color $default-color transparent;
    }
  }
  &.jw-theme-primary {
    background-color: $primary-color;
    border-color: $primary-color;
    color: $white;

    &:hover {
      background: lighten($primary-color, 20%);
      border-color: lighten($primary-color, 20%);
    }
    &:active {
      background-color: darken($primary-color, 20%);
      border-color: darken($primary-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($primary-color, 20%);
      border-color: lighten($primary-color, 20%);
      &:hover {
        background: lighten($primary-color, 20%);
        border-color: lighten($primary-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $primary-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $primary-color $primary-color $primary-color transparent;
      }
    }
  }

  &.jw-theme-info {
    background-color: $info-color;
    border-color: $info-color;
    color: $white;
    &:hover {
      background: lighten($info-color, 20%);
      border-color: lighten($info-color, 20%);
    }
    &:active {
      background-color: darken($info-color, 20%);
      border-color: darken($info-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($info-color, 20%);
      border-color: lighten($info-color, 20%);
      &:hover {
        background: lighten($info-color, 20%);
        border-color: lighten($info-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $info-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $info-color $info-color $info-color transparent;
      }
    }
  }

  &.jw-theme-success {
    background-color: $success-color;
    border-color: $success-color;
    color: $white;
    &:hover {
      background: lighten($success-color, 20%);
      border-color: lighten($success-color, 20%);
    }
    &:active {
      background-color: darken($success-color, 20%);
      border-color: darken($success-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($success-color, 20%);
      border-color: lighten($success-color, 20%);
      &:hover {
        background: lighten($success-color, 20%);
        border-color: lighten($success-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $success-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $success-color $success-color $success-color transparent;
      }
    }
  }

  &.jw-theme-warning {
    background-color: $warning-color;
    border-color: $warning-color;
    color: $white;
    &:hover {
      background: lighten($warning-color, 20%);
      border-color: lighten($warning-color, 20%);
    }
    &:active {
      background-color: darken($warning-color, 20%);
      border-color: darken($warning-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($warning-color, 20%);
      border-color: lighten($warning-color, 20%);
      &:hover {
        background: lighten($warning-color, 20%);
        border-color: lighten($warning-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $warning-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $warning-color $warning-color $warning-color transparent;
      }
    }
  }

  &.jw-theme-error {
    background-color: $error-color;
    border-color: $error-color;
    color: $white;
    &:hover {
      background: lighten($error-color, 20%);
      border-color: lighten($error-color, 20%);
    }
    &:active {
      background-color: darken($error-color, 20%);
      border-color: darken($error-color, 20%);
    }

    &.is-disabled {
      cursor: not-allowed;
      background: lighten($error-color, 20%);
      border-color: lighten($error-color, 20%);
      &:hover {
        background: lighten($error-color, 20%);
        border-color: lighten($error-color, 20%);
      }
    }

    &.jw-theme-dashed {
      border-style: dashed;
      background-color: $white !important;
      color: $error-color;

      > .jw-loadingIndicator {
        border-style: dashed;
        border-color: $error-color $error-color $error-color transparent;
      }
    }
  }

  > .jw-loadingIndicator {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 8px;
    border-color: $white $white $white transparent;
    border-style: solid;
    border-width: 2px;
    animation: jw-spin 1s infinite linear;
  }
}

@keyframes jw-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

虽然有不完美，但差不多就这个意思吧

4. 封装Markdown组件介绍文档

4.1. 下载

vite-plugin-markdown：一个插件可以让你导入Markdown文件作为各种格式的vite项目。

github-markdown-css：复制GitHub Markdown风格

yarn add github-markdown-css vite-plugin-markdown

4.2. main.ts中引入

import "github-markdown-css";

4.3. vite.config.js中配置vite-plugin-markdown插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const md = require("vite-plugin-markdown");

export default defineConfig({
  plugins: [vue(),
    md.plugin({
    mode: ["html", "vue"],
  }),]
})

4.4. 封装Markdown组件

// /components/Markdown.vue
<template>
  <article class="markdown-body" v-html="content"></article>
</template>

<script setup lang="ts">
// 传入的md文件
const props = defineProps({
  content: {
    type: String,
    required: true,
  },
});
</script>

4.5. 创建介绍页面路由

import { h } from "vue";
import { createRouter, createWebHashHistory } from "vue-router";

import Home from "../views/home/index.vue";
import Doc from "../views/doc/index.vue";
import ButtonDoc from "../views/doc/button/index.vue";

const history = createWebHashHistory();

import Markdown from "../components/Markdown.vue";
const md = (string) => h(Markdown, { content: string, key: string });
import { html as Intro } from "../../markdown/intro.md";
const IntroDoc = md(Intro);

const router = createRouter({
  history,
  routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    {
      path: "/doc",
      component: Doc,
      children: [
        { path: "intro", component: IntroDoc },
        { path: "button", component: ButtonDoc },
      ],
    },
  ],
});

export default router;

可以看到，最终md就能导入，并且生成了github上md的样式了

5. 自定义代码块获取组件展示源代码

5.1. 自定义插件vue-custom-blocks-plugin

import path from "path";
import fs from "fs";
import { baseParse } from "@vue/compiler-core";
const vitePluginVue = {
  name: "preview",
  transform(code, id) {
    if (
      !/\/src\/views\/doc\/.*\.preview\.vue/.test(id) ||
      !/vue&type=preview/.test(id)
    ) {
      return;
    }

    let path = `.${id.match(/\/src\/views\/doc\/.*\.preview\.vue/)[0]}`;
    const file = fs.readFileSync(path).toString();
    const parsed = baseParse(file).children.find((n) => n.tag === "preview");
    const title = parsed.children[0].content;
    const main = file.split(parsed.loc.source).join("").trim();
    return `export default function (Component) {
      Component.__sourceCode = ${JSON.stringify(main)}
      Component.__sourceCodeTitle = ${JSON.stringify(title)}
    }`.trim();
  },
};

export default vitePluginVue;

5.2. 在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const md = require("vite-plugin-markdown");
import vitePluginVue from "./plugins/vue-custom-blocks-plugin";

export default defineConfig({
  plugins: [vue(),
    md.plugin({
    mode: ["html", "vue"],
  }),
  vitePluginVue]
})

5.3. 封装Preview组件展示

<template>
  <div class="pre">
    <h2>
      {{ component.__sourceCodeTitle }}
      <Button @click="hideCode" v-if="codeVisible">隐藏代码</Button>
      <Button @click="showCode" v-else>查看代码</Button>
    </h2>
    <div class="pre-component">
      <component :is="component" />
    </div>

    <div class="pre-code" v-if="codeVisible">
      <pre class="language-html">{{ component__sourceCOde }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from "../lib/button/index.vue";
import { computed, ref } from "vue";
const props = defineProps({
  component: Object,
});

const showCode = () => (codeVisible.value = true);
const hideCode = () => (codeVisible.value = false);
const codeVisible = ref(false);
</script>

<style lang="scss" scoped>
$border-color: #d9d9d9;

.pre {
  border: 1px solid $border-color;
  margin: 16px 0px 32px;
  max-width: 700px;
  min-width: 300px;
  > h2 {
    font-size: 20px;
    padding: 8px 16px;
    border-bottom: 1px solid $border-color;
    display: flex;
    justify-content: space-between;
  }

  &-component {
    padding: 16px;
  }

  &-actions {
    padding: 8px 16px;
    border-top: 1px dashed $border-color;
  }

  &-code {
    padding: 8px 16px;
    border-top: 1px dashed $border-color;

    > pre {
      line-height: 1.1;
      font-family: Consolas, "Courier New", Courier, monospace;
      margin: 0;
      background-color: #fff;
    }
  }
}
</style>

5.4. 使用Preview组件

views/doc/button/index.vue

<template>
  <div>
    <Preview :component="Button1" />
  </div>
</template>

<script setup>
import Button1 from "./Button1.preview.vue";
import Preview from "../../../components/Preview.vue";
</script>

<style lang="scss">
.jw-button + .jw-button {
  margin-left: 20px;
}
</style>

/views/doc/button/Button1.preview.vue

<preview>基础示例</preview>
<template>
  <Button />
</template>

<script setup lang="ts">
import Button from "../../../lib/button/index.vue";
</script>

现在，只要编写上面的以.preview.vue后缀的文件就行了。

效果：

5.5. 高亮源代码

下载prismjs

yarn add prismjs

对Preview组件做修改

<template>
  <div class="pre">
    <h2>
      {{ component.__sourceCodeTitle }}
      <Button @click="hideCode" v-if="codeVisible">隐藏代码</Button>
      <Button @click="showCode" v-else>查看代码</Button>
    </h2>
    <div class="pre-component">
      <component :is="component" />
    </div>

    <div class="pre-code" v-if="codeVisible">
      <pre class="language-html" v-html="html" />
    </div>
  </div>
</template>
<script setup lang="ts">
import Button from "../lib/button/index.vue";
import { computed, ref } from "vue";
import "prismjs";
import "prismjs/themes/prism.css";
const Prism = (window as any).Prism;
const props = defineProps({
  component: Object,
});

console.log(props.component.__sourceCode);
const html = computed(() => {
  return Prism.highlight(
    props.component.__sourceCode,
    Prism.languages.html,
    "html"
  );
});
const showCode = () => (codeVisible.value = true);
const hideCode = () => (codeVisible.value = false);
const codeVisible = ref(false);
</script>

效果

6. 去掉示例中的文件导入

6.1. 在lib目录下创建main.ts 这个也是作为之后打包上传至npm的入口

import { App } from "vue";
import JwButton from "./button/index.vue";
export {  JwButton };
const components = [JwButton];

// 全局注册主键
export function registerJwUi(app: App): void {
  for (const component of components) {
    app.component(component.name, component);
  }
}

export default registerJwUi;

6.2. main.ts中导入注册

import JwUi from "./lib/index";
app.use(JwUi);

6.3. 这样在示例中就可以直接用了`/src/views/doc/button/Button1.preview`

<preview>基础示例</preview>
<template>
  <jw-button />
</template>

6.4. 效果

7. 部署到github官网

7.1. 打包

yarn build

7.2. 上传至github

github创建一个新的仓库将dist上传只仓库

7.3. 进入仓库Settings最底层

7.4. 找到GitHub Pages

7.5. 选择master分支点击保存链接就生成了

7.6 一键部署

创建deploy.sh文件

rm -rf dist &&
yarn build &&
cd dist &&
git init &&
git add . &&
git commit -m "update" &&
git branch -M master &&
git remote add origin git@github.com:coderyjw/jw-ui-website.git &&
git push -f -u origin master &&
cd -
echo https://coderyjw.github.io/jw-ui-website/

执行命令

sh deploy.sh

8. 上传至npm

8.1. 创建rollup.config.js配置文件

// 为了保证版本一致，请复制我的 package.json 到你的项目，并把 name 改成你的库名
import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"
import alias from '@rollup/plugin-alias'
import path from "path";
import resolve from 'rollup-plugin-node-resolve'

export default {
  input: 'src/lib/index.ts',
  output: [{
    globals: {
      vue: 'Vue'
    },
    name: 'Yjw-ui',
    file: 'dist/lib/yjw-ui.js',
    format: 'umd',
    plugins: [terser()]
  }, {
    name: 'Yjw-ui',
    file: 'dist/lib/yjw-ui.esm.js',
    format: 'es',
    plugins: [terser()]
  }],
  plugins: [
    scss({ include: /\.scss$/, sass: dartSass }),
    esbuild({
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015' 
    }),
    vue({
      include: /\.vue$/,
    }),
    alias({
      entries: [
        {
          find: '@', // 别名名称，作为依赖项目需要使用项目名
          replacement: path.resolve(__dirname, 'src'), 
          customResolver: resolve({
            extensions: ['.js', '.jsx', '.vue', '.sass', '.scss']
          })
        }
      ]
    }),
  ],
}

8.2. 执行命令打包

rollup -c

8.3. 效果

可以看到dist文件下有lib文件，就是打包后的文件

8.4. 上传至npm

需要先注册npm账号

npm login // 先登录
npm publish // 发布

9. 最后

ok,终于写完了，如果你觉得我写的不错，麻烦点个赞再走吧~

如果觉得我写的有错的，麻烦指出再点个赞鼓励一下吧。

Hello @idux, 一个全新的 vue 3.x 组件库来了Vue.js开源

banyungong — Tue, 18 Jan 2022 04:15:00 GMT

theme: awesome-green

本文作者：DanranVm

@idux 是一个基于 Vue 3.x 和 TypeScript 开发的开源组件库，它拥有以下特性:

Monorepo 管理模式：cdk, components, pro
开箱即用的高质量组件
全面拥抱 Composition API，从源码到文档
完全使用 TypeScript 开发，提供完整的类型定义
灵活的全局配置
深入细节的主题定制能力
国际化语言支持

特性

Monorepo 模式

@idux 总共分成了 3 个包:

@idux/cdk
- 它是一组用于构建 UI 组件库的开发套件
- 它主要包含了一些 UI 无关或者轻 UI 的功能
- 其灵感来自于 @angular/cdk
@idux/components
- 它是传统意义上的基础组件库，包含了数十种常规 UI 组件
- 我们对每一个组件的 API 都进行了精心的设计，保证了 API 一致性
- 组件设计参考了 antd 和 ng-zorro
@idux/pro
- 它是对 @idux/components 的进一步封装与组合，使用更少的代码去完成业务开发
- 它主要来源于我们对自身业务的提炼
- 它目前数量有限，我们会逐渐补充

开箱即用

完全基于 esm 构建的包，支持开箱即用的 Tree Shaking 和按需加载，也可以再配合一些自动导入插件，可以让你的编码更加高效

import { IxButton } from "@idux/components/button";

更多内容请参见快速上手

我们有覆盖率 80+ 的单元测试和完善的 CI 流程，来保证我们的组件质量

Composition API

Vue 3.x 的一个重要特性就是 Composition API，我们所有的源代码和示例代码，都使用它来完成

它其实是一种全新的代码组织范式，让开发者可以更好的组织代码，越是复杂的组件，就越能体现它的优雅

TypeScript

我们所有的源代码都是由 TypeScript + TSX 编写，为了给用户提供最佳的使用体验，我们为此付出了诸多努力

无论用户使用 TSX 还是使用 SFC (需要配合 Vue Language Features 插件)都可以享受到完整的类型提示与保护

国际化

我们针对部分组件的静态文案内置了 i18n 的支持，不过目前仅支持中文和英文

PR Welcome, 我们也渴望得到社区力量的支持和帮助，让 @idux 变得更加完善

更多内容请参见国际化

全局配置

我们给众多组件添加了全局配置功能，这应该是你见过全局配置最多的组件库之一

用户可以通过全局配置来定义组件的默认行为，从而减少在模板中需要写的代码

支持在运行时修改全局配置项，还支持局部覆盖全局配置项

更多内容请参见全局配置

主题定制

我们尽最大努力地提供了丰富的主题变量，既有全局变量，也有组件级别的变量便于用户百变百搭，灵活定制自己想要的主题

注意: 当前该功能并不稳定，我们正在考虑使用 css 变量的方案替换掉 less 变量等待方案完善后，我们会在每个组件的文档中声明所支持的主题变量

下一步计划

目前只是 @idux 的开始，它还有许多不够完善的地方，接下来我们将在持续的迭代中完善它，这是我们的下一步计划：

组件文档的完善与补充
视觉优化以及设计指南完善与补充
单元测试的完善与补充
主题变量方案的完善

另外，我们也在准备一个后台管理系统的模板，以供大家快速的搭建项目原型，敬请期待。

最后，开源不易，希望 @idux 能够得到大家的喜欢和支持。我们也将不忘开源初心，积极拥抱社区，依靠社区的力量来让 @idux 获得更好的成长。非常欢迎热爱开源的朋友来一起参与 @idux 项目，无论是 star, issue 还是 PR 都是对我们的帮助与支持，感谢。

关于 IDuxFE

我们是来自深信服科技的前端团队，@idux 已经在云计算&安全多场景落地，未来会实现集团内全产品覆盖，所以不用担心我们弃坑，放弃维护。

如果对我们感兴趣的话，欢迎加入我们，可以投递简历到 uedc@sangfor.com.cn 或者直接私信我。

vue3和Vite双向加持，uni-app性能再次提升uni-appVue.js

banyungong — Tue, 18 Jan 2022 03:15:00 GMT

uni-app对vue3 & Vite的升级，是一个渐进式过程：

2020年9月：小程序平台支持 vue3 开发，小程序平台编译器依然使用webpack；
2021年5月：H5平台支持 vue3 开发，H5平台编译器升级为 Vite；
2021年8月：App平台支持 vue3 开发，App平台编译器升级为 Vite；
2021年11月：小程序平台编译器升级为 Vite；

至此，uni-app在全平台支持了 Vite 编译及Vue 3.x 运行。

so，这场持续一年之久的大版本升级，究竟给uni-app项目带来了哪些提升？

是时候总结（秀）一波了。

新版 uni-app 框架主要做了三大改进：

重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；
新增支持 Vite 构建工具，在H5平台实现秒开预览；
新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；

基于这三大改进，uni-app项目获得了多快好省四大收益：

更多的语法支持，支持组合式API，业务聚焦，开发效率更高；
更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；
更好的运行性能，用户端响应更快，体验更好；
更小的代码体积，瘦身30%以上，更省体积、更省流量

更快的编译速度

开发者日常工作中，最无聊的就是等待编译构建。

某乎上还有一个”程序员在等待编译的时候都做什么？“的讨论帖，可见编译时间对开发者而言，是一个多么尴尬无聊的碎片时间。

uni-app本次升级vue3 & Vite后，在编译时间上有多少改进？带给开发者多少福利？我们安排真实测试，以数据说话。

测试环境说明：

硬件：RedmiBook 14 二代
处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz 
内存：16.0 GB
操作系统：Windows 11 专业版 64 位操作系统

关于编译速度，我们做了两个维度的对比：

纵向对比：挑选uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译时间
横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译时间，和uni-app的vue 3.x版本进行对比

uni-app 历史版本纵向对比

我们选择uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译时间。

uni-app项目编译时间的采集方式：

vue 2.6版本编译时间 = webpack 的 stats.endTime - stats.startTime
vue 3.x版本编译时间 = 构建工具入口处记录 global.__vite_start_time = performance.now()，构建工具编译完成时：performance.now() - global.__vite_start_time

H5平台

对uni-app的三个项目模板分别运行到H5平台，进行多次编译测试，并求其均值后，获得如下数据：

由此，我们可以观察到：

在vue 2.6环境下，随着项目复杂度的提升，H5首页预览所需编译时间会直线增加；这是因为在vue 2.6版本下，虽然仅预览首页，但依然会使用 webpack 编译整个项目资源；故项目越复杂，编译时间越长；
在vue 3.x环境下，H5首页预览的编译时间跟项目复杂度也有关系，但增幅不大；这是因为在vue 3.x版本下，使用 Vite 进行构建，预览首页时仅编译首页及首页所依赖资源，不会编译其它页面资源。

通过图表对比，我们可以直观得出结论：vue 3.x环境下的首页编译时间，平均不到vue 2.6环境下的十分之一。

换言之，vue 3.x版本下的首页编译速度，相比vue 2.6版本，有十倍效率提升。

这个十倍效率提升，主要得益于新版采用Vite作为构建工具，由此带来了两大好处：

使用原生 ESM 文件，无需打包，实现极速的服务启动；
预览（运行）使用esbuild作为打包工具，相比vue 2.6环境下的webpack，构建速度快 10-100 倍（这不是我们夸大，详见esbuild）

本着这个十倍效率提升，小伙伴们还不赶紧上手试试？

小程序平台

对uni-app的三个模板项目运行到小程序平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：小程序平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能至少提升30%；且项目越复杂，编译性能提升越明显，可以达到40% ~ 50%。

App平台

对uni-app的三个项目模板继续运行到App平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：App平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能提升将近50%。

虽没有H5平台的十倍效率提升那么刺激，但将近50%的速度提升，经常开发小程序/App的小伙伴，还不心动？

业内优秀框架横向对比

除了采用不同版本的uni-app进行纵向对比外，我们还使用业内优秀的跨端框架Taro，创建空的项目模板，进行横向对比测试。

具体测试方案：

安装Taro的最新cli，本文测试时使用的版本为"@Tarojs/Taro": “3.3.16”
使用Taro init命令，分别选择react、vue、vue3框架，创建三个默认项目模板，三个项目名称分别为taro3-react、taro3-vue、taro3-vue3，如下图：
使用npm run dev:h5，运行到H5平台进行预览，记录每次预览编译时间，重复执行，求其均值

关于Taro编译时间的计算方案：

开发一个Taro扩展插件，插件规范参考Taro官网 - 插件功能
在ctx.onBuildStart中记录开始编译时间
在ctx.onBuildFinish中记录编译结束时间
两者的时间差，即为编译过程消耗时间

然后使用uni-app的cli命令行，创建基于vue3.x的空项目模板，项目命名为uni-app-vue3。

我们使用各自框架的命令行，将如上创建的5个项目分别编译到H5平台和小程序平台，多次测试，并求其均值。

同框架版本在H5平台上的编译时间，结果如下：

从图中可以看出，uni-app的vue3版本，在H5平台上的首页编译预览性能是遥遥领先的。

继续编译到小程序平台，多次测试，求其均值，结果如下：

从图中可以看出，uni-app的vue3版本，在小程序平台上的编译性能也是非常领先的。

更好的运行速度

开发环节编译快了，那面向最终用户的软件，运行性能怎么样？

我们进入性能测试章节。

测试方案：

开发内容：开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。
界面如下：
测试机型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 开发版) 、微信版本 8.0.16
准备工作：每次开始测试前，杀掉各App进程、清空内存，保证测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差异。
评测点：长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？

测试计时方式：

选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），
点赞按钮 onclick函数开头开始计时，setData回调函数开头结束计时；

在小米手机上进行多次测试，求其平均值，结果如下：

记录条数	200	400	600	800	1000
vue2	30ms	43ms	56ms	72ms	90ms
vue3	8ms	9ms	9ms	8ms	9ms

从表格中可以看出：

随着页面记录的增加，vue 2.6版本的uni-app项目，点赞组件响应时间快速增加，响应越来越慢；
基于vue 3.x的uni-app项目，点赞组件的响应时间跟页面条数无关，一直保持极高的响应灵敏度，性能体验远高于vue 2.6版本。

从这个常见的长列表组件响应实验来看，vue 3.x的性能体验要远高于vue 2.6版本。

更小的代码体积

项目发行后的代码体积，是一个很重要的考量指标：

H5平台：更小的代码体积，可以帮助开发者节省服务端带宽及CDN流量，可实现更快的资源加载及页面渲染；
小程序平台：更小的代码体积，可加速小程序包的下载（甚至可能免了分包加载的繁琐），帮助用户更快进入小程序业务界面；
App平台：更小的代码体积，可实现更快的App启动，帮助用户更快进入App首页

为了测试vue 3.x新版升级后，代码体积的变化，我们同样做了两个维度的测试：

纵向对比：选择uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译包大小
横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译后的包体积大小，和uni-app版本进行对比

Tips：

开发阶段重在编译速度，对应npm run dev操作
发行阶段重在编译包大小，对应npm run build操作

uni-app 不同版本纵向对比

我们复用之前创建的uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译包体积。

uni-app项目编译包体积的采集方式：编译到对应平台后，记录编译后文件夹的大小。

H5平台

H5平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在H5平台上的编译包体积至少瘦身30%以上。

H5平台的瘦身优化，主要得益于uni-app框架的底层全面重构，实现了更彻底的摇树优化。

小程序平台

小程序平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在小程序平台上也有大幅瘦身。

App平台

App平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在App平台上根据项目不同，会有不同幅度的瘦身。

从理论上来讲，项目中的页面模板越复杂，App平台的瘦身效果越明显。

业内优秀框架横向对比

关于编译后的代码体积，我们也和业内优秀的跨端框架Taro进行了对比，复用前面章节创建的三个Taro项目，分别编译到H5平台和小程序平台，计算其编译后的源码文件夹大小。

从图中可以看出，uni-app的vue3版本，在H5平台上编译包体积是最小的，只有友商的十分之一左右。

我们继续测试，不同版本框架发行到微信小程序平台，记录其编译包大小：

从图中可以看出，uni-app的vue3版本，在小程序平台上编译包体积也是最小的。

**Tips：**细心的开发者会发现，所有框架版本编译到小程序上的代码包体积都远小于其在H5平台上的包体积，这是因为小程序由平台厂商提供内置组件及接口实现，而H5平台则需跨端框架自己实现内置组件及接口，故H5平台的代码包普遍要大一些。

总结

综上，我们以数字说话，阐述了vue3版本uni-app开发的诸多好处，再回顾一遍：

更多的语法
更快的编译
更好的运行
更少的代码

你还不赶紧升级新版uni-app来试试吗？

对文本测试过程及结果有疑问的同学，欢迎到github上提交issue，欢迎指正。

是什么事让尤大如此生气？Vue.js前端框架__JavaScript

banyungong — Tue, 18 Jan 2022 02:15:00 GMT

背景

这件事大约发生在半年前，有人在 vite 的仓库下提了一个关于 vue-router 的 issue：

提问者的意思是 vue-router 有个未解决的 bug，影响到他即将上线的项目了，而 vue-router 的维护者没能解决这个问题，希望尤大来帮忙解决。

但是，提问者跑到 vite 仓库下来发这个 issue，就显得非常不合适了。

尤大显然对这个行为很不高兴，回复也很霸气：

不要在不相关的仓库提不相关的 issue。
大家都很忙，没空管就是没空管，不要催。
再犯会被 block。

提问者跑来这里发 issue 的理由是尤大经常活跃在 vite 社区。而在我看来，尤大应该早就知道这个 issue 了，因为 vue-router 的维护者也是 Vue 核心成员之一，他们肯定私下聊过这个问题。

那么为什么迟迟不解决这个问题呢，我猜测有两点原因：

这个问题本身不好解决，可能要牵涉到不少的代码改动。
Vue 团队正在全力做他们认为重要而紧急的事情，这个事情的优先级并不高。

那么，提问者究竟是遇到了什么问题呢？为何我会关注到这个 issue？因为最近我也遇到一个类似的问题。

类似的问题

在我的《Vue3 开发企业级音乐课 App》课程问答区，有个学生反馈了一个问题：RouterView 配合 KeepAilve 组件使用后，二级路由的歌手详情页的 created 钩子函数会执行两次。

我测试后发现确实有这个问题，最开始我怀疑是 Vue3 或者是 vue-router 某个版本的 bug，于是我把 Vue3 和 vue-router 都升级到最新版本，发现这个问题仍然存在。

那么，会不会是我的业务代码写出的问题呢？直觉告诉不会，为了找出问题的根本原因，同时减少调试的复杂度，我写了个最小化复现问题的 demo。

Demo 页面共有二级路由，它的定义如下：

import { createRouter, createWebHashHistory } from 'vue-router'
const Home = import('../views/Home.vue')
const HomeSub = import('../views/HomeSub.vue')
const Sub = import('../views/Sub.vue')
const About = import('../views/About.vue')

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'sub',
        component: HomeSub
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'sub',
        component: Sub
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

这里要注意，必须两个主路由页面都嵌套子路由。

接着来看页面的几个 Vue 组件的定义，其中 App.vue 为页面入口组件：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"/>
    </keep-alive>
  </router-view>
</template>

Home.vue 是一级路由组件：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <button @click="showSub">click me</button>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'Home',
  created() {
    console.log('home page created')
  },
  methods: {
    showSub() {
      this.$router.push('/home/sub')
    }
  }
}
</script>

HomeSub 是 Home 组件中的二级路由组件：

<template>
  <div>This is home sub</div>
</template>

<script>
  export default {
    name: 'HomeSub',
    created() {
      console.log('home sub created')
    }
  }
</script>

About.vue 是一级路由组件：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="showSub">click me</button>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'About',
    created() {
      console.log('about page created')
    },
    methods: {
      showSub() {
        this.$router.push('/about/sub')
      }
    }
  }
</script>

Sub.vue 是 About 组件中的二级路由组件：

<template>
  <div>This is sub</div>
</template>

<script>
  export default {
    name: 'Sub',
    created() {
      console.log('sub created')
    }
  }
</script>

复现的步骤很简单，首先进入 Home 页：

然后点击 About 标签进入 About 页：

接着点击按钮，渲染 Sub 子路由组件：

页面渲染都是正常的，但是我们发现 Sub 组件的 created 钩子函数执行了两次，输出了两次 sub created。这就相当于渲染了两次 Sub 组件，显然是有问题的。

bug 分析

我开启了调试大法，在 Sub 组件的 created 钩子函数中打上 debugger 断点，然后顺着函数的调用堆栈一步步往前看。

显然，debugger 是在 created 钩子函数内部，而该钩子函数的执行是在组件挂载阶段，那么是什么操作触发了组件的挂载呢？

顺着调用堆栈继续查找，我们发现最终原因是因为修改了路由中的 currentRoute，触发了 setter，然后触发了 RouterView 组件的重新渲染，最终触发了 Sub 组件的渲染。

那么为什么 currentRoute 的修改会触发 RouterView 组件的重新渲染呢？这要从 RouterView 的实现原理说起：

const RouterViewImpl = defineComponent({
  name: 'RouterView',
  inheritAttrs: false,
  props: {
    name: {
      type: String,
      default: 'default',
    },
    route: Object,
  },
  setup(props, { attrs, slots }) {
    (process.env.NODE_ENV !== 'production') && warnDeprecatedUsage()
    const injectedRoute = inject(routerViewLocationKey)
    const routeToDisplay = computed(() => props.route || injectedRoute.value)
    const depth = inject(viewDepthKey, 0)
    const matchedRouteRef = computed(() => routeToDisplay.value.matched[depth])
    provide(viewDepthKey, depth + 1)
    provide(matchedRouteKey, matchedRouteRef)
    provide(routerViewLocationKey, routeToDisplay)
    const viewRef = ref()
    watch(() => [viewRef.value, matchedRouteRef.value, props.name], ([instance, to, name], [oldInstance, from, oldName]) => {
      if (to) {
        to.instances[name] = instance
        if (from && from !== to && instance && instance === oldInstance) {
          if (!to.leaveGuards.size) {
            to.leaveGuards = from.leaveGuards
          }
          if (!to.updateGuards.size) {
            to.updateGuards = from.updateGuards
          }
        }
      }
      if (instance &&
        to &&
        (!from || !isSameRouteRecord(to, from) || !oldInstance)) {
        (to.enterCallbacks[name] || []).forEach(callback => callback(instance))
      }
    }, { flush: 'post' })
    return () => {
      const route = routeToDisplay.value
      const matchedRoute = matchedRouteRef.value
      const ViewComponent = matchedRoute && matchedRoute.components[props.name]
      const currentName = props.name
      if (!ViewComponent) {
        return normalizeSlot(slots.default, { Component: ViewComponent, route })
      }
      const routePropsOption = matchedRoute.props[props.name]
      const routeProps = routePropsOption
        ? routePropsOption === true
          ? route.params
          : typeof routePropsOption === 'function'
            ? routePropsOption(route)
            : routePropsOption
        : null
      const onVnodeUnmounted = vnode => {
        if (vnode.component.isUnmounted) {
          matchedRoute.instances[currentName] = null
        }
      }
      const component = h(ViewComponent, assign({}, routeProps, attrs, {
        onVnodeUnmounted,
        ref: viewRef,
      }))
      return (
        normalizeSlot(slots.default, { Component: component, route }) ||
        component)
    }
  },
})

RouterView 组件是基于 Composition API 实现的，我们重点看它的渲染部分，由于 setup 函数的返回值是一个函数，那这个函数就是它的渲染函数。

RouterView 主要的思路就是根据路径 route 和当前 RouterView 嵌套的深度来匹配路由配置中对应的路由组件并渲染。

在整个渲染过程中，会访问计算属性 routeToDisplay，它的定义如下：

const injectedRoute = inject(routerViewLocationKey)
const routeToDisplay = computed(() => props.route || injectedRoute.value)

routeToDisplay 内部又会访问 injectedRoute，而 injectedRoute 注入的是 key 为 routerViewLocationKey 的数据。

在执行 createRouter 创建路由的时候，内部会创建 currentRoute 响应式变量来维护当前的路径。

const currentRoute = shallowRef(START_LOCATION_NORMALIZED)

然后在执行 createApp(App).use(router) 安装路由的时候，会执行 router 对象提供的 install 方法，其中会把 currentRoute 通过 routerViewLocationKey 提供给应用使用。

app.provide(routerViewLocationKey, currentRoute)

因此在渲染 RouterView 组件的时候，访问了 routeToDisplay，内部会访问 injectedRoute，进而也就访问到了 currentRoute，而又由于 currentRoute 是响应式对象，进而会触发它的依赖收集过程。

这样当我们执行 router 对象的 push 方法修改路由路径时，内部会执行 finalizeNavigation 方法，然后修改了 currentRoute，就会触发所有的 RouterView 组件的重新渲染。

默认情况下，这个逻辑是没有任何问题的，那么为什么加上 KeepAlive 就有问题了呢？

回答这个问题前，我们不妨先思考另一个问题：示例中，在正常情况下，路由从 Home 切到 About 后，此时我们修改 currentRoute，会触发 Home 组件内部的 RouterView 重新渲染吗？

答案是不会的，因为当路由从 Home 切到 About 时，会触发 Home 组件的卸载，进而也会触发其内部的 RouterView 组件卸载。

RouterView 组件在卸载过程中，会清除组件作用域下的所有依赖，当然也包括 currentRoute 收集的组件的 render effect。因此当我们修改 currentRoute 时，就不会触发 Home 组件内部的 RouterView 组件重新渲染了。

但是，一旦 Home 组件对应的 RouterView 被 KeepAlive 组件包裹后，当路由从 Home 切到 About 时，是不会执行 Home 组件的卸载过程的，也就不会卸载内部的 RouterView 组件，当然也就没有清除其作用域下的依赖。

那么当我们修改 currentRoute 时，不仅会渲染 About 组件内部的 RouterView 组件，也会触发 Home 组件内部的 RouterView 重新渲染。

由于 Home 组件内部的 RouterView 和 About 组件内部的 RouterView 都是二级路由组件，根据 RouterView 渲染的逻辑，此时 Home 组件内部的 RouterView 也会渲染成 Sub 组件，这就是为何 Sub 组件渲染两次的原因。

给 Vue3 提 issue

虽然定位出这个 bug，但一时半会儿我也想不出好的解决方案，于是我尝试给 Vue3 提了个 issue 。

这里顺便与你分享一下提 issue 的一些注意事项：

通常一些不错的开源项目都会有 issue template，你可以根据它的指引创建 issue。
为了让开源项目的维护者更快、更精确的定位问题，通常你需要最小化复现问题，提供一个可复现问题的 demo，而不是提供一个出问题的项目。
建议提问前能加上一些自己对问题的分析和思考，这虽然不是必要的，但这个过程会让你更加熟悉这个开源项目，而且也可以帮助维护者更容易定位问题。
如果确实是个 bug 且你有能力修复的话，提完 issue 可以顺便提一个 pull request，直接参与到开源项目的共建中，这个过程对自身的技术成长会有非常大的帮助。

不过令我尴尬的是，我在提完 issue 后还不到五分钟，issue 就被关闭了，原因是它与 vue-router-next 项目中的一个 issue 重复了。

我对该 issue 做了大致的浏览，发现它早在 2020 年 12 月 1 号就被提出了，而且有相当多的人都遇到了类似的问题。在该 issue 下面可以发现很多相关联的 issue，其中也包括文章开头提到的 issue，这就是为何我能关注到它的原因。

vue-router 的维护者也尝试解决过，但是遇到了一些麻烦，详情可以看他在 issue 中的回复。

遗憾的是到目前为止，该 issue 也没有被解决，维护者给它贴上了 help wanted 的标签，希望得到来自社区的帮助。

Vue2 也有这个问题吗？

因为我司目前还在使用 Vue2，所以我最关心的是 Vue2 是否也存在该问题。

于是我用 Vue2 写了同样的 demo，令我欣慰的是 Vue2 并未有这个 bug，那这又是什么原因呢？

由于 Vue 使用的是 vue-router 的 3.x 版本，它对应的 RouterView 组件的实现如下：

var View = {
  name: 'RouterView',
  functional: true,
  props: {
    name: {
      type: String,
      default: 'default'
    }
  },
  render: function render(_, ref) {
    var props = ref.props
    var children = ref.children
    var parent = ref.parent
    var data = ref.data

    data.routerView = true

    var h = parent.$createElement
    var name = props.name
    var route = parent.$route
    var cache = parent._routerViewCache || (parent._routerViewCache = {})

    var depth = 0
    var inactive = false
    while (parent && parent._routerRoot !== parent) {
      var vnodeData = parent.$vnode ? parent.$vnode.data : {}
      if (vnodeData.routerView) {
        depth++
      }
      if (vnodeData.keepAlive && parent._directInactive && parent._inactive) {
        inactive = true
      }
      parent = parent.$parent
    }
    data.routerViewDepth = depth
    
    if (inactive) {
      var cachedData = cache[name]
      var cachedComponent = cachedData && cachedData.component
      if (cachedComponent) {
        if (cachedData.configProps) {
          fillPropsinData(cachedComponent, data, cachedData.route, cachedData.configProps)
        }
        return h(cachedComponent, data, children)
      } else {
        return h()
      }
    }

    var matched = route.matched[depth]
    var component = matched && matched.components[name]
    
    if (!matched || !component) {
      cache[name] = null
      return h()
    }
    
    cache[name] = { component: component }
    
    data.registerRouteInstance = function(vm, val) {
      var current = matched.instances[name]
      if (
        (val && current !== vm) ||
        (!val && current === vm)
      ) {
        matched.instances[name] = val
      }
    }
    
    (data.hook || (data.hook = {})).prepatch = function(_, vnode) {
      matched.instances[name] = vnode.componentInstance
    }
    
    data.hook.init = function(vnode) {
      if (vnode.data.keepAlive &&
        vnode.componentInstance &&
        vnode.componentInstance !== matched.instances[name]
      ) {
        matched.instances[name] = vnode.componentInstance
      }
      
      handleRouteEntered(route)
    }

    var configProps = matched.props && matched.props[name]
    if (configProps) {
      extend(cache[name], {
        route: route,
        configProps: configProps
      })
      fillPropsinData(component, data, route, configProps)
    }

    return h(component, data, children)
  }
}

RouterView 组件的渲染逻辑和新版本的 vue-router-next 实现一致：根据路径 route 和当前 RouterView 嵌套的深度来匹配路由配置中对应的路由组件并渲染。

不同的是，3.x 版本的 vue-router 处理了 KeepAlive 的情况：如果当前的 RouterView 组件所在的父组件实例身处 KeepAlive 构造的树中，且是 inactive 状态，那么它只会被渲染成上一次渲染的视图。

因此这里有两个关键的点：一是能够判断当前所处的环境，二是需要缓存 RouterView 上一次渲染的视图。

显然，在 vue-router-next 中，是没有对应的逻辑的，主要是因为组件实例中没有存储 KeepAlive 组件相关的 inactive 状态，RouterView 组件也没法知道自己当前所处的环境。

在我看来，如果 vue-router-next 想要解决这个问题，可能还牵涉到 Vue3 内部的一些改动，提供更多的信息数据，让 RouterView 组件在渲染的时候能够知道自己当前所处的环境。

目前解决这个问题的一个办法是在这种嵌套路由的场景下，不使用 KeepAlive 包裹 RouterView。

总结

我们在做技术选型时，其实就要考虑到这层风险，当开源项目出现 bug 或者不能满足你的需求，且不能很快的响应时，你有没有办法帮助开源项目共建，或者通过魔改的方式来解决遇到的问题。

我司使用的 Vue2 CSP 版本，就是基于 Vue.js 2.6.11 版本基础上魔改的，社区不提供支持，就需要自己动手了。

对于开源项目的维护者而言，他们自然有自己的计划和考量，你不能因为自己的项目紧急就要求维护者立马帮你解决问题。当然，实在想寻求紧急帮助，情商高一点的做法是给开源维护者捐赠，通过付费的方式可能会提升 bug 被处理的优先级。

当然，最靠谱的方式还是让自己靠谱起来，遇到 bug 后不要慌，先定位到出现 bug 的根本原因，然后找到合适的解决方案。

如果你此时正在用 Vue3 开发项目，那么请务必注意这个 bug，有能力的可以好好研究，如果给 Vue3 提个 pull request 就更棒了。相比于改改拼写错误混个 contributor，我觉得能解决这类问题的人才能算真正意义上的 contributor。

聊一聊 Vue3 的 9 个知识点前端Vue.js__面试

banyungong — Tue, 18 Jan 2022 01:15:00 GMT

theme: smartblue

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

前一段时间一直在研究 Vue 源码，2和3的源码变化还是挺大的，但是 Vue3 在开发上需要改变以往习惯的地方真没什么，毕竟基础概念是一模一样的，可偏偏 3 的项目写起来就是能让人感觉爽得多，不动手是真体会不到

所以咯，一定要动手！敲代码！不能学而不用，这是不可取的

这里我总结了几个 Vue3 的知识点，如果你是 Vue2 的迁移者、学习 Vue3 或者准备面试的话，相信看完本文一定会有所收获

Vue3 有哪些变化

Vue3 是怎么得更快的？

新增了三个组件：Fragment 支持多个根节点、Suspense 可以在组件渲染之前的等待时间显示指定内容、Teleport 可以让子组件能够在视觉上跳出父组件(如父组件overflow:hidden)
新增指令 v-memo，可以缓存 html 模板，比如 v-for 列表不会变化的就缓存，简单说就是用内存换时间
支持 Tree-Shaking，会在打包时去除一些无用代码，没有用到的模块，使得代码打包体积更小
新增 Composition API 可以更好的逻辑复用和代码组织，同一功能的代码不至于像以前一样太分散，虽然 Vue2 中可以用 minxin 来实现复用代码，但也存在问题，比如方法或属性名会冲突，代码来源也不清楚等
用 Proxy 代替 Object.defineProperty 重构了响应式系统，可以监听到数组下标变化，及对象新增属性，因为监听的不是对象属性，而是对象本身，还可拦截 apply、has 等13种方法
重构了虚拟 DOM，在编译时会将事件缓存、将 slot 编译为 lazy 函数、保存静态节点直接复用(静态提升)、以及添加静态标记、Diff 算法使用最长递增子序列优化了对比流程，使得虚拟 DOM 生成速度提升 200%
支持在 <style></style> 里使用 v-bind，给 CSS 绑定 JS 变量(color: v-bind(str))
用 setup 代替了 beforeCreate 和 created 这两个生命周期
新增了开发环境的两个钩子函数，在组件更新时 onRenderTracked 会跟踪组件里所有变量和方法的变化、每次触发渲染时 onRenderTriggered 会返回发生变化的新旧值，可以让我们进行有针对性调试
毕竟 Vue3 是用 TS 写的，所以对 TS 的支持度更好
Vue3 不兼容 IE11

说一下 Composition API

和 Options API 的区别？

Composition API 也叫组合式 API，它主要就是为了解决 Vue2 中 Options API 的问题。

一是在 Vue2 中只能固定用 data、computed、methods 等选项组织代码，在组件越来越复杂的时候，一个功能相关的属性和方法就会在文件上中下到处都有，很分散，变越来越难维护

二是 Vue2 中虽然可以用 minxin 来做逻辑的提取复用，但是 minxin 里的属性和方法名会和组件内部的命名冲突，还有当引入多个 minxin 的时候，我们使用的属性或方法是来于哪个 minxin 也不清楚

而 Composition API 刚才就解决了这两个问题，可以让我们自由的组织代码，同一功能相关的全部放在一起，代码有更好的可读性更便于维护，单独提取出来也不会造成命名冲突，所以也有更好的可扩展性

说一下 setup

// 方法
setup(props, context){ return { name:'沐华' } }

// 语法糖
<script setup> ... </script>

setup() 方法是在 beforeCreate() 生命周期函数之前执行的函数；

它接收两个参数 props 和 context。它里面不能使用 this，而是通过 context 对象来代替当前执行上下文绑定的对象，context 对象有四个属性：attrs、slots、emit、expose

里面通过 ref 和 reactive 代替以前的 data 语法，return 出去的内容，可以在模板直接使用，包括变量和方法

而使用 setup 语法糖时，不用写 export default {}，子组件只需要 import 就直接使用，不需要像以前一样在 components 里注册，属性和方法也不用 return。

并且里面不需要用 async 就可以直接使用 await，因为这样默认会把组件的 setup 变为 async setup

用语法糖时，props、attrs、slots、emit、expose 的获取方式也不一样了

3.0~3.2版本变成了通过 import 引入的 API：defineProps、defineEmit、useContext(在3.2版本已废弃)，useContext 的属性 { emit, attrs, slots, expose }

3.2+版本不需要引入，而直接调用：defineProps、defineEmits、defineExpose、useSlots、useAttrs

watch 和 watchEffect 的区别

watch 作用是对传入的某个或多个值的变化进行监听；触发时会返回新值和老值；也就是说第一次不会执行，只有变化时才会重新执行

const name = ref('沐华')
watch(name, (newValue, oldValue)=>{ ... }, {immediate:true, deep:true})

// 响应式对象
const boy = reactive({ age:18 })
watch(()=>boy.age, (newValue, oldValue)=>{ ... })

// 监听多个
watch( [name, ()=>boy.age], (newValue, oldValue)=>{ ... } )

watchEffect 是传入一个立即执行函数，所以默认第一次也会执行一次；不需要传入监听内容，会自动收集函数内的数据源作为依赖，在依赖变化的时候又会重新执行该函数，如果没有依赖就不会执行；而且不会返回变化前后的新值和老值

watchEffect(onInvalidate =>{ ... })

共同点是 watch 和 watchEffect 会共享以下四种行为：

停止监听：组件卸载时都会自动停止监听
清除副作用：onInvalidate 会作为回调的第三个参数传入
副作用刷新时机：响应式系统会缓存副作用函数，并异步刷新，避免同一个 tick 中多个状态改变导致的重复调用
监听器调试：开发模式下可以用 onTrack 和 onTrigger 进行调试

官方文档描述如下

Vue3 响应式原理和 Vue2 的区别

众所周知 Vue2 数据响应式是通过 Object.defineProperty() 劫持各个属性 getter 和 setter，在数据变化时发布消息给订阅者，触发相应的监听回调，而这之间存在几个问题

初始化时需要遍历对象所有 key，如果对象层次较深，性能不好
通知更新过程需要维护大量 dep 实例和 watcher 实例，额外占用内存较多
Object.defineProperty 无法监听到数组元素的变化，只能通过劫持重写数方法
动态新增，删除对象属性无法拦截，只能用特定 set/delete API 代替
不支持 Map、Set 等数据结构

而在 Vue3 中为了解决这些问题，使用原生的 proxy 代替，支持监听对象和数组的变化，并且多达13种拦截方法，动态属性增删都可以拦截，新增数据结构全部支持，对象嵌套属性只代理第一层，运行时递归，用到才代理，也不需要维护特别多的依赖关系，性能取得很大进步

更多细节和源码剖析可以看我另一篇文章 Vue3.2 响应式原理源码剖析，及与 Vue2响应式的区别

defineProperty 和 Proxy 的区别

为什么要用 Proxy 代替 defineProperty ？好在哪里？

Object.defineProperty 是 Es5 的方法，Proxy 是 Es6 的方法
defineProperty 不能监听到数组下标变化和对象新增属性，Proxy 可以
defineProperty 是劫持对象属性，Proxy 是代理整个对象
defineProperty 局限性大，只能针对单属性监听，所以在一开始就要全部递归监听。Proxy 对象嵌套属性运行时递归，用到才代理，也不需要维护特别多的依赖关系，性能提升很大，且首次渲染更快
defineProperty 会污染原对象，修改时是修改原对象，Proxy 是对原对象进行代理并会返回一个新的代理对象，修改的是代理对象
defineProperty 不兼容 IE8，Proxy 不兼容 IE11

Vue3 的生命周期

基本上就是在 Vue2 生命周期钩子函数名基础上加了 on；beforeDestory 和 destoryed 更名为 onBeforeUnmount 和 onUnmounted；然后删了两个钩子函数 beforeCreate 和 created；新增了两个开发环境用于调试的钩子

Vue3 的 8 种组件通信

可以看我另一文章，就不搬过来了 Vue3的8种和Vue2的12种组件通信，值得收藏

Vue3 Diff算法和 Vue2 的区别

我们知道在数据变更触发页面重新渲染，会生成虚拟 DOM 并进行 patch 过程，这一过程在 Vue3 中的优化有如下

编译阶段的优化：

事件缓存：将事件缓存(如: @click)，可以理解为变成静态的了
静态提升：第一次创建静态节点时保存，后续直接复用
添加静态标记：给节点添加静态标记，以优化 Diff 过程

由于编译阶段的优化，除了能更快的生成虚拟 DOM 以外，还使得 Diff 时可以跳过"永远不会变化的节点"，Diff 优化如下

Vue2 是全量 Diff，Vue3 是静态标记 + 非全量 Diff
使用最长递增子序列优化了对比流程

根据尤大公布的数据就是 Vue3 update 性能提升了 1.3~2 倍

源码剖析可以看我另一篇文章深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别

往期精彩

结语

老铁，求点赞啊~~

Vue 团队公开快如闪电的全新脚手架工具 create-vue，未来将替代 Vue-CLI，才300余行代码，学它！前端JavaScript__Vue.js

banyungong — Mon, 17 Jan 2022 15:15:00 GMT

highlight: darcula theme: smartblue

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

1. 前言

大家好，我是若川。欢迎关注我的公众号若川视野，最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，已进行两个多月，大家一起交流学习，共同进步。

想学源码，极力推荐之前我写的《学习源码整体架构系列》包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this等十余篇源码文章。

美国时间 2021 年 10 月 7 日早晨，Vue 团队等主要贡献者举办了一个 Vue Contributor Days 在线会议，蒋豪群（知乎胖茶，Vue.js 官方团队成员，Vue-CLI 核心开发），在会上公开了create-vue，一个全新的脚手架工具。

create-vue使用npm init vue@next一行命令，就能快如闪电般初始化好基于vite的Vue3项目。

本文就是通过调试和大家一起学习这个300余行的源码。

阅读本文，你将学到：

1. 学会全新的官方脚手架工具 create-vue 的使用和原理
2. 学会使用 VSCode 直接打开 github 项目
3. 学会使用测试用例调试源码
4. 学以致用，为公司初始化项目写脚手架工具。
5. 等等

2. 使用 npm init vue@next 初始化 vue3 项目

create-vue github README上写着，An easy way to start a Vue project。一种简单的初始化vue项目的方式。

npm init vue@next

估计大多数读者，第一反应是这样竟然也可以，这么简单快捷？

忍不住想动手在控制台输出命令，我在终端试过，见下图。

最终cd vue3-project、npm install 、npm run dev打开页面http://localhost:3000。

2.1 npm init && npx

为啥 npm init 也可以直接初始化一个项目，带着疑问，我们翻看 npm 文档。

npm init

npm init 用法：

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

npm init <initializer> 时转换成npx命令：

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

看完文档，我们也就理解了：

# 运行
npm init vue@next
# 相当于
npx create-vue@next

我们可以在这里create-vue，找到一些信息。或者在npm create-vue找到版本等信息。

其中@next是指定版本，通过npm dist-tag ls create-vue命令可以看出，next版本目前对应的是3.0.0-beta.6。

npm dist-tag ls create-vue
- latest: 3.0.0-beta.6
- next: 3.0.0-beta.6

发布时 npm publish --tag next 这种写法指定 tag。默认标签是latest。

可能有读者对 npx 不熟悉，这时找到阮一峰老师博客 npx 介绍、nodejs.cn npx

npx 是一个非常强大的命令，从 npm 的 5.2 版本（发布于 2017 年 7 月）开始可用。

简单说下容易忽略且常用的场景，npx有点类似小程序提出的随用随走。

轻松地运行本地命令

node_modules/.bin/vite -v
# vite/2.6.5 linux-x64 node-v14.16.0

# 等同于
# package.json script: "vite -v"
# npm run vite

npx vite -v
# vite/2.6.5 linux-x64 node-v14.16.0

使用不同的 Node.js 版本运行代码 某些场景下可以临时切换 node 版本，有时比 nvm 包管理方便些。

npx node@14 -v
# v14.18.0

npx -p node@14 node -v 
# v14.18.0

无需安装的命令执行

# 启动本地静态服务
npx http-server

# 无需全局安装
npx @vue/cli create vue-project
# @vue/cli 相比 npm init vue@next npx create-vue@next 很慢。

# 全局安装
npm i -g @vue/cli
vue create vue-project

npm init vue@next （npx create-vue@next）快的原因，主要在于依赖少（能不依赖包就不依赖），源码行数少，目前index.js只有300余行。

3. 配置环境调试源码

3.1 克隆 create-vue 项目

本文仓库地址 create-vue-analysis，求个star~

# 可以直接克隆我的仓库，我的仓库保留的 create-vue 仓库的 git 记录
git clone https://github.com/lxchuan12/create-vue-analysis.git
cd create-vue-analysis/create-vue
npm i

当然不克隆也可以直接用 VSCode 打开我的仓库

顺带说下：我是怎么保留 create-vue 仓库的 git 记录的。

# 在 github 上新建一个仓库 `create-vue-analysis` 克隆下来
git clone https://github.com/lxchuan12/create-vue-analysis.git
cd create-vue-analysis
git subtree add --prefix=create-vue https://github.com/vuejs/create-vue.git main
# 这样就把 create-vue 文件夹克隆到自己的 git 仓库了。且保留的 git 记录

关于更多 git subtree，可以看Git Subtree 简明使用手册

3.2 package.json 分析

// create-vue/package.json
{
  "name": "create-vue",
  "version": "3.0.0-beta.6",
  "description": "An easy way to start a Vue project",
  "type": "module",
  "bin": {
    "create-vue": "outfile.cjs"
  },
}

bin指定可执行脚本。也就是我们可以使用 npx create-vue 的原因。

outfile.cjs 是打包输出的JS文件

{
  "scripts": {
    "build": "esbuild --bundle index.js --format=cjs --platform=node --outfile=outfile.cjs",
    "snapshot": "node snapshot.js",
    "pretest": "run-s build snapshot",
    "test": "node test.js"
  },
}

执行 npm run test 时，会先执行钩子函数 pretest。run-s 是 npm-run-all 提供的命令。run-s build snapshot 命令相当于 npm run build && npm run snapshot。

根据脚本提示，我们来看 snapshot.js 文件。

3.3 生成快照 snapshot.js

这个文件主要作用是根据const featureFlags = ['typescript', 'jsx', 'router', 'vuex', 'with-tests'] 组合生成31种加上 default 共计 32种 组合，生成快照在 playground目录。

因为打包生成的 outfile.cjs 代码有做一些处理，不方便调试，我们可以修改为index.js便于调试。

// 路径 create-vue/snapshot.js
const bin = path.resolve(__dirname, './outfile.cjs')
// 改成 index.js 便于调试
const bin = path.resolve(__dirname, './index.js')

我们可以在for和 createProjectWithFeatureFlags 打上断点。

createProjectWithFeatureFlags其实类似在终端输入如下执行这样的命令

node ./index.js --xxx --xxx --force

function createProjectWithFeatureFlags(flags) {
  const projectName = flags.join('-')
  console.log(`Creating project ${projectName}`)
  const { status } = spawnSync(
    'node',
    [bin, projectName, ...flags.map((flag) => `--${flag}`), '--force'],
    {
      cwd: playgroundDir,
      stdio: ['pipe', 'pipe', 'inherit']
    }
  )

  if (status !== 0) {
    process.exit(status)
  }
}

// 路径 create-vue/snapshot.js
for (const flags of flagCombinations) {
  createProjectWithFeatureFlags(flags)
}

调试：VSCode打开项目，VSCode高版本(1.50+)可以在 create-vue/package.json => scripts => "test": "node test.js"。鼠标悬停在test上会有调试脚本提示，选择调试脚本。如果对调试不熟悉，可以看我之前的文章koa-compose，写的很详细。

调试时，大概率你会遇到：create-vue/index.js 文件中，__dirname 报错问题。可以按照如下方法解决。在 import 的语句后，添加如下语句，就能愉快的调试了。

// 路径 create-vue/index.js
// 解决办法和nodejs issues
// https://stackoverflow.com/questions/64383909/dirname-is-not-defined-in-node-14-version
// https://github.com/nodejs/help/issues/2907

import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

接着我们调试 index.js 文件，来学习。

4. 调试 index.js 主流程

回顾下上文 npm init vue@next 初始化项目的。

单从初始化项目输出图来看。主要是三个步骤。

1. 输入项目名称，默认值是 vue-project
2. 询问一些配置 渲染模板等
3. 完成创建项目，输出运行提示

async function init() {
  // 省略放在后文详细讲述
}

// async 函数返回的是Promise 可以用 catch 报错
init().catch((e) => {
  console.error(e)
})

4.1 解析命令行参数

// 返回运行当前脚本的工作目录的路径。
const cwd = process.cwd()
// possible options:
// --default
// --typescript / --ts
// --jsx
// --router / --vue-router
// --vuex
// --with-tests / --tests / --cypress
// --force (for force overwriting)
const argv = minimist(process.argv.slice(2), {
    alias: {
        typescript: ['ts'],
        'with-tests': ['tests', 'cypress'],
        router: ['vue-router']
    },
    // all arguments are treated as booleans
    boolean: true
})

minimist

简单说，这个库，就是解析命令行参数的。看例子，我们比较容易看懂传参和解析结果。

$ node example/parse.js -a beep -b boop
{ _: [], a: 'beep', b: 'boop' }

$ node example/parse.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
{ _: [ 'foo', 'bar', 'baz' ],
  x: 3,
  y: 4,
  n: 5,
  a: true,
  b: true,
  c: true,
  beep: 'boop' }

比如

npm init vue@next --vuex --force

4.2 如果设置了 feature flags 跳过 prompts 询问

这种写法方便代码测试等。直接跳过交互式询问，同时也可以省时间。

// if any of the feature flags is set, we would skip the feature prompts
  // use `??` instead of `||` once we drop Node.js 12 support
  const isFeatureFlagsUsed =
    typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) ===
    'boolean'

// 生成目录
  let targetDir = argv._[0]
  // 默认 vue-projects
  const defaultProjectName = !targetDir ? 'vue-project' : targetDir
  // 强制重写文件夹，当同名文件夹存在时
  const forceOverwrite = argv.force

4.3 交互式询问一些配置

如上文npm init vue@next 初始化的图示

输入项目名称
还有是否删除已经存在的同名目录
询问使用需要 JSX Router vuex cypress 等。

let result = {}

  try {
    // Prompts:
    // - Project name:
    //   - whether to overwrite the existing directory or not?
    //   - enter a valid package name for package.json
    // - Project language: JavaScript / TypeScript
    // - Add JSX Support?
    // - Install Vue Router for SPA development?
    // - Install Vuex for state management? (TODO)
    // - Add Cypress for testing?
    result = await prompts(
      [
        {
          name: 'projectName',
          type: targetDir ? null : 'text',
          message: 'Project name:',
          initial: defaultProjectName,
          onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName)
        },
        // 省略若干配置
        {
          name: 'needsTests',
          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
          message: 'Add Cypress for testing?',
          initial: false,
          active: 'Yes',
          inactive: 'No'
        }
      ],
      {
        onCancel: () => {
          throw new Error(red('✖') + ' Operation cancelled')
        }
      }
    ]
    )
  } catch (cancelled) {
    console.log(cancelled.message)
    // 退出当前进程。
    process.exit(1)
  }

4.4 初始化询问用户给到的参数，同时也会给到默认值

// `initial` won't take effect if the prompt type is null
  // so we still have to assign the default values here
  const {
    packageName = toValidPackageName(defaultProjectName),
    shouldOverwrite,
    needsJsx = argv.jsx,
    needsTypeScript = argv.typescript,
    needsRouter = argv.router,
    needsVuex = argv.vuex,
    needsTests = argv.tests
  } = result
  const root = path.join(cwd, targetDir)

  // 如果需要强制重写，清空文件夹

  if (shouldOverwrite) {
    emptyDir(root)
    // 如果不存在文件夹，则创建
  } else if (!fs.existsSync(root)) {
    fs.mkdirSync(root)
  }

  // 脚手架项目目录
  console.log(`\nScaffolding project in ${root}...`)

 // 生成 package.json 文件
  const pkg = { name: packageName, version: '0.0.0' }
  fs.writeFileSync(path.resolve(root, 'package.json'), JSON.stringify(pkg, null, 2))

4.5 根据模板文件生成初始化项目所需文件

  // todo:
  // work around the esbuild issue that `import.meta.url` cannot be correctly transpiled
  // when bundling for node and the format is cjs
  // const templateRoot = new URL('./template', import.meta.url).pathname
  const templateRoot = path.resolve(__dirname, 'template')
  const render = function render(templateName) {
    const templateDir = path.resolve(templateRoot, templateName)
    renderTemplate(templateDir, root)
  }

  // Render base template
  render('base')

   // 添加配置
  // Add configs.
  if (needsJsx) {
    render('config/jsx')
  }
  if (needsRouter) {
    render('config/router')
  }
  if (needsVuex) {
    render('config/vuex')
  }
  if (needsTests) {
    render('config/cypress')
  }
  if (needsTypeScript) {
    render('config/typescript')
  }

4.6 渲染生成代码模板

// Render code template.
  // prettier-ignore
  const codeTemplate =
    (needsTypeScript ? 'typescript-' : '') +
    (needsRouter ? 'router' : 'default')
  render(`code/${codeTemplate}`)

  // Render entry file (main.js/ts).
  if (needsVuex && needsRouter) {
    render('entry/vuex-and-router')
  } else if (needsVuex) {
    render('entry/vuex')
  } else if (needsRouter) {
    render('entry/router')
  } else {
    render('entry/default')
  }

4.7 如果配置了需要 ts

重命名所有的 .js 文件改成 .ts。重命名 jsconfig.json 文件为 tsconfig.json 文件。

jsconfig.json 是VSCode的配置文件，可用于配置跳转等。

把index.html 文件里的 main.js 重命名为 main.ts。

// Cleanup.

if (needsTypeScript) {
    // rename all `.js` files to `.ts`
    // rename jsconfig.json to tsconfig.json
    preOrderDirectoryTraverse(
      root,
      () => {},
      (filepath) => {
        if (filepath.endsWith('.js')) {
          fs.renameSync(filepath, filepath.replace(/\.js$/, '.ts'))
        } else if (path.basename(filepath) === 'jsconfig.json') {
          fs.renameSync(filepath, filepath.replace(/jsconfig\.json$/, 'tsconfig.json'))
        }
      }
    )

    // Rename entry in `index.html`
    const indexHtmlPath = path.resolve(root, 'index.html')
    const indexHtmlContent = fs.readFileSync(indexHtmlPath, 'utf8')
    fs.writeFileSync(indexHtmlPath, indexHtmlContent.replace('src/main.js', 'src/main.ts'))
  }

4.8 配置了不需要测试

因为所有的模板都有测试文件，所以不需要测试时，执行删除 cypress、/__tests__/ 文件夹

  if (!needsTests) {
    // All templates assumes the need of tests.
    // If the user doesn't need it:
    // rm -rf cypress **/__tests__/
    preOrderDirectoryTraverse(
      root,
      (dirpath) => {
        const dirname = path.basename(dirpath)

        if (dirname === 'cypress' || dirname === '__tests__') {
          emptyDir(dirpath)
          fs.rmdirSync(dirpath)
        }
      },
      () => {}
    )
  }

4.9 根据使用的 npm / yarn / pnpm 生成README.md 文件，给出运行项目的提示

// Instructions:
  // Supported package managers: pnpm > yarn > npm
  // Note: until <https://github.com/pnpm/pnpm/issues/3505> is resolved,
  // it is not possible to tell if the command is called by `pnpm init`.
  const packageManager = /pnpm/.test(process.env.npm_execpath)
    ? 'pnpm'
    : /yarn/.test(process.env.npm_execpath)
    ? 'yarn'
    : 'npm'

  // README generation
  fs.writeFileSync(
    path.resolve(root, 'README.md'),
    generateReadme({
      projectName: result.projectName || defaultProjectName,
      packageManager,
      needsTypeScript,
      needsTests
    })
  )

  console.log(`\nDone. Now run:\n`)
  if (root !== cwd) {
    console.log(`  ${bold(green(`cd ${path.relative(cwd, root)}`))}`)
  }
  console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
  console.log(`  ${bold(green(getCommand(packageManager, 'dev')))}`)
  console.log()

5. npm run test => node test.js 测试

// create-vue/test.js
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'

import { spawnSync } from 'child_process'

const __dirname = path.dirname(fileURLToPath(import.meta.url))
const playgroundDir = path.resolve(__dirname, './playground/')

for (const projectName of fs.readdirSync(playgroundDir)) {
  if (projectName.endsWith('with-tests')) {
    console.log(`Running unit tests in ${projectName}`)
    const unitTestResult = spawnSync('pnpm', ['test:unit:ci'], {
      cwd: path.resolve(playgroundDir, projectName),
      stdio: 'inherit',
      shell: true
    })
    if (unitTestResult.status !== 0) {
      throw new Error(`Unit tests failed in ${projectName}`)
    }

    console.log(`Running e2e tests in ${projectName}`)
    const e2eTestResult = spawnSync('pnpm', ['test:e2e:ci'], {
      cwd: path.resolve(playgroundDir, projectName),
      stdio: 'inherit',
      shell: true
    })
    if (e2eTestResult.status !== 0) {
      throw new Error(`E2E tests failed in ${projectName}`)
    }
  }
}

主要对生成快照时生成的在 playground 32个文件夹，进行如下测试。

pnpm test:unit:ci

pnpm test:e2e:ci

6. 总结

我们使用了快如闪电般的npm init vue@next，学习npx命令了。学会了其原理。

npm init vue@next => npx create-vue@next

快如闪电的原因在于依赖的很少。很多都是自己来实现。如：Vue-CLI中 vue create vue-project 命令是用官方的npm包validate-npm-package-name，删除文件夹一般都是使用 rimraf。而 create-vue 是自己实现emptyDir和isValidPackageName。

非常建议读者朋友按照文中方法使用VSCode调试 create-vue 源码。源码中还有很多细节文中由于篇幅有限，未全面展开讲述。

学完本文，可以为自己或者公司创建类似初始化脚手架。

目前版本是3.0.0-beta.6。我们持续关注学习它。

最后欢迎加我微信 ruochuan12 交流，参与源码共读活动，大家一起学习源码，共同进步。

7. 参考资料

发现 create-vue 时打算写文章加入到源码共读计划中，大家一起学习。而源码共读群里小伙伴upupming比我先写完文章。

@upupming vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？

关于 && 交流群

最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，长期交流学习。

作者：常以若川为名混迹于江湖。欢迎加我微信ruochuan12。前端路上 | 所知甚少，唯善学。
关注公众号若川视野，每周一起学源码，学会看源码，进阶高级前端。
若川的博客
 segmentfault若川视野专栏，开通了若川视野专栏，欢迎关注~
掘金专栏，欢迎关注~
知乎若川视野专栏，开通了若川视野专栏，欢迎关注~
github blog，求个star^_^~

Element-UI 奇淫技巧第二弹！提升开发效率，延长摸鱼时间~Element前端

banyungong — Mon, 17 Jan 2022 14:15:00 GMT

theme: cyanosis highlight: atom-one-light

主题样式修改

曾经为了修改组件风格，一个项目用了上百个样式穿透，后来才发现定制一个主题就够了！

第一步，在官网的主题页面，修改背景色、字体颜色及边框颜色

第二步，下载主题

第三步，用下载的css文件替换掉默认的css文件

效果如下：

el-backtop 回到顶部组件

有时候页面很长，我们需要一个回到顶部的按钮，推荐大家使用 el-backtop，自带过渡效果。

代码如下：

<template>
  <div class="container">
    <div class="box">Scroll down to see the bottom-right button.</div>
    <el-backtop target=".container">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow-x: hidden;
  .box {
    padding: 20px;
    height: 1500px;
  }
}
</style>

注意：需要将 body 的 margin 设置为 0，不然会出现两个滚动条。

el-form-item label宽度自适应

通常我们是给 label 设置一个固定宽度，但这完全限制了 UI 的发挥，如何让 label 宽度自适应呢？答案是给控件设置一个固定宽度。

代码如下：

<template>
  <el-form>
    <el-form-item label="教师">
      <el-input v-model="form.teacher" style="width: 625px;"></el-input>
    </el-form-item>
    <el-form-item label="请选择在线教学平台名称">
      <el-select v-model="form.platform" style="width: 500px;">
        <el-option label="平台一" value="1"></el-option>
        <el-option label="平台二" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        teacher: '',
        platform: ''
      }
    }
  }
}
</script>

el-form-item 循环校验

有时候表单项是一个循环的列表，需要对每一项进行校验。

代码如下：

<template>
  <div>
    <el-form :model="form" label-width="100px" ref="form">
      <el-form-item
        v-for="(item, index) in form.list"
        :key="index"
        :label="'评价项目' + (index + 1)"
        :prop="'list.' + index + '.evaluateName'"
        :rules="rules.evaluateName"
      >
        <el-input v-model="item.evaluateName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          }
        ]
      },
      rules: {
        evaluateName: [
          {
            required: true,
            message: '请输入评价项目',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-form-item 表单嵌套表格校验

如果在表单里嵌套表格，那么如何对表格里面的控件进行校验呢？

代码如下：

<template>
  <el-form :model="form" ref="form">
    <el-table border :data="form.list" style="margin-bottom: 10px;">
      <el-table-column
        label="评价项目"
        prop="evaluateName"
        align="center"
      ></el-table-column>
      <el-table-column label="评价等级" align="center">
        <template slot-scope="scope">
          <el-form-item
            :prop="'list.' + scope.$index + '.evaluateLevel'"
            :rules="rules.evaluateLevel"
            class="evaluate-level"
          >
            <el-radio-group class="radio-group" v-model="scope.row.evaluateLevel">
              <el-radio
                v-for="evaluationItem in evaluateOptions"
                :key="evaluationItem.value"
                :label="evaluationItem.value"
              >
                {{ evaluationItem.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>
      <el-button type="primary" class="submit-btn" @click="submitOpinionCheck">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            id: '01',
            evaluateName: '指标一',
            evaluateLevel: ''
          },
          {
            id: '02',
            evaluateName: '指标二',
            evaluateLevel: ''
          },
          {
            id: '03',
            evaluateName: '指标二',
            evaluateLevel: ''
          }
        ]
      },
      evaluateOptions: [
        {
          value: '1',
          label: '优'
        },
        {
          value: '2',
          label: '良'
        },
        {
          value: '3',
          label: '中'
        },
        {
          value: '4',
          label: '差'
        }
      ],
      rules: {
        evaluateLevel: [{ required: true, message: '请选择评价等级', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitOpinionCheck() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluate-level {
  ::v-deep .el-form-item__error {
    width: 100px;
    /* 使校验信息居中 */
    left: calc(50% - 50px);
  }
}
</style>

el-form-item 表单校验 label只保留 *

有时候我们只需要表单校验的 *，而不需要 lable 文字，像这样：

代码如下：

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px">
    <el-form-item label=" " prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
    </el-form-item>
    <el-form-item label=" " prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-select 下拉框样式修改

使用样式穿透修改下拉框样式，你会发现打死都不生效，那是因为下拉框是默认挂载在 body 下面。解决办法：设置 :popper-append-to-body="false"

代码如下：

<template>
  <el-form>
    <el-form-item label="活动区域">
      <el-select
        class="form-select"
        :popper-append-to-body="false"
        v-model="form.region"
        placeholder="请选择活动区域"
      >
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        region: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-select {
  ::v-deep .el-select-dropdown__item.selected {
    background: pink;
  }
}
</style>

el-input 打开弹框自动聚焦

很多时候 form 表单是嵌套在 dialog 下面，为了提高用户体验，需要在打开弹框后 input 框自动聚焦。

代码如下：

<template>
  <div>
    <el-button type="text" @click="showDialog">
      打开嵌套表单的 Dialog
    </el-button>

    <el-dialog title="活动" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="80px">
          <el-input ref="nameInput" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动内容" label-width="80px">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        content: ''
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      // 如果弹框显示，则自动聚焦
      this.$nextTick(() => {
        this.$refs.nameInput.focus()
      })
    }
  }
}
</script>

今天的分享就到到这里，希望对你有所帮助！如果觉得有用，不要忘了点个赞呦~

听说喜欢点赞的你，今年年终奖拿到手软

后端一次给你10万条数据，如何优雅展示，到底考察我什么?前端Vue.js__面试

banyungong — Mon, 17 Jan 2022 13:15:00 GMT

theme: smartblue

前言

大家好，我是林三心，用最通俗的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心，今天跟大家来唠唠嗑，如果后端真的返回给前端10万条数据，咱们前端要怎么优雅地展示出来呢？（哈哈假设后端真的能传10万条数据到前端）

前置工作

先把前置工作给做好，后面才能进行测试

后端搭建

新建一个server.js文件，简单起个服务，并返回给前端10w条数据，并通过nodemon server.js开启服务

没有安装nodemon的同学可以先全局安装npm i nodemon -g

// server.js

const http = require('http')
const port = 8000;

http.createServer(function (req, res) {
  // 开启Cors
  res.writeHead(200, {
    //设置允许跨域的域名，也可设置*允许所有域名
    'Access-Control-Allow-Origin': '*',
    //跨域允许的请求方法，也可设置*允许所有方法
    "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
    //允许的header类型
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  let list = []
  let num = 0

  // 生成10万条数据的list
  for (let i = 0; i < 100000; i++) {
    num++
    list.push({
      src: 'https://p3-passport.byteacctimg.com/img/user-avatar/d71c38d1682c543b33f8d716b3b734ca~300x300.image',
      text: `我是${num}号嘉宾林三心`,
      tid: num
    })
  }
  res.end(JSON.stringify(list));
}).listen(port, function () {
  console.log('server is listening on port ' + port);
})

前端页面

先新建一个index.html

// index.html

// 样式
<style>
    * {
      padding: 0;
      margin: 0;
    }
    #container {
      height: 100vh;
      overflow: auto;
    }
    .sunshine {
      display: flex;
      padding: 10px;
    }
    img {
      width: 150px;
      height: 150px;
    }
  </style>

// html部分
<body>
  <div id="container">
  </div>
  <script src="./index.js"></script>
</body>

然后新建一个index.js文件，封装一个AJAX函数，用来请求这10w条数据

// index.js

// 请求函数
const getList = () => {
    return new Promise((resolve, reject) => {
        //步骤一:创建异步对象
        var ajax = new XMLHttpRequest();
        //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数
        ajax.open('get', 'http://127.0.0.1:8000');
        //步骤三:发送请求
        ajax.send();
        //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                resolve(JSON.parse(ajax.responseText))
            }
        }
    })
}

// 获取container对象
const container = document.getElementById('container')

直接渲染

最直接的方式就是直接渲染出来，但是这样的做法肯定是不可取的，因为一次性渲染出10w个节点，是非常耗时间的，咱们可以来看一下耗时，差不多要消耗12秒，非常消耗时间

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    list.forEach(item => {
        const div = document.createElement('div')
        div.className = 'sunshine'
        div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
        container.appendChild(div)
    })
    console.timeEnd('列表时间')
}
renderList()

setTimeout分页渲染

这个方法就是，把10w按照每页数量limit分成总共Math.ceil(total / limit)页，然后利用setTimeout，每次渲染1页数据，这样的话，渲染出首页数据的时间大大缩减了

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        setTimeout(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        }, 0)
    }
    render(page)
    console.timeEnd('列表时间')
}

requestAnimationFrame

使用requestAnimationFrame代替setTimeout，减少了重排的次数，极大提高了性能，建议大家在渲染方面多使用requestAnimationFrame

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        // 使用requestAnimationFrame代替setTimeout
        requestAnimationFrame(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('列表时间')
}

文档碎片 + requestAnimationFrame

文档碎片的好处

1、之前都是每次创建一个div标签就appendChild一次，但是有了文档碎片可以先把1页的div标签先放进文档碎片中，然后一次性appendChild到container中，这样减少了appendChild的次数，极大提高了性能
2、页面只会渲染文档碎片包裹着的元素，而不会渲染文档碎片

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        requestAnimationFrame(() => {
            // 创建一个文档碎片
            const fragment = document.createDocumentFragment()
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                // 先塞进文档碎片
                fragment.appendChild(div)
            }
            // 一次性appendChild
            container.appendChild(fragment)
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('列表时间')
}

懒加载

为了比较通俗的讲解，咱们启动一个vue前端项目，后端服务还是开着

其实实现原理很简单，咱们通过一张图来展示，就是在列表尾部放一个空节点blank，然后先渲染第1页数据，向上滚动，等到blank出现在视图中，就说明到底了，这时候再加载第二页，往后以此类推。

至于怎么判断blank出现在视图上，可以使用getBoundingClientRect方法获取top属性

IntersectionObserver 性能更好，但是我这里就拿getBoundingClientRect来举例

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
const getList = () => {
  // 跟上面一样的代码
}

const container = ref<HTMLElement>() // container节点
const blank = ref<HTMLElement>() // blank节点
const list = ref<any>([]) // 列表
const page = ref(1) // 当前页数
const limit = 200 // 一页展示
// 最大页数
const maxPage = computed(() => Math.ceil(list.value.length / limit))
// 真实展示的列表
const showList = computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
  // 当前页数与最大页数的比较
  if (page.value > maxPage.value) return
  const clientHeight = container.value?.clientHeight
  const blankTop = blank.value?.getBoundingClientRect().top
  if (clientHeight === blankTop) {
    // blank出现在视图，则当前页数加1
    page.value++
  }
}

onMounted(async () => {
  const res = await getList()
  list.value = res
})
</script>

<template>
  <div id="container" @scroll="handleScroll" ref="container">
    <div class="sunshine" v-for="(item) in showList" :key="item.tid">
      <img :src="item.src" />
      <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</template>

虚拟列表

虚拟列表需要讲解的比较多，在这里我分享一下我的一篇虚拟列表的文章，哈哈我自认为讲的不错吧哈哈哈哈哈哈

结合“康熙选秀”，给大家讲讲“虚拟列表”

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。

如果你想一起学习前端或者摸鱼，那你可以加我，加入我的摸鱼学习群，点击这里 —> 摸鱼沸点

如果你是有其他目的的，别加我，我不想跟你交朋友，我只想简简单单学习前端，不想搞一些有的没的！！！

研究大佬写的倒计时组件(Vue)，学到了不少东西Vue.js前端

banyungong — Mon, 17 Jan 2022 12:15:00 GMT

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。

一、前言

入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目。

由于是一起开发，当然不会放过阅读大佬的代码的机会。

因为我的页面中需要使用到倒计时功能，发现大佬的已经写了个现成的倒计时组件，于是直接就拿过来用了。

传个参数就实现了功能的感觉真是太棒了。项目完成后，就膜拜了一下大佬的倒计时组件的代码。真是让我学到了不少。列举如下：

计时器为什么要用setTimeout而不用setInterval
为什么不直接将剩余时间-1。
如何将所需要的时间返回出去（有可能我只需要分钟和秒数，那就只返回分钟和秒数，也有可能我全都要）。
不确定接口返回的是剩余时间还是截止日期，该怎么同时兼容这两种情况。
不确定接口返回的时间是秒还是毫秒单位。

好了，你可能不太理解这些问题，但是没关系，看完下面的解释，相信你会豁然开朗。

二、开始手操

1. 先创建一个vue组件

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
   
  }),
  props: {
    
  },
};
</script>
<style lang='scss' scoped>

</style>

2. 实现基本的倒计时组件

接下来，假设接口获得的是一个剩余时间。

将剩余时间time传入这个倒计时组件，由于time可能是秒为单位的，也有可能是毫秒为单位的，所以我们需要在传入time的是有也传入一个isMilliSecond来告诉倒计时组件这个time是毫秒还是秒为单位的。如下代码中的props所示。

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
};
</script>
<style lang='scss' scoped>

</style>

computed中的duration是将time进行转化的结果，不管time是毫秒还是秒，都转化为秒不知道你注意到了没有：+this.time。为什么要在前面加个‘+’号。这点很值得我们学习，因为接口返回的一串数字有时候是字符串的形式，有时候是数字的形式（~~不能过分相信后端同学，必须自己做好防范~~）。所以通过前面加个‘+’号通通转化为数字。现在的duration就是转化后的time啦！

我们获得duration之后就可以开始倒计时了

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  // 新增代码：
  mounted() {
    this.countDown();
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
  }
};
</script>
<style lang='scss' scoped>

</style>

在这里创建了一个countDown方法，表示开始倒计时的意思，已进入页面就开始执行countdown方法。

countDown方法调用了getTime方法，getTime需要传入duration这个参数，也就是我们获得的剩余时间。

现在来实现一下这个方法。

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
    // 新增代码：
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        this.getTime(duration - 1);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

可以看到，getTime的目的就是获得 days，hours,mins，seconds，然后显示到html上，并且通过定时器实时来刷新days，hours,mins，seconds这个几个值。从而实现了倒计时。很简单，有木有？

durationFormatter是一个将duration转化成天数，小时，分钟，秒数的方法，很简单，可以看下它的具体实现。

durationFormatter(time) {
  if (!time) return { ss: 0 };
  let t = time;
  const ss = t % 60;
  t = (t - ss) / 60;
  if (t < 1) return { ss };
  const mm = t % 60;
  t = (t - mm) / 60;
  if (t < 1) return { mm, ss };
  const hh = t % 24;
  t = (t - hh) / 24;
  if (t < 1) return { hh, mm, ss };
  const dd = t;
  return { dd, hh, mm, ss };
},

好了，问题开始来了！！

3. 为什么要用setTimeout来模拟setInterval的行为？

这里用setInerval不是更方便吗？

setTimeout(function(){··· }, n); // n毫秒后执行function

setInterval(function(){··· }, n); // 每隔n毫秒执行一次function

可以看看setInterval有什么缺点：

再次强调，定时器指定的时间间隔，表示的是何时将定时器的代码添加到消息队列，而不是何时执行代码。所以真正何时执行代码的时间是不能保证的，取决于何时被主线程的事件循环取到，并执行。

setInterval(function, N)  
//即：每隔N秒把function事件推到消息队列中

上图可见，setInterval每隔100ms往队列中添加一个事件；100ms后，添加T1定时器代码至队列中，主线程中还有任务在执行，所以等待，some event执行结束后执行T1定时器代码；又过了100ms，T2定时器被添加到队列中，主线程还在执行T1代码，所以等待；又过了100ms，理论上又要往队列里推一个定时器代码，但由于此时T2还在队列中，所以T3不会被添加，结果就是此时被跳过；这里我们可以看到，T1定时器执行结束后马上执行了T2代码，所以并没有达到定时器的效果。

综上所述，setInterval有两个缺点：

使用setInterval时，某些间隔会被跳过；
可能多个定时器会连续执行；

可以这么理解：每个setTimeout产生的任务会直接push到任务队列中；而setInterval在每次把任务push到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中)。

因而我们一般用setTimeout模拟setInterval，来规避掉上面的缺点。

4. 为什么要clearTimeout(this.timer)

第二问：为什么要有this.timer && clearTimeout(this.timer);这一句？

假设一个场景：

如图所示，在倒计时的父组件中，有两个按钮，点击活动一就会传入活动一的剩余时间，点击活动二，就会传入活动二的时间。

如果此时倒计时组件正在做活动一的倒计时，然后点击活动二，就要会马上传入新的time，这个时候就需要重新计时。当然，这里并不会重新计时，因为组件的mounted只会执行一次。也就是说this.countDown();只会执行一次，也就是说this.getTime(this.duration);只会执行一次，因此duration还是活动一的时间，怎么办呢？watch派上用场了。

我们来监听duration，如果发现duration变化，说明新的时间time传入组件，这时就要重新调用this.countDown()。

代码如下：

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  // 新增代码：
  watch: {
    duration() {
      this.countDown();
    }
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
    durationFormatter(){...}
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        this.getTime(duration - 1);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

好了，但是并没有解释上面提出的那个问题：为什么要有this.timer && clearTimeout(this.timer);这一句？

这样，假设现在页面显示的是活动一的时间，这时，执行到setTimeout，在一秒后就会把setTimeout里的回调函数放到任务队列中，注意是一秒后哦！这时，然而，在这一秒的开头，我们点击了活动二按钮，这时候的活动二的时间就会传入倒计时组件中，然后触发countDown(),也就调用this.getTime(this.duration);，然后执行到setTimeout，也会一秒后把回调函数放到任务队列中。

这时，任务队列中就会有两个setTimeout的回调函数了。等待一秒过去，两个回调函数相继执行，我们就会看到页面上的时间一下子背减了2，实际上是很快速地进行了两遍减1的操作。

这就是为什么要添加上this.timer && clearTimeout(this.timer);这一句的原因了。就是要把上一个setTimeout清除掉。

5. 使用 diffTime

当你认为这是一个完美的组件的时候，你想把这个组件用到项目上，假设你也确实用了，而且还上线了，确发现出现了个大问题：当页面打开的时候，倒计时开始了，时间是 还剩1天12：25：25，然后有人给你发微信，你马上切换到微信，回复消息后切回浏览器，发现倒计时时间却还是还剩1天12：25：25。你慌了：你写的代码出现bug了！

这是怎么回事？

出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停待用户回到浏览器时, 才会重新激活定时任务

说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异。

原来如此，看来不能每次都只是减1这么简单了（毕竟你把浏览器切到后台之后setTimeout就冷却了，等几秒后切回，然后执行setTimeout，只是减了一秒而已）。

所以我们需要改写一下getTime方法。

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
    curTime: 0,// 新增代码：
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  
  watch: {
    duration() {
      this.countDown();
    }
  },
  methods: {
    countDown() {
      // 新增代码：
      this.curTime = Date.now();
      this.getTime(this.duration);
    },
    durationFormatter(){...}
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        // 新增代码：
        const now = Date.now();
        const diffTime = Math.floor((now - this.curTime) / 1000);
        this.curTime = now;
        this.getTime(duration - diffTime);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

可以看到，我们在三个位置添加了新的代码。

首先在data了添加了curTime这个变量，然后在执行countDown的时候给curTime赋值Date.now()，也就是当前的时刻，也就是显示在页面上的那个时刻。

然后看修改的第三处代码。可以看到是将-1改成了-diffTime。

now 是 setTimeout的回调函数执行的时候的那个时刻。

因而 diffTime 则表示 当前这个setTimeout的回调函数执行的时刻距离上页面上的剩余时间上一次变化的时间段。其实也就是 当前这个setTimeout的回调函数执行的时刻距离上一个setTimeout的回调函数执行的时刻时间段。

可能你还是不太能理解diffTime。举个例子：

你打开了这个倒计时页面，于是执行了countDown，也就是说要执行getTime这个方法了。也就是会马上执行下列的代码。

this.days = dd || 0;
this.hours = hh || 0;
this.mins = mm || 0;
this.seconds = ss || 0;

执行完这些代码页面上就会出现剩余时间。

而this.curTime = Date.now(); 就记录下了此刻的时间点。

然后一秒后执行setTimeout里的回调函数：

const now = Date.now(); 记录当前这个setTimeout的回调函数执行的时间点。

const diffTime = Math.floor((now - this.curTime) / 1000); 记录当前这个setTimeout的回调函数执行的时间点距离页面上开始渲染剩余时间的这一段时间。其实此时的diffTime就是=1。

然后this.curTime = now; 将curTime的值变成当前这个setTimeout的回调函数执行的时间点。

this.getTime(duration - diffTime); 其实就是this.getTime(duration - 1);

然后又执行getTime，就会重新执行下面的代码，有渲染了新的剩余时间。

this.days = dd || 0;
this.hours = hh || 0;
this.mins = mm || 0;
this.seconds = ss || 0;

然后一秒后又要执行setTmieout的回调函数，在这一秒还没结束的时候，我们将浏览器切到后台，此时setTimeout冷却了。等5秒后再切回。于是setTmieout的回调函数才得以执行。

这时const now = Date.now(); 记录当前这个setTimeout的回调函数执行的时间点。

而curTime是上一个setTimeout的回调函数执行的时间。

所以const diffTime = Math.floor((now - this.curTime) / 1000);实际上，diffTime的值就是5秒。

因而this.getTime(duration - diffTime); 其实就是this.getTime(duration - 5);

这样就完美解决了因为浏览器切到后台，导致剩余时间不变的问题。

6. 添加新功能：可以传入到期时间。

之前是只能传入剩余时间的，现在希望也支持传入到期时间。

只需要改动一下duration就好了。

  computed: {
    duration() {
      if (this.end) {
        let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;
        end -= Date.now();
        return end;
      }
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },

判断传入的end的长度是否大于13来判断是秒还是毫秒。轻松！

7. 添加新功能：可以选择要显示的内容，例如只显示秒，或者只显示小时。

只需要改动一下html：

<template>
  <div class="_base-count-down no-rtl">
    <div class="content">
      <slot v-bind="{
        d: days, h: hours, m: mins, s: seconds,
        hh: `00${hours}`.slice(-2),
        mm: `00${mins}`.slice(-2),
        ss: `00${seconds}`.slice(-2),
      }"></slot>
    </div>
  </div>
</template>

很巧妙有没有，只需要用插槽，就把倒计时组件，也就是把子组件的值传递给父组件了。

看看父组件是怎么使用这个组件的。

<base-counter v-slot="timeObj" :time="countDown">
  <div class="count-down">
    <div class="icon"></div>
    {{timeObj.d}}天{{timeObj.hh}}小时{{timeObj.mm}}分钟{{timeObj.ss}}秒
  </div>
</base-counter>

看，如此巧妙又简单。

发现00${hours}.slice(-2) 这种写法也很值得学习。以前在获得到分钟的时候，要手动判断获得的分钟是两位数还是一位数，如果是一位数的话就要在前面手动补上0。就像下面的代码：

var StartMinute = startDate.getMinutes().toString().length >= 2 ? startDate.getMinutes() : '0' + startDate.getHours();

而00${hours}.slice(-2) 则不用判断，先补上0再说，然后再从后面往前截取两位。

到此。

一个完美的倒计时组件就完成了。

三、学习总结

明白了setInterval的缺点以及用setTimeout代替setInterval。
学到了“+”，操作，不管三七二十一，将接口得到的长串数字转化为数字保平安。
利用clearTimeout来清除掉之前的计时器，以防止造成影响。
学会使用v-slot来子传父传值
学会一个倒计时组件，为了以后方便cv操作。把组件完整代码贴上：

<template>
  <div class="_base-count-down no-rtl">
    <div class="content">
      <slot v-bind="{
        d: days, h: hours, m: mins, s: seconds,
        hh: `00${hours}`.slice(-2),
        mm: `00${mins}`.slice(-2),
        ss: `00${seconds}`.slice(-2),
      }"></slot>
    </div>
  </div>
</template>
<script>
/* eslint-disable object-curly-newline */

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
    curTime: 0
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    refreshCounter: {
      type: [Number, String],
      default: 0
    },
    end: {
      type: [Number, String],
      default: 0
    },
    isMiniSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      if (this.end) {
        let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;
        end -= Date.now();
        return end;
      }
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  watch: {
    duration() {
      this.countDown();
    },
    refreshCounter() {
      this.countDown();
    }
  },
  methods: {
    durationFormatter(time) {
      if (!time) return { ss: 0 };
      let t = time;
      const ss = t % 60;
      t = (t - ss) / 60;
      if (t < 1) return { ss };
      const mm = t % 60;
      t = (t - mm) / 60;
      if (t < 1) return { mm, ss };
      const hh = t % 24;
      t = (t - hh) / 24;
      if (t < 1) return { hh, mm, ss };
      const dd = t;
      return { dd, hh, mm, ss };
    },
    countDown() {
      // eslint-disable-next-line no-unused-expressions
      this.curTime = Date.now();
      this.getTime(this.duration);
    },
    getTime(time) {
      // eslint-disable-next-line no-unused-expressions
      this.timer && clearTimeout(this.timer);
      if (time < 0) {
        return;
      }
      // eslint-disable-next-line object-curly-newline
      const { dd, hh, mm, ss } = this.durationFormatter(time);
      this.days = dd || 0;
      // this.hours = `00${hh || ''}`.slice(-2);
      // this.mins = `00${mm || ''}`.slice(-2);
      // this.seconds = `00${ss || ''}`.slice(-2);
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        const now = Date.now();
        const diffTime = Math.floor((now - this.curTime) / 1000);
        const step = diffTime > 1 ? diffTime : 1; // 页面退到后台的时候不会计时，对比时间差，大于1s的重置倒计时
        this.curTime = now;
        this.getTime(time - step);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>
@import '~@assets/css/common.scss';

._base-count-down {
  color: #fff;
  text-align: left;
  position: relative;
  .content {
    width: auto;
    display: flex;
    align-items: center;
  }
  span {
    display: inline-block;
  }
  .section {
    position: relative;
  }
}
</style>

你学到了什么，欢迎补充！！

欢迎大家留言讨论，祝工作顺利、生活愉快！

我是bigo前端，下期见。

就因为JSON.stringify，我的年终奖差点打水漂了JavaScriptVue.js__前端

banyungong — Mon, 17 Jan 2022 11:15:00 GMT

theme: juejin

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」

开发要对线上环境有一颗敬畏之心，任何一个点都有可能导致线上故障，也有可能让你的年终奖泡汤(⊙︿⊙)。比如使用了JSON.stringify，这个无比熟悉但又无比陌生的API。

看完本文您可以收获：

了解一个差点让我年终奖打水漂的悲伤的故事o(╥﹏╥)o
学习JSON.stringify的9大特性和转换规则 (重点)
了解如何判断一个对象是否存在循环引用 (重点)
从零开始手写一个JSON.stringify (重点)
等等

说一个悲伤的故事

最近组内有个小伙伴离职了，他所负责的一块业务由我去维护，结果刚接手，代码还没捂热乎，差点背上p0的锅。请让我花一点时间和你说清楚来龙去脉。

悲伤伊始

这一天胖头鱼正徜徉在代码的海洋不可自拔，突然被拉进了一个线上问题排查群，群里不可谓不热闹。

产品同学在诉苦：线上用户不能提交表单了，带来了好多客诉，估计会是p0故障，希望尽快解决。

测试同学在纳闷：这个场景测试和预发环境明明验过的，怎么线上就不行了。

后端同学在讲原因：接口缺少了value字段，导致出错了。

就是木有人说问题怎么解决!!!

这样的场景不知道你是不是也似曾相识呢？o(╥﹏╥)o，不管咋说第一要务还是先把线上问题解决掉，减少持续影响，赶紧把交接的代码翻出来，开始了排查过程。

问题原因

如下图：有这样一个动态表单搜集页面，用户选择或者填写了信息之后（各字段非必填情况下也可以直接提交），接着前端把数据发送给后端，结束，看起来没有多复杂的逻辑。

直接错误原因

非必填情况下，signInfo字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常，用户无法进行下一步动作。

// 异常入参数据，数组字符串中没有value key
{
  signInfo: '[{"fieldId":539},{"fieldId":540},{"fieldId":546,"value":"10:30"}]'
}

// 正常入参数据
{
  signInfo: '[{"fieldId":539,"value":"银卡"},{"fieldId":540,"value":"2021-03-01"},{"fieldId":546,"value":"10:30"}]'
}

异常数据是如何产生的

// 默认情况下数据是这样的
let signInfo = [
  {
    fieldId: 539,
    value: undefined
  },
  {
    fieldId: 540,
    value: undefined
  },
  {
    fieldId: 546,
    value: undefined
  },
]
// 经过JSON.stringify之后的数据,少了value key,导致后端无法读取value值进行报错
// 具体原因是`undefined`、`任意的函数`以及`symbol值`，出现在`非数组对象`的属性值中时在序列化过程中会被忽略
console.log(JSON.stringify(signInfo))
// '[{"fieldId":539},{"fieldId":540},{"fieldId":546}]'

解决方案

问题的原因找到了，解决方式 (这里只讲前端的解决方案，当然也可以由后端解决) 也很简单，将value值为undefined的项转化为空字符串再提交即可。

方案一：新开一个对象处理

let signInfo = [
  {
    fieldId: 539,
    value: undefined
  },
  {
    fieldId: 540,
    value: undefined
  },
  {
    fieldId: 546,
    value: undefined
  },
]

let newSignInfo = signInfo.map((it) => {
  const value = typeof it.value === 'undefined' ? '' : it.value
  return {
    ...it,
    value
  }
})

console.log(JSON.stringify(newSignInfo))
// '[{"fieldId":539,"value":""},{"fieldId":540,"value":""},{"fieldId":546,"value":""}]'

方案二：利用JSON.stringify第二个参数，直接处理

方案一的缺陷是需要新开一个对象进行一顿操作才能解决，不够优雅

let signInfo = [
  {
    fieldId: 539,
    value: undefined
  },
  {
    fieldId: 540,
    value: undefined
  },
  {
    fieldId: 546,
    value: undefined
  },
]

// 判断到value为undefined，返回空字符串即可
JSON.stringify(signInfo, (key, value) => typeof value === 'undefined' ? '' : value)
// '[{"fieldId":539,"value":""},{"fieldId":540,"value":""},{"fieldId":546,"value":""}]'

故事后续

原本这是一个已经上线有一段时间的页面，为何会突然出现这个问题，之前却没有呢？仔细询问下，原来是中途产品同学提了一个小的优化点，离职的小伙伴感觉点比较小直接就改了代码上线了，未曾想出现了线上问题。

后面针对这件事从产品到测试、到后端、到前端单独做了一个完整的复盘，细节就不再展开说了。

因为从发现问题到解决问题速度较快、影响用户数较少，还未达到问责程度，俺的年终奖可算是保住了o(╥﹏╥)o。

重学JSON.stringify

经过这件事情，我觉得有必要重新审视一下JSON.stringify这个方法，彻底搞清楚转换规则，并尝试手写实现一个JSON.stringify

如果你曾遇到和我一样的问题，欢迎一起来重新学习一次，一定会有不一样的收获噢！

学透JSON.stringify

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

以下信息来自MDN

语法

JSON.stringify(value[, replacer [, space]])

参数

value

将要序列化成一个 JSON 字符串的值。
replacer 可选
1. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
2. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
3. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
space 可选
1. 指定缩进用的空白字符串，用于美化输出（pretty-print）；
2. 如果参数是个数字，它代表有多少的空格；上限为10。
3. 该值若小于1，则意味着没有空格；
4. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；
5. 如果该参数没有提供（或者为 null），将没有空格。

返回值

一个表示给定值的JSON字符串。

异常

当在循环引用时会抛出异常TypeError (“cyclic object value”)（循环对象值）
当尝试去转换 BigInt 类型的值会抛出TypeError (“BigInt value can’t be serialized in JSON”)（BigInt值不能JSON序列化）.

基本使用

注意

JSON.stringify可以转换对象或者值（平常用的更多的是转换对象）
可以指定replacer为函数选择性的地替换
也可以指定replacer为数组，可转换指定的属性

这里仅仅是MDN上关于JSON.stringify其中最基础的说明，咱们先打个码试试这几个特性

// 1. 转换对象
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy' })) // '{"name":"前端胖头鱼","sex":"boy"}'

// 2. 转换普通值
console.log(JSON.stringify('前端胖头鱼')) // "前端胖头鱼"
console.log(JSON.stringify(1)) // "1"
console.log(JSON.stringify(true)) // "true"
console.log(JSON.stringify(null)) // "null"

// 3. 指定replacer函数
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, (key, value) => {
  return typeof value === 'number' ? undefined : value
}))
// '{"name":"前端胖头鱼","sex":"boy"}'

// 4. 指定数组
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, [ 'name' ]))
// '{"name":"前端胖头鱼"}'

// 5. 指定space(美化输出)
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }))
// '{"name":"前端胖头鱼","sex":"boy","age":100}'
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, null , 2))
/*
{
  "name": "前端胖头鱼",
  "sex": "boy",
  "age": 100
}
*/

9大特性要记住

以前仅仅是使用了这个方法，却没有详细了解他的转换规则，居然有9个之多。

特性一

undefined、任意的函数以及symbol值，出现在非数组对象的属性值中时在序列化过程中会被忽略
undefined、任意的函数以及symbol值出现在数组中时会被转换成 null。
undefined、任意的函数以及symbol值被单独转换时，会返回 undefined

// 1. 对象中存在这三种值会被忽略
console.log(JSON.stringify({
  name: '前端胖头鱼',
  sex: 'boy',
  // 函数会被忽略
  showName () {
    console.log('前端胖头鱼')
  },
  // undefined会被忽略
  age: undefined,
  // Symbol会被忽略
  symbolName: Symbol('前端胖头鱼')
}))
// '{"name":"前端胖头鱼","sex":"boy"}'

// 2. 数组中存在着三种值会被转化为null
console.log(JSON.stringify([
  '前端胖头鱼',
  'boy',
  // 函数会被转化为null
  function showName () {
    console.log('前端胖头鱼')
  },
  //undefined会被转化为null
  undefined,
  //Symbol会被转化为null
  Symbol('前端胖头鱼')
]))
// '["前端胖头鱼","boy",null,null,null]'

// 3.单独转换会返回undefined
console.log(JSON.stringify(
  function showName () {
    console.log('前端胖头鱼')
  }
)) // undefined
console.log(JSON.stringify(undefined)) // undefined
console.log(JSON.stringify(Symbol('前端胖头鱼'))) // undefined

特性二

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

console.log(JSON.stringify([new Number(1), new String("前端胖头鱼"), new Boolean(false)]))
// '[1,"前端胖头鱼",false]'

特性三

所有以symbol为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

console.log(JSON.stringify({
  [Symbol('前端胖头鱼')]: '前端胖头鱼'}
)) 
// '{}'
console.log(JSON.stringify({
  [ Symbol('前端胖头鱼') ]: '前端胖头鱼',
}, (key, value) => {
  if (typeof key === 'symbol') {
    return value
  }
}))
// undefined

特性四

NaN 和 Infinity 格式的数值及 null 都会被当做 null。

console.log(JSON.stringify({
  age: NaN,
  age2: Infinity,
  name: null
}))
// '{"age":null,"age2":null,"name":null}'

特性五

转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。

const toJSONObj = {
  name: '前端胖头鱼',
  toJSON () {
    return 'JSON.stringify'
  }
}

console.log(JSON.stringify(toJSONObj))
// "JSON.stringify"

特性六

Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。

const d = new Date()

console.log(d.toJSON()) // 2021-10-05T14:01:23.932Z
console.log(JSON.stringify(d)) // "2021-10-05T14:01:23.932Z"

特性七

对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

let cyclicObj = {
  name: '前端胖头鱼',
}

cyclicObj.obj = cyclicObj

console.log(JSON.stringify(cyclicObj))
// Converting circular structure to JSON

特性八

其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性

let enumerableObj = {}

Object.defineProperties(enumerableObj, {
  name: {
    value: '前端胖头鱼',
    enumerable: true
  },
  sex: {
    value: 'boy',
    enumerable: false
  },
})

console.log(JSON.stringify(enumerableObj))
// '{"name":"前端胖头鱼"}'

特性九

当尝试去转换 BigInt 类型的值会抛出错误

const alsoHuge = BigInt(9007199254740991)

console.log(JSON.stringify(alsoHuge))
// TypeError: Do not know how to serialize a BigInt

手写一个JSON.stringify

终于重新学完JSON.stringify的众多特性啦！咱们根据这些特性来手写一个简单版本的吧（无replacer函数和space）

源码实现

const jsonstringify = (data) => {
  // 确认一个对象是否存在循环引用
  const isCyclic = (obj) => {
  // 使用Set数据类型来存储已经检测过的对象
  let stackSet = new Set()
  let detected = false

  const detect = (obj) => {
    // 不是对象类型的话，可以直接跳过
    if (obj && typeof obj != 'object') {
      return
    }
    // 当要检查的对象已经存在于stackSet中时，表示存在循环引用
    if (stackSet.has(obj)) {
      return detected = true
    }
    // 将当前obj存如stackSet
    stackSet.add(obj)

    for (let key in obj) {
      // 对obj下的属性进行挨个检测
      if (obj.hasOwnProperty(key)) {
        detect(obj[key])
      }
    }
    // 平级检测完成之后，将当前对象删除，防止误判
    /*
      例如：对象的属性指向同一引用，如果不删除的话，会被认为是循环引用
      let tempObj = {
        name: '前端胖头鱼'
      }
      let obj4 = {
        obj1: tempObj,
        obj2: tempObj
      }
    */
    stackSet.delete(obj)
  }

  detect(obj)

  return detected
}

  // 特性七:
  // 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
  if (isCyclic(data)) {
    throw new TypeError('Converting circular structure to JSON')
  }

  // 特性九:
  // 当尝试去转换 BigInt 类型的值会抛出错误
  if (typeof data === 'bigint') {
    throw new TypeError('Do not know how to serialize a BigInt')
  }

  const type = typeof data
  const commonKeys1 = ['undefined', 'function', 'symbol']
  const getType = (s) => {
    return Object.prototype.toString.call(s).replace(/\[object (.*?)\]/, '$1').toLowerCase()
  }

  // 非对象
  if (type !== 'object' || data === null) {
    let result = data
    // 特性四：
    // NaN 和 Infinity 格式的数值及 null 都会被当做 null。
    if ([NaN, Infinity, null].includes(data)) {
      result = 'null'
      // 特性一：
      // `undefined`、`任意的函数`以及`symbol值`被`单独转换`时，会返回 undefined
    } else if (commonKeys1.includes(type)) {
      // 直接得到undefined，并不是一个字符串'undefined'
      return undefined
    } else if (type === 'string') {
      result = '"' + data + '"'
    }

    return String(result)
  } else if (type === 'object') {
    // 特性五:
    // 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化
    // 特性六:
    // Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。
    if (typeof data.toJSON === 'function') {
      return jsonstringify(data.toJSON())
    } else if (Array.isArray(data)) {
      let result = data.map((it) => {
        // 特性一:
        // `undefined`、`任意的函数`以及`symbol值`出现在`数组`中时会被转换成 `null`
        return commonKeys1.includes(typeof it) ? 'null' : jsonstringify(it)
      })

      return `[${result}]`.replace(/'/g, '"')
    } else {
      // 特性二：
      // 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
      if (['boolean', 'number'].includes(getType(data))) {
        return String(data)
      } else if (getType(data) === 'string') {
        return '"' + data + '"'
      } else {
        let result = []
        // 特性八
        // 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性
        Object.keys(data).forEach((key) => {
          // 特性三:
          // 所有以symbol为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
          if (typeof key !== 'symbol') {
            const value = data[key]
            // 特性一
            // `undefined`、`任意的函数`以及`symbol值`，出现在`非数组对象`的属性值中时在序列化过程中会被忽略
            if (!commonKeys1.includes(typeof value)) {
              result.push(`"${key}":${jsonstringify(value)}`)
            }
          }
        })

        return `{${result}}`.replace(/'/, '"')
      }
    }
  }
}

测试一把

// 1. 测试一下基本输出
console.log(jsonstringify(undefined)) // undefined 
console.log(jsonstringify(() => { })) // undefined
console.log(jsonstringify(Symbol('前端胖头鱼'))) // undefined
console.log(jsonstringify((NaN))) // null
console.log(jsonstringify((Infinity))) // null
console.log(jsonstringify((null))) // null
console.log(jsonstringify({
  name: '前端胖头鱼',
  toJSON() {
    return {
      name: '前端胖头鱼2',
      sex: 'boy'
    }
  }
}))
// {"name":"前端胖头鱼2","sex":"boy"}

// 2. 和原生的JSON.stringify转换进行比较
console.log(jsonstringify(null) === JSON.stringify(null));
// true
console.log(jsonstringify(undefined) === JSON.stringify(undefined));
// true
console.log(jsonstringify(false) === JSON.stringify(false));
// true
console.log(jsonstringify(NaN) === JSON.stringify(NaN));
// true
console.log(jsonstringify(Infinity) === JSON.stringify(Infinity));
// true
let str = "前端胖头鱼";
console.log(jsonstringify(str) === JSON.stringify(str));
// true
let reg = new RegExp("\w");
console.log(jsonstringify(reg) === JSON.stringify(reg));
// true
let date = new Date();
console.log(jsonstringify(date) === JSON.stringify(date));
// true
let sym = Symbol('前端胖头鱼');
console.log(jsonstringify(sym) === JSON.stringify(sym));
// true
let array = [1, 2, 3];
console.log(jsonstringify(array) === JSON.stringify(array));
// true
let obj = {
  name: '前端胖头鱼',
  age: 18,
  attr: ['coding', 123],
  date: new Date(),
  uni: Symbol(2),
  sayHi: function () {
    console.log("hello world")
  },
  info: {
    age: 16,
    intro: {
      money: undefined,
      job: null
    }
  },
  pakingObj: {
    boolean: new Boolean(false),
    string: new String('前端胖头鱼'),
    number: new Number(1),
  }
}
console.log(jsonstringify(obj) === JSON.stringify(obj)) 
// true
console.log((jsonstringify(obj)))
// {"name":"前端胖头鱼","age":18,"attr":["coding",123],"date":"2021-10-06T14:59:58.306Z","info":{"age":16,"intro":{"job":null}},"pakingObj":{"boolean":false,"string":"前端胖头鱼","number":1}}
console.log(JSON.stringify(obj))
// {"name":"前端胖头鱼","age":18,"attr":["coding",123],"date":"2021-10-06T14:59:58.306Z","info":{"age":16,"intro":{"job":null}},"pakingObj":{"boolean":false,"string":"前端胖头鱼","number":1}}

// 3. 测试可遍历对象
let enumerableObj = {}

Object.defineProperties(enumerableObj, {
  name: {
    value: '前端胖头鱼',
    enumerable: true
  },
  sex: {
    value: 'boy',
    enumerable: false
  },
})

console.log(jsonstringify(enumerableObj))
// {"name":"前端胖头鱼"}

// 4. 测试循环引用和Bigint

let obj1 = { a: 'aa' }
let obj2 = { name: '前端胖头鱼', a: obj1, b: obj1 }
obj2.obj = obj2

console.log(jsonstringify(obj2))
// TypeError: Converting circular structure to JSON
console.log(jsonStringify(BigInt(1)))
// TypeError: Do not know how to serialize a BigInt

通过上面测试可以看出，jsonstringify基本和JSON.stringify表现一致，（也有可能测试用例不够全面，欢迎提出一起学习）

结尾

因为一个BUG，重学了JSON.stringify,了解到原来它还有这么多平时没有注意到特性，前端娱乐圈水太深了，愿大家都被温柔以待，少些bug，多些关怀。晚安

浅析我们为什么要上Vue3？前端Vue.js

banyungong — Mon, 17 Jan 2022 10:15:00 GMT

theme: vue-pro highlight: a11y-dark

专栏地址：Vue 源码解析与实践

本文：我是970
原文链接：https://juejin.cn/post/7040769191393099783

✨ 开篇

RT，我们为什么要上 Vue3？使用 Vue3 影响我开法拉利吗？

最近在 Vue3 发布了3.2 大版本之后，掘金上关于 Vue3 的文章越来越多，本来想着让子弹再飞一会，但最近公司上了 Vue3 的项目，自己也跟着学了起来。

昨天还是 Vue2 的 Options API 的忠实信徒，结果今天搞了 Vue3 的 Composition API 之后，直呼 Vue3 真香！

接下来，我们从分析 Vue2 优缺点入手，以及结合图片和用例来了解 Vue3 的优势。

Vue2 ⚔ Vue3

Vue2

优点

不可否认 Vue2 在取得的成功，在 Github 的 Front-End 分类的排行榜上也能看到 Vue 仓库的排名是第一，粉丝足够多，活跃用户足够多

比 React 足足多了 12k+ star

从我的角度来看，最大的功臣莫过于这三个：

响应式数据
Options API
SFC

除去这三位大将，不可或缺 Vuex/Vue-Router 这两位功臣，以及丰富的周边插件和活跃的社区。

缺点

在一个组件仅承担单一逻辑的时候，使用 Options API 来书写组件是很清晰的。

但是在我们实际的业务场景中，一个父组件总是要包含多个子组件，父组件需要给子组件传值、处理子组件事件、直接操作子组件以及处理各种各样的调接口的逻辑，这时候我们的父组件的逻辑就会变得复杂。

我们从代码维护者的角度出发，假设这个时候有 10 个函数方法，自然我们要把他们放入到methods中，而这个 10 个函数方法又分别操作 10 个数据，这个 10 个数据又分别需要进行Watch操作。

这时候，我们根据Vue2的Options API的写法，就写完了 10 个method、10 个data、10 个watch，我们就将本来 10 个的函数方法，分割在 30 个不同的地方。

这时候父组件的代码，对代码维护者来说是很不友好的。

可能有人说，这么写可以增加代码量，老板夸我牛逼！哈哈哈哈

Vue3

优点

自由，自由，还是 TM 的自由！

更强的性能，更好的 tree shaking
Composition API + setup
更好地支持 TypeScript

可能的缺点

Vue3: 让你自由过了火

使用Composition API在setup这个舞台上尽情的表演之后，可能存在一个问题：那就是如何优雅地组织代码？

代码不能优雅的组织，在代码量上去之后，也一样很难维护。

SFC 写法变化

Vue2 一个普通的 Vue 文件

<template>
  <div>
    <p>{{ person.name }}</p>
    <p>{{ car.name }}</p>
  </div>
</template>

<script>
export default {
  name: "Person",

  data() {
    return {
      person: {
        name: "小明",
        sex: "male",
      },
      car: {
        name: "宝马",
        price: "40w",
      }
    };
  },

  watch:{
      'person.name': (value) => {
          console.log(`名字被修改了, 修改为 ${value}`)
      },
      'person.sex': (value) => {
          console.log(`性别被修改了, 修改为 ${value}`)
      }
  },

  methods: {
    changePersonName() {
      this.person.name = "小浪";
    },

    changeCarPrice() {
      this.car.price = "80w";
    }
  },
};
</script>

采用 Vue3 Composition API 进行重写

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";

// person的逻辑
const person = reactive<{ name: string; sex: string }>({
  name: "小明",
  sex: "male",
});
watch(
  () => [person.name, person.sex],
  ([nameVal, sexVal]) => {
    console.log(`名字被修改了, 修改为 ${nameVal}`);
    console.log(`名字被修改了, 修改为 ${sexVal}`);
  }
);
function changePersonName() {
  person.name = "小浪";
}

// car的逻辑
const car = reactive<{ name: string; price: string }>({
  name: "宝马",
  price: "40w",
});
function changeCarPrice() {
  car.price = "80w";
}
</script>

采用 Vue3 自定义 Hook 的方式，进一步拆分

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
  <p>{{ animal.name }}</p>
</template>

<script lang="ts" setup>
import { usePerson, useCar, useAnimal } from "./hooks";

const { person, changePersonName } = usePerson();

const { car } = useCar();
</script>

// usePerson.ts
import { reactive, watch } from "vue";

export default function usePerson() {
  const person = reactive<{ name: string; sex: string }>({
    name: "小明",
    sex: "male",
  });
  watch(
    () => [person.name, person.sex],
    ([nameVal, sexVal]) => {
      console.log(`名字被修改了, 修改为 ${nameVal}`);
      console.log(`名字被修改了, 修改为 ${sexVal}`);
    }
  );
  function changePersonName() {
    person.name = "小浪";
  }
  return {
    person,
    changePersonName,
  };
}

// useCar.ts
import { reactive } from "vue";

export default function useCar() {
  const car = reactive<{ name: string; price: string }>({
    name: "宝马",
    price: "40w",
  });
  function changeCarPrice() {
    car.price = "80w";
  }
  return {
    car,
    changeCarPrice,
  };
}

对比完之后，我们会发现，Vue3 可以让我们更好组织代码。person和car的逻辑都被单独放置在一块

仅仅是代码组织的优势吗？不不不，我们再看看模板中的一些变化

<template>标签中起始便签可以不用<div>标签，因为Vue3提供了片段的能力，使用Vue-detools中查看，可以看到有fragment的标记
Watch也不需要罗列多个了，Vue3中支持侦听多个源
很自然的使用TypeScript，类型约束更加简单

性能方面

Vue3 主要在这几个方面进行了提升

编译阶段。对 diff 算法优化、静态提升等等
响应式系统。Proxy()替代Object.defineProperty()监听对象。监听一个对象，不需要再深度遍历，Proxy()就可以劫持整个对象
体积包减少。Compostion API 的写法，可以更好的进行 tree shaking，减少上下文没有引入的代码，减少打包后的文件体积
新增片段特性。Vue 文件的<template>标签内，不再需要强制声明一个的<div>标签，节省额外的节点开销

总结

Vue3 的优点和新特性还有很多很多，本篇文章主要从Vue2/3版本的优缺点和SFC写法变化这两个角度介入，给大家介绍我们为什么要上 Vue3。

Vue3 很香，更好地支持 TypeScript，让 Vue3 成为了企业级 Vue 项目的首选，各种新特性也迎合前端技术的发展趋势。

ie 浏览器：那我走？

最后

翻译翻译什么是 Vue3 ？

如果这篇文章对你有帮助，那麻烦你动动小手点个赞，你的每一个点赞都是我继续创作的莫大鼓励！

参考资料

面试官：Vue3.0 性能提升主要是通过哪几方面体现的？

Vue3 教程：Vue 3.x 快在哪里？

其他

掘金年度人气创作者打榜最后一天啦，欢迎大家为我们团队投票~ IDuxFE@深信服前端开发团队感谢大家的支持~

在 Vue 中为什么不推荐用 index 做 key前端JavaScript__Vue.js

banyungong — Mon, 17 Jan 2022 09:15:01 GMT

这是第 120 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注我们吧~ 本文首发于政采云前端博客：在 Vue 中为什么不推荐用 index 做 key

前言

前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。

key 的作用

Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极其重要的作用。

key 在 diff 算法中的角色

其实在 React，Vue，中 diff 算法大致是差不多，但是 diff 比对方式还是有较大差异的，甚至每个版本 diff 都大有不同。下面我们就以 Vue3.0 diff 算法为切入点，剖析 key 在 diff 算法中的作用

具体 diff 流程如下

Vue3.0中在 patchChildren 方法中有这么一段源码

if (patchFlag > 0) {
      if (patchFlag & PatchFlags.KEYED_FRAGMENT) { 
         /* 对于存在 key 的情况用于 diff 算法 */
        patchKeyedChildren(
         ...
        )
        return
      } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
         /* 对于不存在 key 的情况,直接 patch  */
        patchUnkeyedChildren( 
          ...
        )
        return
      }
    }

patchChildren 根据是否存在 key 进行真正的 diff 或者直接 patch。对于 key 不存在的情况我们就不做深入研究了。

我们先来看看一些声明的变量。

/*  c1 老的 vnode c2 新的vnode  */
let i = 0              /* 记录索引 */
const l2 = c2.length   /* 新 vnode的数量 */
let e1 = c1.length - 1 /* 老 vnode 最后一个节点的索引 */
let e2 = l2 - 1        /* 新节点最后一个节点的索引 */

同步头部节点

第一步的事情就是从头开始寻找相同的 vnode，然后进行 patch ,如果发现不是相同的节点，那么立即跳出循环。

//(a b) c
//(a b) d e
/* 从头对比找到有相同的节点 patch ，发现不同，立即跳出*/
    while (i <= e1 && i <= e2) {
      const n1 = c1[i]
      const n2 = (c2[i] = optimized
        ? cloneIfMounted(c2[i] as VNode)
        : normalizeVNode(c2[i]))
        /* 判断 key ，type 是否相等 */
      if (isSameVNodeType(n1, n2)) {
        patch(
          ...
        )
      } else {
        break
      }
      i++
    }

流程如下：

isSameVNodeType 作用就是判断当前 vnode 类型和 vnode 的 key 是否相等

export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

其实看到这，是不是已经知道 key 在 diff 算法的作用，就是用来判断是否是同一个节点。

同步尾部节点

第二步从尾开始同前 diff

//a (b c)
//d e (b c)
/* 如果第一步没有 patch 完，立即，从后往前开始 patch  如果发现不同立即跳出循环 */
    while (i <= e1 && i <= e2) {
      const n1 = c1[e1]
      const n2 = (c2[e2] = optimized
        ? cloneIfMounted(c2[e2] as VNode)
        : normalizeVNode(c2[e2]))
      if (isSameVNodeType(n1, n2)) {
        patch(
         ...
        )
      } else {
        break
      }
      e1--
      e2--
    }

经历第一步操作之后，如果发现没有 patch 完，那么立即进行第二步，从尾部开始遍历依次向前 diff。如果发现不是相同的节点，那么立即跳出循环。流程如下：

添加新的节点

第三步如果老节点是否全部 patch，新节点没有被 patch 完,创建新的 vnode

//(a b)
//(a b) c
//i = 2, e1 = 1, e2 = 2
//(a b)
//c (a b)
//i = 0, e1 = -1, e2 = 0
/* 如果新的节点大于老的节点数 ，对于剩下的节点全部以新的 vnode 处理（这种情况说明已经 patch 完相同的 vnode ） */
    if (i > e1) {
      if (i <= e2) {
        const nextPos = e2 + 1
        const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor
        while (i <= e2) {
          patch( /* 创建新的节点*/
            ...
          )
          i++
        }
      }
    }

流程如下：

删除多余节点

第四步如果新节点全部被 patch，老节点有剩余，那么卸载所有老节点

//i > e2
//(a b) c
//(a b)
//i = 2, e1 = 2, e2 = 1
//a (b c)
//(b c)
//i = 0, e1 = 0, e2 = -1
else if (i > e2) {
   while (i <= e1) {
      unmount(c1[i], parentComponent, parentSuspense, true)
      i++
   }
}

流程如下：

最长递增子序列

到了这一步，比较核心的场景还没有出现，如果运气好，可能到这里就结束了，那我们也不能全靠运气。剩下的一个场景是新老节点都还有多个子节点存在的情况。那接下来看看，Vue3 是怎么做的。为了结合 move、新增和卸载的操作

每次在对元素进行移动的时候，我们可以发现一个规律，如果想要移动的次数最少，就意味着需要有一部分元素是稳定不动的，那么究竟能够保持稳定不动的元素有一些什么规律呢？

可以看一下上面这个例子：c h d e VS d e i c，在比对的时候，凭着肉眼可以看出只需要将 c 进行移动到最后，然后卸载 h，新增 i 就好了。d e 可以保持不动，可以发现 d e 在新老节点中的顺序都是不变的，d 在 e 的后面，下标处于递增状态。

这里引入一个概念，叫最长递增子序列。
官方解释：在一个给定的数组中，找到一组递增的数值，并且长度尽可能的大。
有点比较难理解，那来看具体例子：

const arr = [10, 9, 2, 5, 3, 7, 101, 18]
=> [2, 3, 7, 18]
这一列数组就是arr的最长递增子序列，其实[2, 3, 7, 101]也是。
所以最长递增子序列符合三个要求：
1、子序列内的数值是递增的
2、子序列内数值的下标在原数组中是递增的
3、这个子序列是能够找到的最长的
但是我们一般会找到数值较小的那一组数列，因为他们可以增长的空间会更多。

那接下来的思路是：如果能找到老节点在新节点序列中顺序不变的节点们，就知道，哪一些节点不需要移动，然后只需要把不在这里的节点插入进来就可以了。**因为最后要呈现出来的顺序是新节点的顺序，移动是只要老节点移动，所以只要老节点保持最长顺序不变，通过移动个别节点，就能够跟它保持一致。**所以在此之前，先把所有节点都找到，再找对应的序列。最后其实要得到的则是这一个数组：[2, 3, 新增 , 0]。其实这就是 diff 移动的思路了

为什么不要用index

性能消耗

使用 index 做 key，破坏顺序操作的时候，因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建。

例子：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}</li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们先把 Chorme 调试器打开，我们双击把里面文本修改一下

我们运行以上上面的代码，看下运行结果

从上面运行结果可以看出来，我们只是添加了一条数据，但是三条数据都需要重新渲染是不是很惊奇，我明明只是插入了一条数据，怎么三条数据都要重新渲染？而我想要的只是新增的那一条数据新渲染出来就行了。

上面我们也讲过 diif 比较方式,下面根据 diff 比较绘制一张图，看看具体是怎么比较的吧

当我们在前面加了一条数据时 index 顺序就会被打断，导致新节点 key 全部都改变了，所以导致我们页面上的数据都被重新渲染了。

下面我们下面生成1000个 DOM 来比较一下采用 index ，和不采用 index 性能比较，为了保证 key 的唯一性我们采用 uuid 作为 key

我们用 index 做为 key 现执行一遍

<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="index">{{item.id}}</li>
    </ul>
  </div>
</template>

<script>
import uuidv1 from 'uuid/v1'
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [{id:uuidv1()}],
    };
  },
  created(){
    for (let i = 0; i < 1000; i++) {
      this.studentList.push({
        id: uuidv1(),
      });
    }
  },
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 75.259033203125 ms
  },
  methods:{
    addStudent(){
      const studentObj = { id: uuidv1() };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

换成 id 作为 key

<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="item.id">{{item.id}}</li>
    </ul>
  </div>
</template>
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 42.200927734375 ms
  },

从上面比较可以看出，用唯一值作为 key 可以节约开销

数据错位

上述例子可能觉得用 index 做 key 只是影响页面加载的效率，认为少量的数据影响不大，那面下面这种情况，可能用 index 就可能出现一些意想不到的问题了，还是上面的场景，这时我先再每个文本内容后面加一个 input 输入框，并且手动在输入框内填写一些内容，然后通过 button 向前追加一位同学看看

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}<input /></li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们往 input 里面输入一些值，添加一位同学看下效果：

这时候我们就会发现，在添加之前输入的数据错位了。添加之后王五的输入框残留着张三的信息，这很显然不是我们想要的结果。

从上面比对可以看出来这时因为采用 index 作为 key 时，当在比较时，发现虽然文本值变了，但是当继续向下比较时发现 <input /> DOM 节点还是和原来一摸一样，就复用了，但是没想到 input 输入框残留输入的值，这时候就会出现输入的值出现错位的情况

解决方案

既然知道用 index 在某些情况下带来很不好的影响，那平时我们在开发当中怎么去解决这种情况呢？其实只要保证 key 唯一不变就行，一般在开发中用的比较多就是下面三种情况。

在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
可以采用 Symbol 作为 key，Symbol 是 ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

let a=Symbol('测试')
let b=Symbol('测试')
console.log(a===b)//false

可以采用 uuid 作为 key ，uuid 是 Universally Unique Identifier 的缩写，它是在一定的范围内（从特定的名字空间到全球）唯一的机器生成的标识符

我们采用上面第一种方案作为 key 在看一下上面情况，如图所示。key 相同的节点都做到了复用。起到了diff 算法的真正作用。

总结

用 index 作为 key 时，在对数据进行，逆序添加，逆序删除等破坏顺序的操作时，会产生没必要的真实 DOM更新，从而导致效率低
用 index 作为 key 时，如果结构中包含输入类的 DOM，会产生错误的 DOM 更新
在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
如果不存在对数据逆序添加，逆序删除等破坏顺序的操作时，仅用于渲染展示用时，使用 index 作为 key 也是可以的（但是还是不建议使用，养成良好开发习惯）。

参考链接

vue3.0 diff算法详解(超详细)

Vue 3 Virtual Dom Diff源码阅读

开源作品

政采云前端小报

开源地址 www.zoo.team/openweekly/ (小报官网首页有微信交流群)

skuDemo

开源地址 https://github.com/zcy-inc/skuPathFinder-back/

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变既定的节奏，将会是“5 年工作时间 3 年工作经验”；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com

你会用ES6，那倒是用啊！前端Vue.js__React.js

banyungong — Mon, 17 Jan 2022 08:15:01 GMT

theme: fancy highlight: arta

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

不是标题党，这是一位leader在一次代码评审会对小组成员发出的“怒吼”，原因是在代码评审中发现很多地方还是采用ES5的写法，也不是说用ES5写法不行，会有BUG，只是造成代码量增多，可读性变差而已。

恰好，这位leader有代码洁癖，面对3~5年经验的成员，还写这种水平的代码，极为不满，不断对代码进行吐槽。不过对于他的吐槽，我感觉还是有很大收获的，故就把leader的吐槽记录下来，分享给掘友们，觉得有收获点个赞，有错误的或者更好的写法，非常欢迎在评论中留言。

ps：ES5之后的JS语法统称ES6！！！

一、关于取值的吐槽

取值在程序中非常常见，比如从对象obj中取值。

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

吐槽：

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

或者

const f = obj.a + obj.d;
const g = obj.c + obj.e;

吐槽：“不会用ES6的解构赋值来取值吗？5行代码用1行代码搞定不香吗？直接用对象名加属性名去取值，要是对象名短还好，很长呢？搞得代码中到处都是这个对象名。”

改进：

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

反驳

不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。

吐槽

看来你对ES6的解构赋值掌握的还是不够彻底。如果想创建的变量名和对象的属性名不一致，可以这么写：

const {a:a1} = obj;
console.log(a1);// 1

补充

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

二、关于合并数据的吐槽

比如合并两个数组，合并两个对象。

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

吐槽

ES6的扩展运算符是不是忘记了，还有数组的合并不考虑去重吗？

改进

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

三、关于拼接字符串的吐槽

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

吐槽

像你们这样用ES6字符串模板，还不如不用，你们根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

改进

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

四、关于if中判断条件的吐槽

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

吐槽

ES6中数组实例方法includes会不会使用呢？

改进

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

五、关于列表搜索的吐槽

在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

吐槽

如果是精确搜索不会用ES6中的find吗？性能优化懂么，find方法中找到符合条件的项，就不会继续遍历数组。

改进

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

六、关于扁平化数组的吐槽

一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

吐槽

获取对象的全部属性值还要遍历吗？Object.values忘记了吗？还有涉及到数组的扁平化处理，为啥不用ES6提供的flat方法呢，还好这次的数组的深度最多只到2维，还要是遇到4维、5维深度的数组，是不是得循环嵌套循环来扁平化？

改进

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。

补充

flat方法不支持IE浏览器。

七、关于获取对象属性值的吐槽

const name = obj && obj.name;

吐槽

ES6中的可选链操作符会使用么？

改进

const name = obj?.name;

八、关于添加对象属性的吐槽

当给对象添加属性时，如果属性名是动态变化的，该怎么处理。

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';

吐槽

为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？

改进

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

九、关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

if(value !== null && value !== undefined && value !== ''){
    //...
}

吐槽

ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？

if((value??'') !== ''){
  //...
}

十、关于异步函数的吐槽

异步函数很常见，经常是用 Promise 来实现。

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

吐槽

如果这样调用异步函数，不怕形成地狱回调啊！

改进

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

补充

但是要做并发请求时，还是要用到Promise.all()。

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

十一、后续

欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。

此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。

如果你还有其它想吐槽的，也非常欢迎在评论中留下你的吐槽。

读完有帮助，不妨关注一下，点个赞支持一下。

「自我检验」熬夜总结50个Vue知识点，全都会你就是神！！！前端面试__Vue.js

banyungong — Mon, 17 Jan 2022 07:25:08 GMT

theme: smartblue

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言

大家好，我是林三心，这几天发生了很多事（具体是啥我就不说了），这些事，吓得我把我这些年珍藏的Vue知识点都拿出来整理了一遍，巴不得能多总结出一道是一道，我拿出了我的笔记，并且使劲回忆，终于悟出了这50道知识点（咱不要太俗哈，不叫面试题，咱叫知识点）

荣耀黄金

1. Vue的优点？Vue的缺点？

优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开

缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长

2. 为什么说Vue是一个渐进式框架？

渐进式：通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以

3. Vue跟React的异同点？

相同点：

1.都使用了虚拟dom
2.组件化开发
3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据)
4.都支持服务端渲染不同点：
1.React的JSX，Vue的template
2.数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty)
3.React单向绑定，Vue双向绑定
4.React的Redux，Vue的Vuex

4. MVVM是什么？和MVC有何区别呢？

MVC

Model(模型)：负责从数据库中取数据
View(视图)：负责展示数据的地方
Controller(控制器)：用户交互的地方，例如点击事件等等
思想：Controller将Model的数据展示在View上

MVVM

VM：也就是View-Model，做了两件事达到了数据的双向绑定一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
思想：实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

区别

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性

Vue是不是MVVM框架？

Vue是MVVM框架，但是不是严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue的ref可以做到这点

5. Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？

1.jQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可
2.在操作DOM频繁的场景里，jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能
3.Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上
4.Vue集成的一些库，大大提高开发效率，比如Vuex，Router等

6. Vue的作者是谁？大声说出它的名字！！！

他的名字就是：鱿鱼西

永恒钻石

7. 为什么data是个函数并且返回一个对象呢？

data之所以是一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。

8. 使用过哪些Vue的修饰符呢？

可以看我这篇文章「百毒不侵」面试官最喜欢问的13种Vue修饰符

9. 使用过哪些Vue的内部指令呢？

10. 组件之间的传值方式有哪些？

父组件传值给子组件，子组件使用props进行接收
子组件传值给父组件，子组件使用$emit+事件对父组件进行传值
组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据
使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C
使用$refs获取组件实例，进而获取数据
使用Vuex进行状态管理
使用eventBus进行跨组件触发事件，进而传递数据
使用provide和inject，官方建议我们不要用这个，我在看ElementUI源码时发现大量使用
使用浏览器本地缓存，例如localStorage

11. 路由有哪些模式呢？又有什么不同呢？

hash模式：通过#号后面的内容的更改，触发hashchange事件，实现路由切换
history模式：通过pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合

12. 如何设置动态class，动态style？

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

13. v-if和v-show有何区别？

1.v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁
2.v-show是通过控制dom元素的css样式来实现显隐，不会销毁
3.频繁或者大数量显隐使用v-show，否则使用v-if

14. computed和watch有何区别？

1.computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作
2.watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
3.简单记就是：一般情况下computed是多对一，watch是一对多

15. Vue的生命周期，讲一讲？

16. 为什么v-if和v-for不建议用在同一标签？

在Vue2中，v-for优先级是高于v-if的，咱们来看例子

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>

上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
  }

17. vuex的有哪些属性？用处是什么？

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

至尊星耀

18. 不需要响应式的数据应该怎么处理？

在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。

// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
    
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

19. watch有哪些属性，分别有什么用？

当我们监听一个基本数据类型时：

watch: {
    value () {
        // do something
    }
}

当我们监听一个引用数据类型时：

watch: {
    obj: {
       handler () { // 执行回调
           // do something
       },
       deep: true, // 是否进行深度监听
       immediate: true // 是否初始执行handler函数
    }
}

20. 父子组件生命周期顺序

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

21. 对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

原因：Object.defineProperty没有对对象的新属性进行属性劫持
对象新属性无法更新视图：使用Vue.$set(obj, key, value)，组件中this.$set(obj, key, value)
删除属性无法更新视图：使用Vue.$delete(obj, key)，组件中this.$delete(obj, key)

22. 直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？

原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接arr[index] = xxx是无法更新视图的
使用数组的splice方法，arr.splice(index, 1, item)
使用Vue.$set(arr, index, value)

23. 自定义指令

建议看这篇文章8个非常实用的Vue自定义指令

24. 插槽的使用以及原理？

建议看我这篇文章「Vue源码学习」你真的知道插槽Slot是怎么“插”的吗

25. 为什么不建议用index做key，为什么不建议用随机数做key？

举个例子：

<div v-for="(item, index) in list" :key="index">{{item.name}}</div>

list: [
    { name: '小明', id: '123' },
    { name: '小红', id: '124' },
    { name: '小花', id: '125' }
]

渲染为
<div key="0">小明</div>
<div key="1">小红</div>
<div key="2">小花</div>

现在我执行 list.unshift({ name: '小林', id: '122' })

渲染为
<div key="0">小林</div>
<div key="1">小明</div>
<div key="2">小红</div>
<div key="3">小花</div>


新旧对比

<div key="0">小明</div>  <div key="0">小林</div>
<div key="1">小红</div>  <div key="1">小明</div>
<div key="2">小花</div>  <div key="2">小红</div>
                         <div key="3">小花</div>

可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，虽然达到了渲染目的，但是损耗性能

现在我们使用id来做key，渲染为

<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>

现在我执行 list.unshift({ name: '小林', id: '122' })，渲染为

<div key="122">小林</div>
<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>

新旧对比

                           <div key="122">小林</div>
<div key="123">小明</div>  <div key="123">小明</div>
<div key="124">小红</div>  <div key="124">小红</div>
<div key="125">小花</div>  <div key="125">小花</div>

可以看出，原有的三项都不变，只是新增了小林这个人，这才是最理想的结果

用index和用随机数都是同理，随机数每次都在变，做不到专一性，很渣男，也很消耗性能，所以，拒绝渣男，选择老实人

26. 说说nextTick的用处？

我举个例子，在vue中：

this.name = '林三心'
this.age = 18
this.gender = '男'

我们修改了三个变量，那问题来了，是每修改一次，DOM就更新一次吗？不是的，Vue采用的是异步更新的策略，通俗点说就是，同一事件循环内多次修改，会统一进行一次视图更新，这样才能节省性能嘛

看懂了上面，那你应该也看得懂下面的例子了吧：

<div ref="testDiv">{{name}}</div>

name: '小林'

this.name = '林三心'
console.log(this.$refs.testDiv.innerHTML) // 这里是啥呢

答案是“小林”，前面说了，Vue是异步更新，所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？

this.name = '林三心'
this.$nextTick(() => {
    console.log(this.$refs.testDiv.innerHTML) // 林三心
})

27. Vue的SSR是什么？有什么好处？

SSR就是服务端渲染
基于nodejs serve服务环境开发，所有html代码在服务端渲染
数据返回给前端，然后前端进行“激活”，即可成为浏览器识别的html代码
SSR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好

最强王者

28. Vue响应式是怎么实现的？

整体思路是数据劫持+观察者模式

对象内部通过defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的dep属性，存放他所依赖的watcher（依赖收集），当属性变化后会通知自己对应的watcher 去更新(派发更新)。

想详细了解过程，建议阅读我的Vue源码解析系列

const { arrayMethods } = require('./array')

class Observer {
    constructor(value) {
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        })
        if(Array.isArray(value)) {
            value.__proto__ = arrayMethods
            this.observeArray(value)
        } else {
            this.walk(value)
        }
    }

    walk(data) {
        let keys = Object.keys(data)
        for(let i = 0; i < keys.length; i++) {
            const key = keys[i]
            const value = data[key]
            defineReactive(data, key, value)
        }
    }

    observeArray(items) {
        for(let i = 0; i < items.length; i++) {
            observe(items[i])
        }
    }
}

function defineReactive(data, key, value) {
    const childOb = observe(value)

    const dep = new Dep()

    Object.defineProperty(data, key, {
        get() {
            console.log('获取值')
            if (Dep.target) {
                dep.depend()

                if (childOb) {
                    childOb.dep.depend()

                    if (Array.isArray(value)) {
                        dependArray(value)
                    }
                }
            }
            return value
        },
        set(newVal) {
            if (newVal === value) return
            observe(newVal)
            value = newVal
            dep.notify()
        }
    })
}

function observe(value) {
    if (Object.prototype.toString.call(value) === '[object Object]' || Array.isArray(value)) {
        return new Observer(value)
    }
}

function dependArray(value) {
    for(let e, i = 0, l = value.length; i < l; i++) {
        e = value[i]

        e && e.__ob__ && e.__ob__.dep.depend()

        if (Array.isArray(e)) {
            dependArray(e)
        }
    }
}

// array.js
const arrayProto = Array.prototype

const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'reverse',
    'sort'
]

methodsToPatch.forEach(method => {
    arrayMethods[method] = function (...args) {
        const result = arrayProto[method].apply(this, args)

        const ob = this.__ob__

        var inserted

        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args
                break;
            case 'splice':
                inserted = args.slice(2)
            default:
                break;
        }

        if (inserted) ob.observeArray(inserted)

        ob.dep.notify()

        return result
    }
})

29. 为什么只对对象劫持，而要对数组进行方法重写？

因为对象最多也就几十个属性，拦截起来数量不多，但是数组可能会有几百几千项，拦截起来非常耗性能，所以直接重写数组原型上的方法，是比较节省性能的方案

30. Vue的模板编译原理？

因为这个问题讲起来可能比较长，所以：

建议看我这篇「Vue源码学习(二)」你不知道的-模板编译原理

31. Vue的computed和watch的原理？

因为这个问题讲起来可能比较长，所以：

建议看我这篇「Vue源码学习(四)」立志写一篇人人都看的懂的computed，watch原理

32. Vue.set方法的原理？

function set(target, key, val) {
    // 判断是否是数组
    if (Array.isArray(target)) {
        // 判断谁大谁小
        target.length = Math.max(target.length, key)
        // 执行splice
        target.splice(key, 1, val)
        return val
    }

    const ob = target.__ob__

    // 如果此对象没有不是响应式对象，直接设置并返回
    if (key in target && !(key in target.prototype) || !ob) {
        target[key] = val
        return val
    }

    // 否则，新增属性，并响应式处理
    defineReactive(target, key, val)
    return val
}

33. Vue.delete方法的原理？

function del (target, key) {
    // 判断是否为数组
    if (Array.isArray(target)) {
        // 执行splice
        target.splice(key, 1)
        return
    }

    const ob = target.__ob__

    // 对象本身就没有这个属性，直接返回
    if (!(key in target)) return


    // 否则，删除这个属性
    delete target[key]

    // 判断是否是响应式对象，不是的话，直接返回
    if (!ob) return
    // 是的话，删除后要通知视图更新
    ob.dep.notify()
}

34. nextTick的原理？

let callbacks = []; //回调函数
let pending = false;
function flushCallbacks() {
  pending = false; //把标志还原为false
  // 依次执行回调
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
  }
}
let timerFunc; //先采用微任务并按照优先级优雅降级的方式实现异步刷新
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 主要是监听dom变化 也是一个异步方法
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true,
  });
  timerFunc = () => {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
} else if (typeof setImmediate !== "undefined") {
  // 如果前面都不支持 判断setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 最后降级采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

export function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}

35. key有什么用？说说diff算法吧？

直接看这篇吧：为什么 Vue 中不要用 index 作为 key？（diff 算法详解）

我讲的没他好

冷门的知识点

36. 如果子组件改变props里的数据会发生什么

改变的props数据是基本类型

如果修改的是基本类型，则会报错

props: {
    num: Number,
  }
created() {
    this.num = 999
  }

改变的props数据是引用类型

props: {
    item: {
      default: () => ({}),
    }
  }
created() {
    // 不报错，并且父级数据会跟着变
    this.item.name = 'sanxin';
    
    // 会报错，跟基础类型报错一样
    this.item = 'sss'
  },

37. props怎么自定义验证

props: {
    num: {
      default: 1,
      validator: function (value) {
          // 返回值为false则验证不通过，报错
          return [
            1, 2, 3, 4, 5
          ].indexOf(value) !== -1
    }
    }
  }

38. watch的immediate属性有什么用？

比如平时created时要请求一次数据，并且当搜索值改变，也要请求数据，我们会这么写：

created(){
  this.getList()
},
watch: {
  searchInputValue(){
    this.getList()
  }
}

使用immediate完全可以这么写，当它为true时，会初始执行一次

watch: {
  searchInputValue:{
    handler: 'getList',
    immediate: true
  }
}

39. watch监听一个对象时，如何排除某些属性的监听

下面代码是，params发生改变就重新请求数据，无论是a，b，c，d属性改变

data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

但是如果我只想要a，b改变时重新请求，c，d改变时不重新请求呢？

mounted() {
    Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
      .forEach((_) => {
        this.$watch((vm) => vm.params[_], handler, {
          deep: true,
        });
      });
  },
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

40. 审查元素时发现data-v-xxxxx，这是啥？

这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的’data-v-xxx’标记

41. computed如何实现传参？

// html
<div>{{ total(3) }}

// js
computed: {
    total() {
      return function(n) {
          return n * this.num
         }
    },
  }

42. vue的hook的使用

同一组件中使用

这是我们常用的使用定时器的方式

export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

上面做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：

export default{
  methods:{
    fn(){
      let timer = setInterval(()=>{
        //具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

7.2 父子组件使用

如果子组件需要在mounted时触发父组件的某一个函数，平时都会这么写：

//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

// 子组件
mounted () {
  this.$emit('childMounted')
},

使用hook的话可以更方便：

//父组件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

43. provide和inject是响应式的吗？

// 祖先组件
provide(){
    return {
   // keyName: { name: this.name }, // value 是对象才能实现响应式，也就是引用类型
      keyName: this.changeValue // 通过函数的方式也可以[注意，这里是把函数作为value，而不是this.changeValue()]
   // keyName: 'test' value 如果是基本类型，就无法实现响应式
    }
  },
data(){
  return {
	name:'张三'
}
  },
  methods: {
  	changeValue(){
  		this.name = '改变后的名字-李四'
  	}
  }  
  
  // 后代组件
  inject:['keyName']
  create(){
	console.log(this.keyName) // 改变后的名字-李四
}

44.Vue的el属性和$mount优先级？

比如下面这种情况，Vue会渲染到哪个节点上

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
}).$mount('#ggg')

这是官方的一张图，可以看出el和$mount同时存在时，el优先级 > $mount

45. 动态指令和参数使用过吗？

<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick",
      someProps: someCondition ? "num" : "price"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

46. 相同的路由组件如何重新渲染？

开发人员经常遇到的情况是，多个路由解析为同一个Vue组件。问题是，Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果依然想重新渲染，怎么办呢？可以使用key

<template>
    <router-view :key="$route.path"></router-view>
</template>

47. 自定义v-model

默认情况下，v-model 是 @input 事件侦听器和 :value 属性上的语法糖。但是，你可以在你的Vue组件中指定一个模型属性来定义使用什么事件和value属性——非常棒！

export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}

48. 如何将获取data中某一个数据的初始状态？

在开发中，有时候需要拿初始状态去计算。例如

data() {
    return {
      num: 10
  },
mounted() {
    this.num = 1000
  },
methods: {
    howMuch() {
        // 计算出num增加了多少，那就是1000 - 初始值
        // 可以通过this.$options.data().xxx来获取初始值
        console.log(1000 - this.$options.data().num)
    }
  }

49.为什么不建议v-for和v-if同时存在

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>

上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
  }

50.计算变量时，methods和computed哪个好？

<div>
    <div>{{howMuch1()}}</div>
    <div>{{howMuch2}}</div>
    <div>{{index}}</div>
</div>

data: () {
    return {
         index: 0
       }
     }
methods: {
    howMuch1() {
        return this.num + this.price
    }
  }
computed: {
    howMuch2() {
        return this.num + this.price
    }
  }

computed会好一些，因为computed会有缓存。例如index由0变成1，那么会触发视图更新，这时候methods会重新执行一次，而computed不会，因为computed依赖的两个变量num和price都没变。

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。

如果你想一起学习前端或者摸鱼，那你可以加我，加入我的摸鱼学习群，点击这里 —> 摸鱼沸点

如果你是有其他目的的，别加我，我不想跟你交朋友，我只想简简单单学习前端，不想搞一些有的没的！！！

『焦点访谈』最厉害靠谱的回血导师「手机搜狐网」

jkshdfj — Mon, 17 Jan 2022 07:23:09 GMT

最厉害靠谱的回血导师【+老师企@鹅-３６３９５８７】【-信誉誷-ｚｈ５７點ｖｉｐ丨邀-请-码66413333】☆问鼎中崋★九五至尊【顶-尖-名-师丨信.誉.平.台丨购采首`选丨一.对.一丨全.天.在.线.辅.导】财联社12月31日电，天眼查显示，12月30日，四川蜀能矿产有限责任公司成立，注册资本5亿人民币，法定代表人徐开贵。经营范围含矿产资源（非煤矿山）开采；矿产资源勘查；再生资源回收（除生产性废旧金属）；五金产品研发；贵金属冶炼等。股权穿透图显示，该公司由四川路桥建设集团股份有限公司、比亚迪股份有限公司等共同持股。=来源：凤凰资讯-网易新闻-知乎日报-热点资讯-腾讯新闻-新浪新闻-星岛环球网-国际在线-凤凰周刊-搜狐视频-环球时报-百色新闻网-宣汉新闻网-360新闻-360新闻-香港文汇网-CRI国际在线-美联社-合众国际社-路透社-俄罗斯通讯社

【央视新闻】求带回血的良心导师《手机搜狐网》

jkshdfj — Mon, 17 Jan 2022 07:22:56 GMT

求带回血的良心导师【+老师企@鹅-３６３９５８７】【-信誉誷-ｚｈ５７點ｖｉｐ丨邀-请-码66413333】☆问鼎中崋★九五至尊【顶-尖-名-师丨信.誉.平.台丨购采首`选丨一.对.一丨全.天.在.线.辅.导】财联社12月31日电，天眼查显示，12月30日，四川蜀能矿产有限责任公司成立，注册资本5亿人民币，法定代表人徐开贵。经营范围含矿产资源（非煤矿山）开采；矿产资源勘查；再生资源回收（除生产性废旧金属）；五金产品研发；贵金属冶炼等。股权穿透图显示，该公司由四川路桥建设集团股份有限公司、比亚迪股份有限公司等共同持股。=来源：凤凰资讯-网易新闻-知乎日报-热点资讯-腾讯新闻-新浪新闻-星岛环球网-国际在线-凤凰周刊-搜狐视频-环球时报-百色新闻网-宣汉新闻网-360新闻-360新闻-香港文汇网-CRI国际在线-美联社-合众国际社-路透社-俄罗斯通讯社

在 Vue 中为什么不推荐用 index 做 key前端JavaScript__Vue.js

banyungong — Fri, 14 Jan 2022 09:15:00 GMT

这是第 120 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注我们吧~ 本文首发于政采云前端博客：在 Vue 中为什么不推荐用 index 做 key

前言

key 的作用

Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极其重要的作用。

key 在 diff 算法中的角色

具体 diff 流程如下

Vue3.0中在 patchChildren 方法中有这么一段源码

if (patchFlag > 0) {
      if (patchFlag & PatchFlags.KEYED_FRAGMENT) { 
         /* 对于存在 key 的情况用于 diff 算法 */
        patchKeyedChildren(
         ...
        )
        return
      } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
         /* 对于不存在 key 的情况,直接 patch  */
        patchUnkeyedChildren( 
          ...
        )
        return
      }
    }

patchChildren 根据是否存在 key 进行真正的 diff 或者直接 patch。对于 key 不存在的情况我们就不做深入研究了。

我们先来看看一些声明的变量。

/*  c1 老的 vnode c2 新的vnode  */
let i = 0              /* 记录索引 */
const l2 = c2.length   /* 新 vnode的数量 */
let e1 = c1.length - 1 /* 老 vnode 最后一个节点的索引 */
let e2 = l2 - 1        /* 新节点最后一个节点的索引 */

同步头部节点

第一步的事情就是从头开始寻找相同的 vnode，然后进行 patch ,如果发现不是相同的节点，那么立即跳出循环。

//(a b) c
//(a b) d e
/* 从头对比找到有相同的节点 patch ，发现不同，立即跳出*/
    while (i <= e1 && i <= e2) {
      const n1 = c1[i]
      const n2 = (c2[i] = optimized
        ? cloneIfMounted(c2[i] as VNode)
        : normalizeVNode(c2[i]))
        /* 判断 key ，type 是否相等 */
      if (isSameVNodeType(n1, n2)) {
        patch(
          ...
        )
      } else {
        break
      }
      i++
    }

流程如下：

isSameVNodeType 作用就是判断当前 vnode 类型和 vnode 的 key 是否相等

export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

其实看到这，是不是已经知道 key 在 diff 算法的作用，就是用来判断是否是同一个节点。

同步尾部节点

第二步从尾开始同前 diff

//a (b c)
//d e (b c)
/* 如果第一步没有 patch 完，立即，从后往前开始 patch  如果发现不同立即跳出循环 */
    while (i <= e1 && i <= e2) {
      const n1 = c1[e1]
      const n2 = (c2[e2] = optimized
        ? cloneIfMounted(c2[e2] as VNode)
        : normalizeVNode(c2[e2]))
      if (isSameVNodeType(n1, n2)) {
        patch(
         ...
        )
      } else {
        break
      }
      e1--
      e2--
    }

添加新的节点

第三步如果老节点是否全部 patch，新节点没有被 patch 完,创建新的 vnode

//(a b)
//(a b) c
//i = 2, e1 = 1, e2 = 2
//(a b)
//c (a b)
//i = 0, e1 = -1, e2 = 0
/* 如果新的节点大于老的节点数 ，对于剩下的节点全部以新的 vnode 处理（这种情况说明已经 patch 完相同的 vnode ） */
    if (i > e1) {
      if (i <= e2) {
        const nextPos = e2 + 1
        const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor
        while (i <= e2) {
          patch( /* 创建新的节点*/
            ...
          )
          i++
        }
      }
    }

流程如下：

删除多余节点

第四步如果新节点全部被 patch，老节点有剩余，那么卸载所有老节点

//i > e2
//(a b) c
//(a b)
//i = 2, e1 = 2, e2 = 1
//a (b c)
//(b c)
//i = 0, e1 = 0, e2 = -1
else if (i > e2) {
   while (i <= e1) {
      unmount(c1[i], parentComponent, parentSuspense, true)
      i++
   }
}

流程如下：

最长递增子序列

这里引入一个概念，叫最长递增子序列。
官方解释：在一个给定的数组中，找到一组递增的数值，并且长度尽可能的大。
有点比较难理解，那来看具体例子：

const arr = [10, 9, 2, 5, 3, 7, 101, 18]
=> [2, 3, 7, 18]
这一列数组就是arr的最长递增子序列，其实[2, 3, 7, 101]也是。
所以最长递增子序列符合三个要求：
1、子序列内的数值是递增的
2、子序列内数值的下标在原数组中是递增的
3、这个子序列是能够找到的最长的
但是我们一般会找到数值较小的那一组数列，因为他们可以增长的空间会更多。

为什么不要用index

性能消耗

使用 index 做 key，破坏顺序操作的时候，因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建。

例子：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}</li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们先把 Chorme 调试器打开，我们双击把里面文本修改一下

我们运行以上上面的代码，看下运行结果

上面我们也讲过 diif 比较方式,下面根据 diff 比较绘制一张图，看看具体是怎么比较的吧

当我们在前面加了一条数据时 index 顺序就会被打断，导致新节点 key 全部都改变了，所以导致我们页面上的数据都被重新渲染了。

下面我们下面生成1000个 DOM 来比较一下采用 index ，和不采用 index 性能比较，为了保证 key 的唯一性我们采用 uuid 作为 key

我们用 index 做为 key 现执行一遍

<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="index">{{item.id}}</li>
    </ul>
  </div>
</template>

<script>
import uuidv1 from 'uuid/v1'
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [{id:uuidv1()}],
    };
  },
  created(){
    for (let i = 0; i < 1000; i++) {
      this.studentList.push({
        id: uuidv1(),
      });
    }
  },
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 75.259033203125 ms
  },
  methods:{
    addStudent(){
      const studentObj = { id: uuidv1() };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

换成 id 作为 key

<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="item.id">{{item.id}}</li>
    </ul>
  </div>
</template>
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 42.200927734375 ms
  },

从上面比较可以看出，用唯一值作为 key 可以节约开销

数据错位

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}<input /></li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们往 input 里面输入一些值，添加一位同学看下效果：

这时候我们就会发现，在添加之前输入的数据错位了。添加之后王五的输入框残留着张三的信息，这很显然不是我们想要的结果。

解决方案

在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
可以采用 Symbol 作为 key，Symbol 是 ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

let a=Symbol('测试')
let b=Symbol('测试')
console.log(a===b)//false

可以采用 uuid 作为 key ，uuid 是 Universally Unique Identifier 的缩写，它是在一定的范围内（从特定的名字空间到全球）唯一的机器生成的标识符

我们采用上面第一种方案作为 key 在看一下上面情况，如图所示。key 相同的节点都做到了复用。起到了diff 算法的真正作用。

总结

用 index 作为 key 时，在对数据进行，逆序添加，逆序删除等破坏顺序的操作时，会产生没必要的真实 DOM更新，从而导致效率低
用 index 作为 key 时，如果结构中包含输入类的 DOM，会产生错误的 DOM 更新
在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
如果不存在对数据逆序添加，逆序删除等破坏顺序的操作时，仅用于渲染展示用时，使用 index 作为 key 也是可以的（但是还是不建议使用，养成良好开发习惯）。

参考链接

vue3.0 diff算法详解(超详细)

Vue 3 Virtual Dom Diff源码阅读

开源作品

政采云前端小报

开源地址 www.zoo.team/openweekly/ (小报官网首页有微信交流群)

skuDemo

开源地址 https://github.com/zcy-inc/skuPathFinder-back/

招贤纳士

研究大佬写的倒计时组件(Vue)，学到了不少东西Vue.js前端

banyungong — Fri, 14 Jan 2022 09:14:13 GMT

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。

一、前言

入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目。

由于是一起开发，当然不会放过阅读大佬的代码的机会。

因为我的页面中需要使用到倒计时功能，发现大佬的已经写了个现成的倒计时组件，于是直接就拿过来用了。

传个参数就实现了功能的感觉真是太棒了。项目完成后，就膜拜了一下大佬的倒计时组件的代码。真是让我学到了不少。列举如下：

计时器为什么要用setTimeout而不用setInterval
为什么不直接将剩余时间-1。
如何将所需要的时间返回出去（有可能我只需要分钟和秒数，那就只返回分钟和秒数，也有可能我全都要）。
不确定接口返回的是剩余时间还是截止日期，该怎么同时兼容这两种情况。
不确定接口返回的时间是秒还是毫秒单位。

好了，你可能不太理解这些问题，但是没关系，看完下面的解释，相信你会豁然开朗。

二、开始手操

1. 先创建一个vue组件

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
   
  }),
  props: {
    
  },
};
</script>
<style lang='scss' scoped>

</style>

2. 实现基本的倒计时组件

接下来，假设接口获得的是一个剩余时间。

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
};
</script>
<style lang='scss' scoped>

</style>

我们获得duration之后就可以开始倒计时了

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  // 新增代码：
  mounted() {
    this.countDown();
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
  }
};
</script>
<style lang='scss' scoped>

</style>

在这里创建了一个countDown方法，表示开始倒计时的意思，已进入页面就开始执行countdown方法。

countDown方法调用了getTime方法，getTime需要传入duration这个参数，也就是我们获得的剩余时间。

现在来实现一下这个方法。

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
    // 新增代码：
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        this.getTime(duration - 1);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

durationFormatter是一个将duration转化成天数，小时，分钟，秒数的方法，很简单，可以看下它的具体实现。

durationFormatter(time) {
  if (!time) return { ss: 0 };
  let t = time;
  const ss = t % 60;
  t = (t - ss) / 60;
  if (t < 1) return { ss };
  const mm = t % 60;
  t = (t - mm) / 60;
  if (t < 1) return { mm, ss };
  const hh = t % 24;
  t = (t - hh) / 24;
  if (t < 1) return { hh, mm, ss };
  const dd = t;
  return { dd, hh, mm, ss };
},

好了，问题开始来了！！

3. 为什么要用setTimeout来模拟setInterval的行为？

这里用setInerval不是更方便吗？

setTimeout(function(){··· }, n); // n毫秒后执行function

setInterval(function(){··· }, n); // 每隔n毫秒执行一次function

可以看看setInterval有什么缺点：

再次强调，定时器指定的时间间隔，表示的是何时将定时器的代码添加到消息队列，而不是何时执行代码。所以真正何时执行代码的时间是不能保证的，取决于何时被主线程的事件循环取到，并执行。

setInterval(function, N)  
//即：每隔N秒把function事件推到消息队列中

综上所述，setInterval有两个缺点：

使用setInterval时，某些间隔会被跳过；
可能多个定时器会连续执行；

因而我们一般用setTimeout模拟setInterval，来规避掉上面的缺点。

4. 为什么要clearTimeout(this.timer)

第二问：为什么要有this.timer && clearTimeout(this.timer);这一句？

假设一个场景：

如图所示，在倒计时的父组件中，有两个按钮，点击活动一就会传入活动一的剩余时间，点击活动二，就会传入活动二的时间。

我们来监听duration，如果发现duration变化，说明新的时间time传入组件，这时就要重新调用this.countDown()。

代码如下：

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  // 新增代码：
  watch: {
    duration() {
      this.countDown();
    }
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
    durationFormatter(){...}
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        this.getTime(duration - 1);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

好了，但是并没有解释上面提出的那个问题：为什么要有this.timer && clearTimeout(this.timer);这一句？

这就是为什么要添加上this.timer && clearTimeout(this.timer);这一句的原因了。就是要把上一个setTimeout清除掉。

5. 使用 diffTime

这是怎么回事？

出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停待用户回到浏览器时, 才会重新激活定时任务

说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异。

所以我们需要改写一下getTime方法。

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
    curTime: 0,// 新增代码：
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  
  watch: {
    duration() {
      this.countDown();
    }
  },
  methods: {
    countDown() {
      // 新增代码：
      this.curTime = Date.now();
      this.getTime(this.duration);
    },
    durationFormatter(){...}
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        // 新增代码：
        const now = Date.now();
        const diffTime = Math.floor((now - this.curTime) / 1000);
        this.curTime = now;
        this.getTime(duration - diffTime);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

可以看到，我们在三个位置添加了新的代码。

首先在data了添加了curTime这个变量，然后在执行countDown的时候给curTime赋值Date.now()，也就是当前的时刻，也就是显示在页面上的那个时刻。

然后看修改的第三处代码。可以看到是将-1改成了-diffTime。

now 是 setTimeout的回调函数执行的时候的那个时刻。

可能你还是不太能理解diffTime。举个例子：

你打开了这个倒计时页面，于是执行了countDown，也就是说要执行getTime这个方法了。也就是会马上执行下列的代码。

this.days = dd || 0;
this.hours = hh || 0;
this.mins = mm || 0;
this.seconds = ss || 0;

执行完这些代码页面上就会出现剩余时间。

而this.curTime = Date.now(); 就记录下了此刻的时间点。

然后一秒后执行setTimeout里的回调函数：

const now = Date.now(); 记录当前这个setTimeout的回调函数执行的时间点。

然后this.curTime = now; 将curTime的值变成当前这个setTimeout的回调函数执行的时间点。

this.getTime(duration - diffTime); 其实就是this.getTime(duration - 1);

然后又执行getTime，就会重新执行下面的代码，有渲染了新的剩余时间。

this.days = dd || 0;
this.hours = hh || 0;
this.mins = mm || 0;
this.seconds = ss || 0;

这时const now = Date.now(); 记录当前这个setTimeout的回调函数执行的时间点。

而curTime是上一个setTimeout的回调函数执行的时间。

所以const diffTime = Math.floor((now - this.curTime) / 1000);实际上，diffTime的值就是5秒。

因而this.getTime(duration - diffTime); 其实就是this.getTime(duration - 5);

这样就完美解决了因为浏览器切到后台，导致剩余时间不变的问题。

6. 添加新功能：可以传入到期时间。

之前是只能传入剩余时间的，现在希望也支持传入到期时间。

只需要改动一下duration就好了。

  computed: {
    duration() {
      if (this.end) {
        let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;
        end -= Date.now();
        return end;
      }
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },

判断传入的end的长度是否大于13来判断是秒还是毫秒。轻松！

7. 添加新功能：可以选择要显示的内容，例如只显示秒，或者只显示小时。

只需要改动一下html：

<template>
  <div class="_base-count-down no-rtl">
    <div class="content">
      <slot v-bind="{
        d: days, h: hours, m: mins, s: seconds,
        hh: `00${hours}`.slice(-2),
        mm: `00${mins}`.slice(-2),
        ss: `00${seconds}`.slice(-2),
      }"></slot>
    </div>
  </div>
</template>

很巧妙有没有，只需要用插槽，就把倒计时组件，也就是把子组件的值传递给父组件了。

看看父组件是怎么使用这个组件的。

<base-counter v-slot="timeObj" :time="countDown">
  <div class="count-down">
    <div class="icon"></div>
    {{timeObj.d}}天{{timeObj.hh}}小时{{timeObj.mm}}分钟{{timeObj.ss}}秒
  </div>
</base-counter>

看，如此巧妙又简单。

var StartMinute = startDate.getMinutes().toString().length >= 2 ? startDate.getMinutes() : '0' + startDate.getHours();

而00${hours}.slice(-2) 则不用判断，先补上0再说，然后再从后面往前截取两位。

到此。

一个完美的倒计时组件就完成了。

三、学习总结

明白了setInterval的缺点以及用setTimeout代替setInterval。
学到了“+”，操作，不管三七二十一，将接口得到的长串数字转化为数字保平安。
利用clearTimeout来清除掉之前的计时器，以防止造成影响。
学会使用v-slot来子传父传值
学会一个倒计时组件，为了以后方便cv操作。把组件完整代码贴上：

<template>
  <div class="_base-count-down no-rtl">
    <div class="content">
      <slot v-bind="{
        d: days, h: hours, m: mins, s: seconds,
        hh: `00${hours}`.slice(-2),
        mm: `00${mins}`.slice(-2),
        ss: `00${seconds}`.slice(-2),
      }"></slot>
    </div>
  </div>
</template>
<script>
/* eslint-disable object-curly-newline */

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
    curTime: 0
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    refreshCounter: {
      type: [Number, String],
      default: 0
    },
    end: {
      type: [Number, String],
      default: 0
    },
    isMiniSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      if (this.end) {
        let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;
        end -= Date.now();
        return end;
      }
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  watch: {
    duration() {
      this.countDown();
    },
    refreshCounter() {
      this.countDown();
    }
  },
  methods: {
    durationFormatter(time) {
      if (!time) return { ss: 0 };
      let t = time;
      const ss = t % 60;
      t = (t - ss) / 60;
      if (t < 1) return { ss };
      const mm = t % 60;
      t = (t - mm) / 60;
      if (t < 1) return { mm, ss };
      const hh = t % 24;
      t = (t - hh) / 24;
      if (t < 1) return { hh, mm, ss };
      const dd = t;
      return { dd, hh, mm, ss };
    },
    countDown() {
      // eslint-disable-next-line no-unused-expressions
      this.curTime = Date.now();
      this.getTime(this.duration);
    },
    getTime(time) {
      // eslint-disable-next-line no-unused-expressions
      this.timer && clearTimeout(this.timer);
      if (time < 0) {
        return;
      }
      // eslint-disable-next-line object-curly-newline
      const { dd, hh, mm, ss } = this.durationFormatter(time);
      this.days = dd || 0;
      // this.hours = `00${hh || ''}`.slice(-2);
      // this.mins = `00${mm || ''}`.slice(-2);
      // this.seconds = `00${ss || ''}`.slice(-2);
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        const now = Date.now();
        const diffTime = Math.floor((now - this.curTime) / 1000);
        const step = diffTime > 1 ? diffTime : 1; // 页面退到后台的时候不会计时，对比时间差，大于1s的重置倒计时
        this.curTime = now;
        this.getTime(time - step);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>
@import '~@assets/css/common.scss';

._base-count-down {
  color: #fff;
  text-align: left;
  position: relative;
  .content {
    width: auto;
    display: flex;
    align-items: center;
  }
  span {
    display: inline-block;
  }
  .section {
    position: relative;
  }
}
</style>

你学到了什么，欢迎补充！！

欢迎大家留言讨论，祝工作顺利、生活愉快！

我是bigo前端，下期见。

Element-UI 奇淫技巧第二弹！提升开发效率，延长摸鱼时间~Element前端

banyungong — Fri, 14 Jan 2022 09:14:13 GMT

theme: cyanosis highlight: atom-one-light

主题样式修改

曾经为了修改组件风格，一个项目用了上百个样式穿透，后来才发现定制一个主题就够了！

第一步，在官网的主题页面，修改背景色、字体颜色及边框颜色

第二步，下载主题

第三步，用下载的css文件替换掉默认的css文件

效果如下：

el-backtop 回到顶部组件

有时候页面很长，我们需要一个回到顶部的按钮，推荐大家使用 el-backtop，自带过渡效果。

代码如下：

<template>
  <div class="container">
    <div class="box">Scroll down to see the bottom-right button.</div>
    <el-backtop target=".container">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow-x: hidden;
  .box {
    padding: 20px;
    height: 1500px;
  }
}
</style>

注意：需要将 body 的 margin 设置为 0，不然会出现两个滚动条。

el-form-item label宽度自适应

通常我们是给 label 设置一个固定宽度，但这完全限制了 UI 的发挥，如何让 label 宽度自适应呢？答案是给控件设置一个固定宽度。

代码如下：

<template>
  <el-form>
    <el-form-item label="教师">
      <el-input v-model="form.teacher" style="width: 625px;"></el-input>
    </el-form-item>
    <el-form-item label="请选择在线教学平台名称">
      <el-select v-model="form.platform" style="width: 500px;">
        <el-option label="平台一" value="1"></el-option>
        <el-option label="平台二" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        teacher: '',
        platform: ''
      }
    }
  }
}
</script>

el-form-item 循环校验

有时候表单项是一个循环的列表，需要对每一项进行校验。

代码如下：

<template>
  <div>
    <el-form :model="form" label-width="100px" ref="form">
      <el-form-item
        v-for="(item, index) in form.list"
        :key="index"
        :label="'评价项目' + (index + 1)"
        :prop="'list.' + index + '.evaluateName'"
        :rules="rules.evaluateName"
      >
        <el-input v-model="item.evaluateName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          }
        ]
      },
      rules: {
        evaluateName: [
          {
            required: true,
            message: '请输入评价项目',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-form-item 表单嵌套表格校验

如果在表单里嵌套表格，那么如何对表格里面的控件进行校验呢？

代码如下：

<template>
  <el-form :model="form" ref="form">
    <el-table border :data="form.list" style="margin-bottom: 10px;">
      <el-table-column
        label="评价项目"
        prop="evaluateName"
        align="center"
      ></el-table-column>
      <el-table-column label="评价等级" align="center">
        <template slot-scope="scope">
          <el-form-item
            :prop="'list.' + scope.$index + '.evaluateLevel'"
            :rules="rules.evaluateLevel"
            class="evaluate-level"
          >
            <el-radio-group class="radio-group" v-model="scope.row.evaluateLevel">
              <el-radio
                v-for="evaluationItem in evaluateOptions"
                :key="evaluationItem.value"
                :label="evaluationItem.value"
              >
                {{ evaluationItem.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>
      <el-button type="primary" class="submit-btn" @click="submitOpinionCheck">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            id: '01',
            evaluateName: '指标一',
            evaluateLevel: ''
          },
          {
            id: '02',
            evaluateName: '指标二',
            evaluateLevel: ''
          },
          {
            id: '03',
            evaluateName: '指标二',
            evaluateLevel: ''
          }
        ]
      },
      evaluateOptions: [
        {
          value: '1',
          label: '优'
        },
        {
          value: '2',
          label: '良'
        },
        {
          value: '3',
          label: '中'
        },
        {
          value: '4',
          label: '差'
        }
      ],
      rules: {
        evaluateLevel: [{ required: true, message: '请选择评价等级', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitOpinionCheck() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluate-level {
  ::v-deep .el-form-item__error {
    width: 100px;
    /* 使校验信息居中 */
    left: calc(50% - 50px);
  }
}
</style>

el-form-item 表单校验 label只保留 *

有时候我们只需要表单校验的 *，而不需要 lable 文字，像这样：

代码如下：

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px">
    <el-form-item label=" " prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
    </el-form-item>
    <el-form-item label=" " prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-select 下拉框样式修改

使用样式穿透修改下拉框样式，你会发现打死都不生效，那是因为下拉框是默认挂载在 body 下面。解决办法：设置 :popper-append-to-body="false"

代码如下：

<template>
  <el-form>
    <el-form-item label="活动区域">
      <el-select
        class="form-select"
        :popper-append-to-body="false"
        v-model="form.region"
        placeholder="请选择活动区域"
      >
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        region: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-select {
  ::v-deep .el-select-dropdown__item.selected {
    background: pink;
  }
}
</style>

el-input 打开弹框自动聚焦

很多时候 form 表单是嵌套在 dialog 下面，为了提高用户体验，需要在打开弹框后 input 框自动聚焦。

代码如下：

<template>
  <div>
    <el-button type="text" @click="showDialog">
      打开嵌套表单的 Dialog
    </el-button>

    <el-dialog title="活动" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="80px">
          <el-input ref="nameInput" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动内容" label-width="80px">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        content: ''
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      // 如果弹框显示，则自动聚焦
      this.$nextTick(() => {
        this.$refs.nameInput.focus()
      })
    }
  }
}
</script>

今天的分享就到到这里，希望对你有所帮助！如果觉得有用，不要忘了点个赞呦~

听说喜欢点赞的你，今年年终奖拿到手软

就因为JSON.stringify，我的年终奖差点打水漂了JavaScriptVue.js__前端

banyungong — Fri, 14 Jan 2022 09:14:13 GMT

theme: juejin

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」

开发要对线上环境有一颗敬畏之心，任何一个点都有可能导致线上故障，也有可能让你的年终奖泡汤(⊙︿⊙)。比如使用了JSON.stringify，这个无比熟悉但又无比陌生的API。

看完本文您可以收获：

了解一个差点让我年终奖打水漂的悲伤的故事o(╥﹏╥)o
学习JSON.stringify的9大特性和转换规则 (重点)
了解如何判断一个对象是否存在循环引用 (重点)
从零开始手写一个JSON.stringify (重点)
等等

说一个悲伤的故事

最近组内有个小伙伴离职了，他所负责的一块业务由我去维护，结果刚接手，代码还没捂热乎，差点背上p0的锅。请让我花一点时间和你说清楚来龙去脉。

悲伤伊始

这一天胖头鱼正徜徉在代码的海洋不可自拔，突然被拉进了一个线上问题排查群，群里不可谓不热闹。

产品同学在诉苦：线上用户不能提交表单了，带来了好多客诉，估计会是p0故障，希望尽快解决。

测试同学在纳闷：这个场景测试和预发环境明明验过的，怎么线上就不行了。

后端同学在讲原因：接口缺少了value字段，导致出错了。

就是木有人说问题怎么解决!!!

问题原因

如下图：有这样一个动态表单搜集页面，用户选择或者填写了信息之后（各字段非必填情况下也可以直接提交），接着前端把数据发送给后端，结束，看起来没有多复杂的逻辑。

直接错误原因

非必填情况下，signInfo字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常，用户无法进行下一步动作。

// 异常入参数据，数组字符串中没有value key
{
  signInfo: '[{"fieldId":539},{"fieldId":540},{"fieldId":546,"value":"10:30"}]'
}

// 正常入参数据
{
  signInfo: '[{"fieldId":539,"value":"银卡"},{"fieldId":540,"value":"2021-03-01"},{"fieldId":546,"value":"10:30"}]'
}

异常数据是如何产生的

// 默认情况下数据是这样的
let signInfo = [
  {
    fieldId: 539,
    value: undefined
  },
  {
    fieldId: 540,
    value: undefined
  },
  {
    fieldId: 546,
    value: undefined
  },
]
// 经过JSON.stringify之后的数据,少了value key,导致后端无法读取value值进行报错
// 具体原因是`undefined`、`任意的函数`以及`symbol值`，出现在`非数组对象`的属性值中时在序列化过程中会被忽略
console.log(JSON.stringify(signInfo))
// '[{"fieldId":539},{"fieldId":540},{"fieldId":546}]'

解决方案

问题的原因找到了，解决方式 (这里只讲前端的解决方案，当然也可以由后端解决) 也很简单，将value值为undefined的项转化为空字符串再提交即可。

方案一：新开一个对象处理

let signInfo = [
  {
    fieldId: 539,
    value: undefined
  },
  {
    fieldId: 540,
    value: undefined
  },
  {
    fieldId: 546,
    value: undefined
  },
]

let newSignInfo = signInfo.map((it) => {
  const value = typeof it.value === 'undefined' ? '' : it.value
  return {
    ...it,
    value
  }
})

console.log(JSON.stringify(newSignInfo))
// '[{"fieldId":539,"value":""},{"fieldId":540,"value":""},{"fieldId":546,"value":""}]'

方案二：利用JSON.stringify第二个参数，直接处理

方案一的缺陷是需要新开一个对象进行一顿操作才能解决，不够优雅

let signInfo = [
  {
    fieldId: 539,
    value: undefined
  },
  {
    fieldId: 540,
    value: undefined
  },
  {
    fieldId: 546,
    value: undefined
  },
]

// 判断到value为undefined，返回空字符串即可
JSON.stringify(signInfo, (key, value) => typeof value === 'undefined' ? '' : value)
// '[{"fieldId":539,"value":""},{"fieldId":540,"value":""},{"fieldId":546,"value":""}]'

故事后续

原本这是一个已经上线有一段时间的页面，为何会突然出现这个问题，之前却没有呢？仔细询问下，原来是中途产品同学提了一个小的优化点，离职的小伙伴感觉点比较小直接就改了代码上线了，未曾想出现了线上问题。

后面针对这件事从产品到测试、到后端、到前端单独做了一个完整的复盘，细节就不再展开说了。

因为从发现问题到解决问题速度较快、影响用户数较少，还未达到问责程度，俺的年终奖可算是保住了o(╥﹏╥)o。

重学JSON.stringify

经过这件事情，我觉得有必要重新审视一下JSON.stringify这个方法，彻底搞清楚转换规则，并尝试手写实现一个JSON.stringify

如果你曾遇到和我一样的问题，欢迎一起来重新学习一次，一定会有不一样的收获噢！

学透JSON.stringify

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

以下信息来自MDN

语法

JSON.stringify(value[, replacer [, space]])

参数

value

将要序列化成一个 JSON 字符串的值。
replacer 可选
1. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
2. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
3. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
space 可选
1. 指定缩进用的空白字符串，用于美化输出（pretty-print）；
2. 如果参数是个数字，它代表有多少的空格；上限为10。
3. 该值若小于1，则意味着没有空格；
4. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；
5. 如果该参数没有提供（或者为 null），将没有空格。

返回值

一个表示给定值的JSON字符串。

异常

当在循环引用时会抛出异常TypeError (“cyclic object value”)（循环对象值）
当尝试去转换 BigInt 类型的值会抛出TypeError (“BigInt value can’t be serialized in JSON”)（BigInt值不能JSON序列化）.

基本使用

注意

JSON.stringify可以转换对象或者值（平常用的更多的是转换对象）
可以指定replacer为函数选择性的地替换
也可以指定replacer为数组，可转换指定的属性

这里仅仅是MDN上关于JSON.stringify其中最基础的说明，咱们先打个码试试这几个特性

// 1. 转换对象
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy' })) // '{"name":"前端胖头鱼","sex":"boy"}'

// 2. 转换普通值
console.log(JSON.stringify('前端胖头鱼')) // "前端胖头鱼"
console.log(JSON.stringify(1)) // "1"
console.log(JSON.stringify(true)) // "true"
console.log(JSON.stringify(null)) // "null"

// 3. 指定replacer函数
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, (key, value) => {
  return typeof value === 'number' ? undefined : value
}))
// '{"name":"前端胖头鱼","sex":"boy"}'

// 4. 指定数组
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, [ 'name' ]))
// '{"name":"前端胖头鱼"}'

// 5. 指定space(美化输出)
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }))
// '{"name":"前端胖头鱼","sex":"boy","age":100}'
console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, null , 2))
/*
{
  "name": "前端胖头鱼",
  "sex": "boy",
  "age": 100
}
*/

9大特性要记住

以前仅仅是使用了这个方法，却没有详细了解他的转换规则，居然有9个之多。

特性一

undefined、任意的函数以及symbol值，出现在非数组对象的属性值中时在序列化过程中会被忽略
undefined、任意的函数以及symbol值出现在数组中时会被转换成 null。
undefined、任意的函数以及symbol值被单独转换时，会返回 undefined

// 1. 对象中存在这三种值会被忽略
console.log(JSON.stringify({
  name: '前端胖头鱼',
  sex: 'boy',
  // 函数会被忽略
  showName () {
    console.log('前端胖头鱼')
  },
  // undefined会被忽略
  age: undefined,
  // Symbol会被忽略
  symbolName: Symbol('前端胖头鱼')
}))
// '{"name":"前端胖头鱼","sex":"boy"}'

// 2. 数组中存在着三种值会被转化为null
console.log(JSON.stringify([
  '前端胖头鱼',
  'boy',
  // 函数会被转化为null
  function showName () {
    console.log('前端胖头鱼')
  },
  //undefined会被转化为null
  undefined,
  //Symbol会被转化为null
  Symbol('前端胖头鱼')
]))
// '["前端胖头鱼","boy",null,null,null]'

// 3.单独转换会返回undefined
console.log(JSON.stringify(
  function showName () {
    console.log('前端胖头鱼')
  }
)) // undefined
console.log(JSON.stringify(undefined)) // undefined
console.log(JSON.stringify(Symbol('前端胖头鱼'))) // undefined

特性二

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

console.log(JSON.stringify([new Number(1), new String("前端胖头鱼"), new Boolean(false)]))
// '[1,"前端胖头鱼",false]'

特性三

所有以symbol为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

console.log(JSON.stringify({
  [Symbol('前端胖头鱼')]: '前端胖头鱼'}
)) 
// '{}'
console.log(JSON.stringify({
  [ Symbol('前端胖头鱼') ]: '前端胖头鱼',
}, (key, value) => {
  if (typeof key === 'symbol') {
    return value
  }
}))
// undefined

特性四

NaN 和 Infinity 格式的数值及 null 都会被当做 null。

console.log(JSON.stringify({
  age: NaN,
  age2: Infinity,
  name: null
}))
// '{"age":null,"age2":null,"name":null}'

特性五

转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。

const toJSONObj = {
  name: '前端胖头鱼',
  toJSON () {
    return 'JSON.stringify'
  }
}

console.log(JSON.stringify(toJSONObj))
// "JSON.stringify"

特性六

Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。

const d = new Date()

console.log(d.toJSON()) // 2021-10-05T14:01:23.932Z
console.log(JSON.stringify(d)) // "2021-10-05T14:01:23.932Z"

特性七

对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

let cyclicObj = {
  name: '前端胖头鱼',
}

cyclicObj.obj = cyclicObj

console.log(JSON.stringify(cyclicObj))
// Converting circular structure to JSON

特性八

其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性

let enumerableObj = {}

Object.defineProperties(enumerableObj, {
  name: {
    value: '前端胖头鱼',
    enumerable: true
  },
  sex: {
    value: 'boy',
    enumerable: false
  },
})

console.log(JSON.stringify(enumerableObj))
// '{"name":"前端胖头鱼"}'

特性九

当尝试去转换 BigInt 类型的值会抛出错误

const alsoHuge = BigInt(9007199254740991)

console.log(JSON.stringify(alsoHuge))
// TypeError: Do not know how to serialize a BigInt

手写一个JSON.stringify

终于重新学完JSON.stringify的众多特性啦！咱们根据这些特性来手写一个简单版本的吧（无replacer函数和space）

源码实现

const jsonstringify = (data) => {
  // 确认一个对象是否存在循环引用
  const isCyclic = (obj) => {
  // 使用Set数据类型来存储已经检测过的对象
  let stackSet = new Set()
  let detected = false

  const detect = (obj) => {
    // 不是对象类型的话，可以直接跳过
    if (obj && typeof obj != 'object') {
      return
    }
    // 当要检查的对象已经存在于stackSet中时，表示存在循环引用
    if (stackSet.has(obj)) {
      return detected = true
    }
    // 将当前obj存如stackSet
    stackSet.add(obj)

    for (let key in obj) {
      // 对obj下的属性进行挨个检测
      if (obj.hasOwnProperty(key)) {
        detect(obj[key])
      }
    }
    // 平级检测完成之后，将当前对象删除，防止误判
    /*
      例如：对象的属性指向同一引用，如果不删除的话，会被认为是循环引用
      let tempObj = {
        name: '前端胖头鱼'
      }
      let obj4 = {
        obj1: tempObj,
        obj2: tempObj
      }
    */
    stackSet.delete(obj)
  }

  detect(obj)

  return detected
}

  // 特性七:
  // 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
  if (isCyclic(data)) {
    throw new TypeError('Converting circular structure to JSON')
  }

  // 特性九:
  // 当尝试去转换 BigInt 类型的值会抛出错误
  if (typeof data === 'bigint') {
    throw new TypeError('Do not know how to serialize a BigInt')
  }

  const type = typeof data
  const commonKeys1 = ['undefined', 'function', 'symbol']
  const getType = (s) => {
    return Object.prototype.toString.call(s).replace(/\[object (.*?)\]/, '$1').toLowerCase()
  }

  // 非对象
  if (type !== 'object' || data === null) {
    let result = data
    // 特性四：
    // NaN 和 Infinity 格式的数值及 null 都会被当做 null。
    if ([NaN, Infinity, null].includes(data)) {
      result = 'null'
      // 特性一：
      // `undefined`、`任意的函数`以及`symbol值`被`单独转换`时，会返回 undefined
    } else if (commonKeys1.includes(type)) {
      // 直接得到undefined，并不是一个字符串'undefined'
      return undefined
    } else if (type === 'string') {
      result = '"' + data + '"'
    }

    return String(result)
  } else if (type === 'object') {
    // 特性五:
    // 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化
    // 特性六:
    // Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。
    if (typeof data.toJSON === 'function') {
      return jsonstringify(data.toJSON())
    } else if (Array.isArray(data)) {
      let result = data.map((it) => {
        // 特性一:
        // `undefined`、`任意的函数`以及`symbol值`出现在`数组`中时会被转换成 `null`
        return commonKeys1.includes(typeof it) ? 'null' : jsonstringify(it)
      })

      return `[${result}]`.replace(/'/g, '"')
    } else {
      // 特性二：
      // 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
      if (['boolean', 'number'].includes(getType(data))) {
        return String(data)
      } else if (getType(data) === 'string') {
        return '"' + data + '"'
      } else {
        let result = []
        // 特性八
        // 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性
        Object.keys(data).forEach((key) => {
          // 特性三:
          // 所有以symbol为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
          if (typeof key !== 'symbol') {
            const value = data[key]
            // 特性一
            // `undefined`、`任意的函数`以及`symbol值`，出现在`非数组对象`的属性值中时在序列化过程中会被忽略
            if (!commonKeys1.includes(typeof value)) {
              result.push(`"${key}":${jsonstringify(value)}`)
            }
          }
        })

        return `{${result}}`.replace(/'/, '"')
      }
    }
  }
}

测试一把

// 1. 测试一下基本输出
console.log(jsonstringify(undefined)) // undefined 
console.log(jsonstringify(() => { })) // undefined
console.log(jsonstringify(Symbol('前端胖头鱼'))) // undefined
console.log(jsonstringify((NaN))) // null
console.log(jsonstringify((Infinity))) // null
console.log(jsonstringify((null))) // null
console.log(jsonstringify({
  name: '前端胖头鱼',
  toJSON() {
    return {
      name: '前端胖头鱼2',
      sex: 'boy'
    }
  }
}))
// {"name":"前端胖头鱼2","sex":"boy"}

// 2. 和原生的JSON.stringify转换进行比较
console.log(jsonstringify(null) === JSON.stringify(null));
// true
console.log(jsonstringify(undefined) === JSON.stringify(undefined));
// true
console.log(jsonstringify(false) === JSON.stringify(false));
// true
console.log(jsonstringify(NaN) === JSON.stringify(NaN));
// true
console.log(jsonstringify(Infinity) === JSON.stringify(Infinity));
// true
let str = "前端胖头鱼";
console.log(jsonstringify(str) === JSON.stringify(str));
// true
let reg = new RegExp("\w");
console.log(jsonstringify(reg) === JSON.stringify(reg));
// true
let date = new Date();
console.log(jsonstringify(date) === JSON.stringify(date));
// true
let sym = Symbol('前端胖头鱼');
console.log(jsonstringify(sym) === JSON.stringify(sym));
// true
let array = [1, 2, 3];
console.log(jsonstringify(array) === JSON.stringify(array));
// true
let obj = {
  name: '前端胖头鱼',
  age: 18,
  attr: ['coding', 123],
  date: new Date(),
  uni: Symbol(2),
  sayHi: function () {
    console.log("hello world")
  },
  info: {
    age: 16,
    intro: {
      money: undefined,
      job: null
    }
  },
  pakingObj: {
    boolean: new Boolean(false),
    string: new String('前端胖头鱼'),
    number: new Number(1),
  }
}
console.log(jsonstringify(obj) === JSON.stringify(obj)) 
// true
console.log((jsonstringify(obj)))
// {"name":"前端胖头鱼","age":18,"attr":["coding",123],"date":"2021-10-06T14:59:58.306Z","info":{"age":16,"intro":{"job":null}},"pakingObj":{"boolean":false,"string":"前端胖头鱼","number":1}}
console.log(JSON.stringify(obj))
// {"name":"前端胖头鱼","age":18,"attr":["coding",123],"date":"2021-10-06T14:59:58.306Z","info":{"age":16,"intro":{"job":null}},"pakingObj":{"boolean":false,"string":"前端胖头鱼","number":1}}

// 3. 测试可遍历对象
let enumerableObj = {}

Object.defineProperties(enumerableObj, {
  name: {
    value: '前端胖头鱼',
    enumerable: true
  },
  sex: {
    value: 'boy',
    enumerable: false
  },
})

console.log(jsonstringify(enumerableObj))
// {"name":"前端胖头鱼"}

// 4. 测试循环引用和Bigint

let obj1 = { a: 'aa' }
let obj2 = { name: '前端胖头鱼', a: obj1, b: obj1 }
obj2.obj = obj2

console.log(jsonstringify(obj2))
// TypeError: Converting circular structure to JSON
console.log(jsonStringify(BigInt(1)))
// TypeError: Do not know how to serialize a BigInt

通过上面测试可以看出，jsonstringify基本和JSON.stringify表现一致，（也有可能测试用例不够全面，欢迎提出一起学习）

结尾

因为一个BUG，重学了JSON.stringify,了解到原来它还有这么多平时没有注意到特性，前端娱乐圈水太深了，愿大家都被温柔以待，少些bug，多些关怀。晚安

浅析我们为什么要上Vue3？前端Vue.js

banyungong — Fri, 14 Jan 2022 09:14:13 GMT

theme: vue-pro highlight: a11y-dark

专栏地址：Vue 源码解析与实践

本文：我是970
原文链接：https://juejin.cn/post/7040769191393099783

✨ 开篇

RT，我们为什么要上 Vue3？使用 Vue3 影响我开法拉利吗？

最近在 Vue3 发布了3.2 大版本之后，掘金上关于 Vue3 的文章越来越多，本来想着让子弹再飞一会，但最近公司上了 Vue3 的项目，自己也跟着学了起来。

昨天还是 Vue2 的 Options API 的忠实信徒，结果今天搞了 Vue3 的 Composition API 之后，直呼 Vue3 真香！

接下来，我们从分析 Vue2 优缺点入手，以及结合图片和用例来了解 Vue3 的优势。

Vue2 ⚔ Vue3

Vue2

优点

不可否认 Vue2 在取得的成功，在 Github 的 Front-End 分类的排行榜上也能看到 Vue 仓库的排名是第一，粉丝足够多，活跃用户足够多

比 React 足足多了 12k+ star

从我的角度来看，最大的功臣莫过于这三个：

响应式数据
Options API
SFC

除去这三位大将，不可或缺 Vuex/Vue-Router 这两位功臣，以及丰富的周边插件和活跃的社区。

缺点

在一个组件仅承担单一逻辑的时候，使用 Options API 来书写组件是很清晰的。

这时候，我们根据Vue2的Options API的写法，就写完了 10 个method、10 个data、10 个watch，我们就将本来 10 个的函数方法，分割在 30 个不同的地方。

这时候父组件的代码，对代码维护者来说是很不友好的。

可能有人说，这么写可以增加代码量，老板夸我牛逼！哈哈哈哈

Vue3

优点

自由，自由，还是 TM 的自由！

更强的性能，更好的 tree shaking
Composition API + setup
更好地支持 TypeScript

可能的缺点

Vue3: 让你自由过了火

使用Composition API在setup这个舞台上尽情的表演之后，可能存在一个问题：那就是如何优雅地组织代码？

代码不能优雅的组织，在代码量上去之后，也一样很难维护。

SFC 写法变化

Vue2 一个普通的 Vue 文件

<template>
  <div>
    <p>{{ person.name }}</p>
    <p>{{ car.name }}</p>
  </div>
</template>

<script>
export default {
  name: "Person",

  data() {
    return {
      person: {
        name: "小明",
        sex: "male",
      },
      car: {
        name: "宝马",
        price: "40w",
      }
    };
  },

  watch:{
      'person.name': (value) => {
          console.log(`名字被修改了, 修改为 ${value}`)
      },
      'person.sex': (value) => {
          console.log(`性别被修改了, 修改为 ${value}`)
      }
  },

  methods: {
    changePersonName() {
      this.person.name = "小浪";
    },

    changeCarPrice() {
      this.car.price = "80w";
    }
  },
};
</script>

采用 Vue3 Composition API 进行重写

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";

// person的逻辑
const person = reactive<{ name: string; sex: string }>({
  name: "小明",
  sex: "male",
});
watch(
  () => [person.name, person.sex],
  ([nameVal, sexVal]) => {
    console.log(`名字被修改了, 修改为 ${nameVal}`);
    console.log(`名字被修改了, 修改为 ${sexVal}`);
  }
);
function changePersonName() {
  person.name = "小浪";
}

// car的逻辑
const car = reactive<{ name: string; price: string }>({
  name: "宝马",
  price: "40w",
});
function changeCarPrice() {
  car.price = "80w";
}
</script>

采用 Vue3 自定义 Hook 的方式，进一步拆分

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
  <p>{{ animal.name }}</p>
</template>

<script lang="ts" setup>
import { usePerson, useCar, useAnimal } from "./hooks";

const { person, changePersonName } = usePerson();

const { car } = useCar();
</script>

// usePerson.ts
import { reactive, watch } from "vue";

export default function usePerson() {
  const person = reactive<{ name: string; sex: string }>({
    name: "小明",
    sex: "male",
  });
  watch(
    () => [person.name, person.sex],
    ([nameVal, sexVal]) => {
      console.log(`名字被修改了, 修改为 ${nameVal}`);
      console.log(`名字被修改了, 修改为 ${sexVal}`);
    }
  );
  function changePersonName() {
    person.name = "小浪";
  }
  return {
    person,
    changePersonName,
  };
}

// useCar.ts
import { reactive } from "vue";

export default function useCar() {
  const car = reactive<{ name: string; price: string }>({
    name: "宝马",
    price: "40w",
  });
  function changeCarPrice() {
    car.price = "80w";
  }
  return {
    car,
    changeCarPrice,
  };
}

对比完之后，我们会发现，Vue3 可以让我们更好组织代码。person和car的逻辑都被单独放置在一块

仅仅是代码组织的优势吗？不不不，我们再看看模板中的一些变化

<template>标签中起始便签可以不用<div>标签，因为Vue3提供了片段的能力，使用Vue-detools中查看，可以看到有fragment的标记
Watch也不需要罗列多个了，Vue3中支持侦听多个源
很自然的使用TypeScript，类型约束更加简单

性能方面

Vue3 主要在这几个方面进行了提升

编译阶段。对 diff 算法优化、静态提升等等
响应式系统。Proxy()替代Object.defineProperty()监听对象。监听一个对象，不需要再深度遍历，Proxy()就可以劫持整个对象
体积包减少。Compostion API 的写法，可以更好的进行 tree shaking，减少上下文没有引入的代码，减少打包后的文件体积
新增片段特性。Vue 文件的<template>标签内，不再需要强制声明一个的<div>标签，节省额外的节点开销

总结

Vue3 的优点和新特性还有很多很多，本篇文章主要从Vue2/3版本的优缺点和SFC写法变化这两个角度介入，给大家介绍我们为什么要上 Vue3。

Vue3 很香，更好地支持 TypeScript，让 Vue3 成为了企业级 Vue 项目的首选，各种新特性也迎合前端技术的发展趋势。

ie 浏览器：那我走？

最后

翻译翻译什么是 Vue3 ？

如果这篇文章对你有帮助，那麻烦你动动小手点个赞，你的每一个点赞都是我继续创作的莫大鼓励！

参考资料

面试官：Vue3.0 性能提升主要是通过哪几方面体现的？

Vue3 教程：Vue 3.x 快在哪里？

其他

掘金年度人气创作者打榜最后一天啦，欢迎大家为我们团队投票~ IDuxFE@深信服前端开发团队感谢大家的支持~

后端一次给你10万条数据，如何优雅展示，到底考察我什么?前端Vue.js__面试

banyungong — Fri, 14 Jan 2022 09:14:13 GMT

theme: smartblue

前言

前置工作

先把前置工作给做好，后面才能进行测试

后端搭建

新建一个server.js文件，简单起个服务，并返回给前端10w条数据，并通过nodemon server.js开启服务

没有安装nodemon的同学可以先全局安装npm i nodemon -g

// server.js

const http = require('http')
const port = 8000;

http.createServer(function (req, res) {
  // 开启Cors
  res.writeHead(200, {
    //设置允许跨域的域名，也可设置*允许所有域名
    'Access-Control-Allow-Origin': '*',
    //跨域允许的请求方法，也可设置*允许所有方法
    "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
    //允许的header类型
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  let list = []
  let num = 0

  // 生成10万条数据的list
  for (let i = 0; i < 100000; i++) {
    num++
    list.push({
      src: 'https://p3-passport.byteacctimg.com/img/user-avatar/d71c38d1682c543b33f8d716b3b734ca~300x300.image',
      text: `我是${num}号嘉宾林三心`,
      tid: num
    })
  }
  res.end(JSON.stringify(list));
}).listen(port, function () {
  console.log('server is listening on port ' + port);
})

前端页面

先新建一个index.html

// index.html

// 样式
<style>
    * {
      padding: 0;
      margin: 0;
    }
    #container {
      height: 100vh;
      overflow: auto;
    }
    .sunshine {
      display: flex;
      padding: 10px;
    }
    img {
      width: 150px;
      height: 150px;
    }
  </style>

// html部分
<body>
  <div id="container">
  </div>
  <script src="./index.js"></script>
</body>

然后新建一个index.js文件，封装一个AJAX函数，用来请求这10w条数据

// index.js

// 请求函数
const getList = () => {
    return new Promise((resolve, reject) => {
        //步骤一:创建异步对象
        var ajax = new XMLHttpRequest();
        //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数
        ajax.open('get', 'http://127.0.0.1:8000');
        //步骤三:发送请求
        ajax.send();
        //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                resolve(JSON.parse(ajax.responseText))
            }
        }
    })
}

// 获取container对象
const container = document.getElementById('container')

直接渲染

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    list.forEach(item => {
        const div = document.createElement('div')
        div.className = 'sunshine'
        div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
        container.appendChild(div)
    })
    console.timeEnd('列表时间')
}
renderList()

setTimeout分页渲染

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        setTimeout(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        }, 0)
    }
    render(page)
    console.timeEnd('列表时间')
}

requestAnimationFrame

使用requestAnimationFrame代替setTimeout，减少了重排的次数，极大提高了性能，建议大家在渲染方面多使用requestAnimationFrame

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        // 使用requestAnimationFrame代替setTimeout
        requestAnimationFrame(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('列表时间')
}

文档碎片 + requestAnimationFrame

文档碎片的好处

1、之前都是每次创建一个div标签就appendChild一次，但是有了文档碎片可以先把1页的div标签先放进文档碎片中，然后一次性appendChild到container中，这样减少了appendChild的次数，极大提高了性能
2、页面只会渲染文档碎片包裹着的元素，而不会渲染文档碎片

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        requestAnimationFrame(() => {
            // 创建一个文档碎片
            const fragment = document.createDocumentFragment()
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                // 先塞进文档碎片
                fragment.appendChild(div)
            }
            // 一次性appendChild
            container.appendChild(fragment)
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('列表时间')
}

懒加载

为了比较通俗的讲解，咱们启动一个vue前端项目，后端服务还是开着

至于怎么判断blank出现在视图上，可以使用getBoundingClientRect方法获取top属性

IntersectionObserver 性能更好，但是我这里就拿getBoundingClientRect来举例

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
const getList = () => {
  // 跟上面一样的代码
}

const container = ref<HTMLElement>() // container节点
const blank = ref<HTMLElement>() // blank节点
const list = ref<any>([]) // 列表
const page = ref(1) // 当前页数
const limit = 200 // 一页展示
// 最大页数
const maxPage = computed(() => Math.ceil(list.value.length / limit))
// 真实展示的列表
const showList = computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
  // 当前页数与最大页数的比较
  if (page.value > maxPage.value) return
  const clientHeight = container.value?.clientHeight
  const blankTop = blank.value?.getBoundingClientRect().top
  if (clientHeight === blankTop) {
    // blank出现在视图，则当前页数加1
    page.value++
  }
}

onMounted(async () => {
  const res = await getList()
  list.value = res
})
</script>

<template>
  <div id="container" @scroll="handleScroll" ref="container">
    <div class="sunshine" v-for="(item) in showList" :key="item.tid">
      <img :src="item.src" />
      <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</template>

虚拟列表

虚拟列表需要讲解的比较多，在这里我分享一下我的一篇虚拟列表的文章，哈哈我自认为讲的不错吧哈哈哈哈哈哈

结合“康熙选秀”，给大家讲讲“虚拟列表”

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。

如果你想一起学习前端或者摸鱼，那你可以加我，加入我的摸鱼学习群，点击这里 —> 摸鱼沸点

如果你是有其他目的的，别加我，我不想跟你交朋友，我只想简简单单学习前端，不想搞一些有的没的！！！

你会用ES6，那倒是用啊！前端Vue.js__React.js

banyungong — Fri, 14 Jan 2022 06:23:16 GMT

theme: fancy highlight: arta

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

ps：ES5之后的JS语法统称ES6！！！

一、关于取值的吐槽

取值在程序中非常常见，比如从对象obj中取值。

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

吐槽：

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

或者

const f = obj.a + obj.d;
const g = obj.c + obj.e;

改进：

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

反驳

不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。

吐槽

看来你对ES6的解构赋值掌握的还是不够彻底。如果想创建的变量名和对象的属性名不一致，可以这么写：

const {a:a1} = obj;
console.log(a1);// 1

补充

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

二、关于合并数据的吐槽

比如合并两个数组，合并两个对象。

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

吐槽

ES6的扩展运算符是不是忘记了，还有数组的合并不考虑去重吗？

改进

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

三、关于拼接字符串的吐槽

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

吐槽

改进

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

四、关于if中判断条件的吐槽

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

吐槽

ES6中数组实例方法includes会不会使用呢？

改进

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

五、关于列表搜索的吐槽

在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

吐槽

如果是精确搜索不会用ES6中的find吗？性能优化懂么，find方法中找到符合条件的项，就不会继续遍历数组。

改进

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

六、关于扁平化数组的吐槽

一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

吐槽

改进

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。

补充

flat方法不支持IE浏览器。

七、关于获取对象属性值的吐槽

const name = obj && obj.name;

吐槽

ES6中的可选链操作符会使用么？

改进

const name = obj?.name;

八、关于添加对象属性的吐槽

当给对象添加属性时，如果属性名是动态变化的，该怎么处理。

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';

吐槽

为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？

改进

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

九、关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

if(value !== null && value !== undefined && value !== ''){
    //...
}

吐槽

ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？

if((value??'') !== ''){
  //...
}

十、关于异步函数的吐槽

异步函数很常见，经常是用 Promise 来实现。

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

吐槽

如果这样调用异步函数，不怕形成地狱回调啊！

改进

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

补充

但是要做并发请求时，还是要用到Promise.all()。

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

十一、后续

欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。

此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。

如果你还有其它想吐槽的，也非常欢迎在评论中留下你的吐槽。

读完有帮助，不妨关注一下，点个赞支持一下。

「自我检验」熬夜总结50个Vue知识点，全都会你就是神！！！前端面试__Vue.js

banyungong — Fri, 14 Jan 2022 06:23:03 GMT

theme: smartblue

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言

荣耀黄金

1. Vue的优点？Vue的缺点？

优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开

缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长

2. 为什么说Vue是一个渐进式框架？

渐进式：通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以

3. Vue跟React的异同点？

相同点：

1.都使用了虚拟dom
2.组件化开发
3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据)
4.都支持服务端渲染不同点：
1.React的JSX，Vue的template
2.数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty)
3.React单向绑定，Vue双向绑定
4.React的Redux，Vue的Vuex

4. MVVM是什么？和MVC有何区别呢？

MVC

Model(模型)：负责从数据库中取数据
View(视图)：负责展示数据的地方
Controller(控制器)：用户交互的地方，例如点击事件等等
思想：Controller将Model的数据展示在View上

MVVM

VM：也就是View-Model，做了两件事达到了数据的双向绑定一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
思想：实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

区别

Vue是不是MVVM框架？

Vue是MVVM框架，但是不是严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue的ref可以做到这点

5. Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？

1.jQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可
2.在操作DOM频繁的场景里，jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能
3.Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上
4.Vue集成的一些库，大大提高开发效率，比如Vuex，Router等

6. Vue的作者是谁？大声说出它的名字！！！

他的名字就是：鱿鱼西

永恒钻石

7. 为什么data是个函数并且返回一个对象呢？

8. 使用过哪些Vue的修饰符呢？

可以看我这篇文章「百毒不侵」面试官最喜欢问的13种Vue修饰符

9. 使用过哪些Vue的内部指令呢？

10. 组件之间的传值方式有哪些？

父组件传值给子组件，子组件使用props进行接收
子组件传值给父组件，子组件使用$emit+事件对父组件进行传值
组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据
使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C
使用$refs获取组件实例，进而获取数据
使用Vuex进行状态管理
使用eventBus进行跨组件触发事件，进而传递数据
使用provide和inject，官方建议我们不要用这个，我在看ElementUI源码时发现大量使用
使用浏览器本地缓存，例如localStorage

11. 路由有哪些模式呢？又有什么不同呢？

hash模式：通过#号后面的内容的更改，触发hashchange事件，实现路由切换
history模式：通过pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合

12. 如何设置动态class，动态style？

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

13. v-if和v-show有何区别？

1.v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁
2.v-show是通过控制dom元素的css样式来实现显隐，不会销毁
3.频繁或者大数量显隐使用v-show，否则使用v-if

14. computed和watch有何区别？

1.computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作
2.watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
3.简单记就是：一般情况下computed是多对一，watch是一对多

15. Vue的生命周期，讲一讲？

16. 为什么v-if和v-for不建议用在同一标签？

在Vue2中，v-for优先级是高于v-if的，咱们来看例子

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
  }

17. vuex的有哪些属性？用处是什么？

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

至尊星耀

18. 不需要响应式的数据应该怎么处理？

// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
    
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

19. watch有哪些属性，分别有什么用？

当我们监听一个基本数据类型时：

watch: {
    value () {
        // do something
    }
}

当我们监听一个引用数据类型时：

watch: {
    obj: {
       handler () { // 执行回调
           // do something
       },
       deep: true, // 是否进行深度监听
       immediate: true // 是否初始执行handler函数
    }
}

20. 父子组件生命周期顺序

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

21. 对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

原因：Object.defineProperty没有对对象的新属性进行属性劫持
对象新属性无法更新视图：使用Vue.$set(obj, key, value)，组件中this.$set(obj, key, value)
删除属性无法更新视图：使用Vue.$delete(obj, key)，组件中this.$delete(obj, key)

22. 直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？

原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接arr[index] = xxx是无法更新视图的
使用数组的splice方法，arr.splice(index, 1, item)
使用Vue.$set(arr, index, value)

23. 自定义指令

建议看这篇文章8个非常实用的Vue自定义指令

24. 插槽的使用以及原理？

建议看我这篇文章「Vue源码学习」你真的知道插槽Slot是怎么“插”的吗

25. 为什么不建议用index做key，为什么不建议用随机数做key？

举个例子：

<div v-for="(item, index) in list" :key="index">{{item.name}}</div>

list: [
    { name: '小明', id: '123' },
    { name: '小红', id: '124' },
    { name: '小花', id: '125' }
]

渲染为
<div key="0">小明</div>
<div key="1">小红</div>
<div key="2">小花</div>

现在我执行 list.unshift({ name: '小林', id: '122' })

渲染为
<div key="0">小林</div>
<div key="1">小明</div>
<div key="2">小红</div>
<div key="3">小花</div>


新旧对比

<div key="0">小明</div>  <div key="0">小林</div>
<div key="1">小红</div>  <div key="1">小明</div>
<div key="2">小花</div>  <div key="2">小红</div>
                         <div key="3">小花</div>

可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，虽然达到了渲染目的，但是损耗性能

现在我们使用id来做key，渲染为

<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>

现在我执行 list.unshift({ name: '小林', id: '122' })，渲染为

<div key="122">小林</div>
<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>

新旧对比

                           <div key="122">小林</div>
<div key="123">小明</div>  <div key="123">小明</div>
<div key="124">小红</div>  <div key="124">小红</div>
<div key="125">小花</div>  <div key="125">小花</div>

可以看出，原有的三项都不变，只是新增了小林这个人，这才是最理想的结果

用index和用随机数都是同理，随机数每次都在变，做不到专一性，很渣男，也很消耗性能，所以，拒绝渣男，选择老实人

26. 说说nextTick的用处？

我举个例子，在vue中：

this.name = '林三心'
this.age = 18
this.gender = '男'

看懂了上面，那你应该也看得懂下面的例子了吧：

<div ref="testDiv">{{name}}</div>

name: '小林'

this.name = '林三心'
console.log(this.$refs.testDiv.innerHTML) // 这里是啥呢

this.name = '林三心'
this.$nextTick(() => {
    console.log(this.$refs.testDiv.innerHTML) // 林三心
})

27. Vue的SSR是什么？有什么好处？

SSR就是服务端渲染
基于nodejs serve服务环境开发，所有html代码在服务端渲染
数据返回给前端，然后前端进行“激活”，即可成为浏览器识别的html代码
SSR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好

最强王者

28. Vue响应式是怎么实现的？

整体思路是数据劫持+观察者模式

想详细了解过程，建议阅读我的Vue源码解析系列

const { arrayMethods } = require('./array')

class Observer {
    constructor(value) {
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        })
        if(Array.isArray(value)) {
            value.__proto__ = arrayMethods
            this.observeArray(value)
        } else {
            this.walk(value)
        }
    }

    walk(data) {
        let keys = Object.keys(data)
        for(let i = 0; i < keys.length; i++) {
            const key = keys[i]
            const value = data[key]
            defineReactive(data, key, value)
        }
    }

    observeArray(items) {
        for(let i = 0; i < items.length; i++) {
            observe(items[i])
        }
    }
}

function defineReactive(data, key, value) {
    const childOb = observe(value)

    const dep = new Dep()

    Object.defineProperty(data, key, {
        get() {
            console.log('获取值')
            if (Dep.target) {
                dep.depend()

                if (childOb) {
                    childOb.dep.depend()

                    if (Array.isArray(value)) {
                        dependArray(value)
                    }
                }
            }
            return value
        },
        set(newVal) {
            if (newVal === value) return
            observe(newVal)
            value = newVal
            dep.notify()
        }
    })
}

function observe(value) {
    if (Object.prototype.toString.call(value) === '[object Object]' || Array.isArray(value)) {
        return new Observer(value)
    }
}

function dependArray(value) {
    for(let e, i = 0, l = value.length; i < l; i++) {
        e = value[i]

        e && e.__ob__ && e.__ob__.dep.depend()

        if (Array.isArray(e)) {
            dependArray(e)
        }
    }
}

// array.js
const arrayProto = Array.prototype

const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'reverse',
    'sort'
]

methodsToPatch.forEach(method => {
    arrayMethods[method] = function (...args) {
        const result = arrayProto[method].apply(this, args)

        const ob = this.__ob__

        var inserted

        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args
                break;
            case 'splice':
                inserted = args.slice(2)
            default:
                break;
        }

        if (inserted) ob.observeArray(inserted)

        ob.dep.notify()

        return result
    }
})

29. 为什么只对对象劫持，而要对数组进行方法重写？

30. Vue的模板编译原理？

因为这个问题讲起来可能比较长，所以：

建议看我这篇「Vue源码学习(二)」你不知道的-模板编译原理

31. Vue的computed和watch的原理？

因为这个问题讲起来可能比较长，所以：

建议看我这篇「Vue源码学习(四)」立志写一篇人人都看的懂的computed，watch原理

32. Vue.set方法的原理？

function set(target, key, val) {
    // 判断是否是数组
    if (Array.isArray(target)) {
        // 判断谁大谁小
        target.length = Math.max(target.length, key)
        // 执行splice
        target.splice(key, 1, val)
        return val
    }

    const ob = target.__ob__

    // 如果此对象没有不是响应式对象，直接设置并返回
    if (key in target && !(key in target.prototype) || !ob) {
        target[key] = val
        return val
    }

    // 否则，新增属性，并响应式处理
    defineReactive(target, key, val)
    return val
}

33. Vue.delete方法的原理？

function del (target, key) {
    // 判断是否为数组
    if (Array.isArray(target)) {
        // 执行splice
        target.splice(key, 1)
        return
    }

    const ob = target.__ob__

    // 对象本身就没有这个属性，直接返回
    if (!(key in target)) return


    // 否则，删除这个属性
    delete target[key]

    // 判断是否是响应式对象，不是的话，直接返回
    if (!ob) return
    // 是的话，删除后要通知视图更新
    ob.dep.notify()
}

34. nextTick的原理？

let callbacks = []; //回调函数
let pending = false;
function flushCallbacks() {
  pending = false; //把标志还原为false
  // 依次执行回调
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
  }
}
let timerFunc; //先采用微任务并按照优先级优雅降级的方式实现异步刷新
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 主要是监听dom变化 也是一个异步方法
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true,
  });
  timerFunc = () => {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
} else if (typeof setImmediate !== "undefined") {
  // 如果前面都不支持 判断setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 最后降级采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

export function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}

35. key有什么用？说说diff算法吧？

直接看这篇吧：为什么 Vue 中不要用 index 作为 key？（diff 算法详解）

我讲的没他好

冷门的知识点

36. 如果子组件改变props里的数据会发生什么

改变的props数据是基本类型

如果修改的是基本类型，则会报错

props: {
    num: Number,
  }
created() {
    this.num = 999
  }

改变的props数据是引用类型

props: {
    item: {
      default: () => ({}),
    }
  }
created() {
    // 不报错，并且父级数据会跟着变
    this.item.name = 'sanxin';
    
    // 会报错，跟基础类型报错一样
    this.item = 'sss'
  },

37. props怎么自定义验证

props: {
    num: {
      default: 1,
      validator: function (value) {
          // 返回值为false则验证不通过，报错
          return [
            1, 2, 3, 4, 5
          ].indexOf(value) !== -1
    }
    }
  }

38. watch的immediate属性有什么用？

比如平时created时要请求一次数据，并且当搜索值改变，也要请求数据，我们会这么写：

created(){
  this.getList()
},
watch: {
  searchInputValue(){
    this.getList()
  }
}

使用immediate完全可以这么写，当它为true时，会初始执行一次

watch: {
  searchInputValue:{
    handler: 'getList',
    immediate: true
  }
}

39. watch监听一个对象时，如何排除某些属性的监听

下面代码是，params发生改变就重新请求数据，无论是a，b，c，d属性改变

data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

但是如果我只想要a，b改变时重新请求，c，d改变时不重新请求呢？

mounted() {
    Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
      .forEach((_) => {
        this.$watch((vm) => vm.params[_], handler, {
          deep: true,
        });
      });
  },
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

40. 审查元素时发现data-v-xxxxx，这是啥？

这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的’data-v-xxx’标记

41. computed如何实现传参？

// html
<div>{{ total(3) }}

// js
computed: {
    total() {
      return function(n) {
          return n * this.num
         }
    },
  }

42. vue的hook的使用

同一组件中使用

这是我们常用的使用定时器的方式

export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

上面做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：

export default{
  methods:{
    fn(){
      let timer = setInterval(()=>{
        //具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

7.2 父子组件使用

如果子组件需要在mounted时触发父组件的某一个函数，平时都会这么写：

//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

// 子组件
mounted () {
  this.$emit('childMounted')
},

使用hook的话可以更方便：

//父组件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

43. provide和inject是响应式的吗？

// 祖先组件
provide(){
    return {
   // keyName: { name: this.name }, // value 是对象才能实现响应式，也就是引用类型
      keyName: this.changeValue // 通过函数的方式也可以[注意，这里是把函数作为value，而不是this.changeValue()]
   // keyName: 'test' value 如果是基本类型，就无法实现响应式
    }
  },
data(){
  return {
	name:'张三'
}
  },
  methods: {
  	changeValue(){
  		this.name = '改变后的名字-李四'
  	}
  }  
  
  // 后代组件
  inject:['keyName']
  create(){
	console.log(this.keyName) // 改变后的名字-李四
}

44.Vue的el属性和$mount优先级？

比如下面这种情况，Vue会渲染到哪个节点上

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
}).$mount('#ggg')

这是官方的一张图，可以看出el和$mount同时存在时，el优先级 > $mount

45. 动态指令和参数使用过吗？

<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick",
      someProps: someCondition ? "num" : "price"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

46. 相同的路由组件如何重新渲染？

开发人员经常遇到的情况是，多个路由解析为同一个Vue组件。问题是，Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果依然想重新渲染，怎么办呢？可以使用key

<template>
    <router-view :key="$route.path"></router-view>
</template>

47. 自定义v-model

默认情况下，v-model 是 @input 事件侦听器和 :value 属性上的语法糖。但是，你可以在你的Vue组件中指定一个模型属性来定义使用什么事件和value属性——非常棒！

export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}

48. 如何将获取data中某一个数据的初始状态？

在开发中，有时候需要拿初始状态去计算。例如

data() {
    return {
      num: 10
  },
mounted() {
    this.num = 1000
  },
methods: {
    howMuch() {
        // 计算出num增加了多少，那就是1000 - 初始值
        // 可以通过this.$options.data().xxx来获取初始值
        console.log(1000 - this.$options.data().num)
    }
  }

49.为什么不建议v-for和v-if同时存在

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>

上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
  }

50.计算变量时，methods和computed哪个好？

<div>
    <div>{{howMuch1()}}</div>
    <div>{{howMuch2}}</div>
    <div>{{index}}</div>
</div>

data: () {
    return {
         index: 0
       }
     }
methods: {
    howMuch1() {
        return this.num + this.price
    }
  }
computed: {
    howMuch2() {
        return this.num + this.price
    }
  }

computed会好一些，因为computed会有缓存。例如index由0变成1，那么会触发视图更新，这时候methods会重新执行一次，而computed不会，因为computed依赖的两个变量num和price都没变。

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。

如果你想一起学习前端或者摸鱼，那你可以加我，加入我的摸鱼学习群，点击这里 —> 摸鱼沸点

如果你是有其他目的的，别加我，我不想跟你交朋友，我只想简简单单学习前端，不想搞一些有的没的！！！

实现无感刷新token，我是这样做的前端Vue.js

banyungong — Thu, 13 Jan 2022 03:15:00 GMT

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: condensed-night-purple highlight:

原文链接 作者：zz

前言最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点，我频繁的要去登录。

前端：后端，你能不能把token 过期时间设置的长一点。

后端：可以,但是那样做不安全，你可以用更好的方法。

前端：什么方法?

后端：给你刷新token的接口，定时去刷新token

前端：好，让我思考一下

需求当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。实现思路

方法一

后端返回过期时间，前端判断token过期时间,去调用刷新token接口

缺点：需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。

方法二

写个定时器，定时刷新token接口

缺点：浪费资源,消耗性能,不建议采用。

方法三

在响应拦截器中拦截，判断token 返回过期后，调用刷新token接口

实现

axios的基本骨架,利用service.interceptors.response进行拦截

import axios from 'axios'

service.interceptors.response.use(
  response => {
    if (response.data.code === 409) {
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        })
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  })

问题解决

问题一：如何防止多次刷新token

我们通过一个变量isRefreshing 去控制是否在刷新token的状态。

import axios from 'axios'

service.interceptors.response.use(
  response => {
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  })

问题二：同时发起两个或者两个以上的请求时，其他接口怎么解决

当第二个过期的请求进来，token正在刷新，我们先将这个请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新token后再逐个重试清空请求队列。那么如何做到让这个请求处于等待中呢？为了解决这个问题，我们得借助Promise。将请求存进队列中后，同时返回一个Promise，让这个Promise一直处于Pending状态（即不调用resolve），此时这个请求就会一直等啊等，只要我们不执行resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，我们再调用resolve，逐个重试。最终代码：

import axios from 'axios'

// 是否正在刷新的标记
let isRefreshing = false
//重试队列
let requests = []
service.interceptors.response.use(
  response => {
  //约定code 409 token 过期
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        //调用刷新token的接口
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          // 替换token
          setToken(token)
          response.headers.Authorization = `${token}`
           // token 刷新后将数组的方法重新执行
          requests.forEach((cb) => cb(token))
          requests = [] // 重新请求完清空
          return service(response.config)
        }).catch(err => {
        //跳到登录页
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise(resolve => {
          // 用函数形式将 resolve 存入，等待刷新后再执行
          requests.push(token => {
            response.headers.Authorization = `${token}`
            resolve(service(response.config))
          })
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

Vue 团队公开快如闪电的全新脚手架工具 create-vue，未来将替代 Vue-CLI，才300余行代码，学它！前端JavaScript__Vue.js

banyungong — Thu, 13 Jan 2022 03:08:19 GMT

highlight: darcula theme: smartblue

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

1. 前言

大家好，我是若川。欢迎关注我的公众号若川视野，最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，已进行两个多月，大家一起交流学习，共同进步。

美国时间 2021 年 10 月 7 日早晨，Vue 团队等主要贡献者举办了一个 Vue Contributor Days 在线会议，蒋豪群（知乎胖茶，Vue.js 官方团队成员，Vue-CLI 核心开发），在会上公开了create-vue，一个全新的脚手架工具。

create-vue使用npm init vue@next一行命令，就能快如闪电般初始化好基于vite的Vue3项目。

本文就是通过调试和大家一起学习这个300余行的源码。

阅读本文，你将学到：

1. 学会全新的官方脚手架工具 create-vue 的使用和原理
2. 学会使用 VSCode 直接打开 github 项目
3. 学会使用测试用例调试源码
4. 学以致用，为公司初始化项目写脚手架工具。
5. 等等

2. 使用 npm init vue@next 初始化 vue3 项目

create-vue github README上写着，An easy way to start a Vue project。一种简单的初始化vue项目的方式。

npm init vue@next

估计大多数读者，第一反应是这样竟然也可以，这么简单快捷？

忍不住想动手在控制台输出命令，我在终端试过，见下图。

最终cd vue3-project、npm install 、npm run dev打开页面http://localhost:3000。

2.1 npm init && npx

为啥 npm init 也可以直接初始化一个项目，带着疑问，我们翻看 npm 文档。

npm init

npm init 用法：

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

npm init <initializer> 时转换成npx命令：

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

看完文档，我们也就理解了：

# 运行
npm init vue@next
# 相当于
npx create-vue@next

我们可以在这里create-vue，找到一些信息。或者在npm create-vue找到版本等信息。

其中@next是指定版本，通过npm dist-tag ls create-vue命令可以看出，next版本目前对应的是3.0.0-beta.6。

npm dist-tag ls create-vue
- latest: 3.0.0-beta.6
- next: 3.0.0-beta.6

发布时 npm publish --tag next 这种写法指定 tag。默认标签是latest。

可能有读者对 npx 不熟悉，这时找到阮一峰老师博客 npx 介绍、nodejs.cn npx

npx 是一个非常强大的命令，从 npm 的 5.2 版本（发布于 2017 年 7 月）开始可用。

简单说下容易忽略且常用的场景，npx有点类似小程序提出的随用随走。

轻松地运行本地命令

node_modules/.bin/vite -v
# vite/2.6.5 linux-x64 node-v14.16.0

# 等同于
# package.json script: "vite -v"
# npm run vite

npx vite -v
# vite/2.6.5 linux-x64 node-v14.16.0

使用不同的 Node.js 版本运行代码 某些场景下可以临时切换 node 版本，有时比 nvm 包管理方便些。

npx node@14 -v
# v14.18.0

npx -p node@14 node -v 
# v14.18.0

无需安装的命令执行

# 启动本地静态服务
npx http-server

# 无需全局安装
npx @vue/cli create vue-project
# @vue/cli 相比 npm init vue@next npx create-vue@next 很慢。

# 全局安装
npm i -g @vue/cli
vue create vue-project

npm init vue@next （npx create-vue@next）快的原因，主要在于依赖少（能不依赖包就不依赖），源码行数少，目前index.js只有300余行。

3. 配置环境调试源码

3.1 克隆 create-vue 项目

本文仓库地址 create-vue-analysis，求个star~

# 可以直接克隆我的仓库，我的仓库保留的 create-vue 仓库的 git 记录
git clone https://github.com/lxchuan12/create-vue-analysis.git
cd create-vue-analysis/create-vue
npm i

当然不克隆也可以直接用 VSCode 打开我的仓库

顺带说下：我是怎么保留 create-vue 仓库的 git 记录的。

# 在 github 上新建一个仓库 `create-vue-analysis` 克隆下来
git clone https://github.com/lxchuan12/create-vue-analysis.git
cd create-vue-analysis
git subtree add --prefix=create-vue https://github.com/vuejs/create-vue.git main
# 这样就把 create-vue 文件夹克隆到自己的 git 仓库了。且保留的 git 记录

关于更多 git subtree，可以看Git Subtree 简明使用手册

3.2 package.json 分析

// create-vue/package.json
{
  "name": "create-vue",
  "version": "3.0.0-beta.6",
  "description": "An easy way to start a Vue project",
  "type": "module",
  "bin": {
    "create-vue": "outfile.cjs"
  },
}

bin指定可执行脚本。也就是我们可以使用 npx create-vue 的原因。

outfile.cjs 是打包输出的JS文件

{
  "scripts": {
    "build": "esbuild --bundle index.js --format=cjs --platform=node --outfile=outfile.cjs",
    "snapshot": "node snapshot.js",
    "pretest": "run-s build snapshot",
    "test": "node test.js"
  },
}

执行 npm run test 时，会先执行钩子函数 pretest。run-s 是 npm-run-all 提供的命令。run-s build snapshot 命令相当于 npm run build && npm run snapshot。

根据脚本提示，我们来看 snapshot.js 文件。

3.3 生成快照 snapshot.js

因为打包生成的 outfile.cjs 代码有做一些处理，不方便调试，我们可以修改为index.js便于调试。

// 路径 create-vue/snapshot.js
const bin = path.resolve(__dirname, './outfile.cjs')
// 改成 index.js 便于调试
const bin = path.resolve(__dirname, './index.js')

我们可以在for和 createProjectWithFeatureFlags 打上断点。

createProjectWithFeatureFlags其实类似在终端输入如下执行这样的命令

node ./index.js --xxx --xxx --force

function createProjectWithFeatureFlags(flags) {
  const projectName = flags.join('-')
  console.log(`Creating project ${projectName}`)
  const { status } = spawnSync(
    'node',
    [bin, projectName, ...flags.map((flag) => `--${flag}`), '--force'],
    {
      cwd: playgroundDir,
      stdio: ['pipe', 'pipe', 'inherit']
    }
  )

  if (status !== 0) {
    process.exit(status)
  }
}

// 路径 create-vue/snapshot.js
for (const flags of flagCombinations) {
  createProjectWithFeatureFlags(flags)
}

调试：VSCode打开项目，VSCode高版本(1.50+)可以在 create-vue/package.json => scripts => "test": "node test.js"。鼠标悬停在test上会有调试脚本提示，选择调试脚本。如果对调试不熟悉，可以看我之前的文章koa-compose，写的很详细。

// 路径 create-vue/index.js
// 解决办法和nodejs issues
// https://stackoverflow.com/questions/64383909/dirname-is-not-defined-in-node-14-version
// https://github.com/nodejs/help/issues/2907

import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

接着我们调试 index.js 文件，来学习。

4. 调试 index.js 主流程

回顾下上文 npm init vue@next 初始化项目的。

单从初始化项目输出图来看。主要是三个步骤。

1. 输入项目名称，默认值是 vue-project
2. 询问一些配置 渲染模板等
3. 完成创建项目，输出运行提示

async function init() {
  // 省略放在后文详细讲述
}

// async 函数返回的是Promise 可以用 catch 报错
init().catch((e) => {
  console.error(e)
})

4.1 解析命令行参数

// 返回运行当前脚本的工作目录的路径。
const cwd = process.cwd()
// possible options:
// --default
// --typescript / --ts
// --jsx
// --router / --vue-router
// --vuex
// --with-tests / --tests / --cypress
// --force (for force overwriting)
const argv = minimist(process.argv.slice(2), {
    alias: {
        typescript: ['ts'],
        'with-tests': ['tests', 'cypress'],
        router: ['vue-router']
    },
    // all arguments are treated as booleans
    boolean: true
})

minimist

简单说，这个库，就是解析命令行参数的。看例子，我们比较容易看懂传参和解析结果。

$ node example/parse.js -a beep -b boop
{ _: [], a: 'beep', b: 'boop' }

$ node example/parse.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
{ _: [ 'foo', 'bar', 'baz' ],
  x: 3,
  y: 4,
  n: 5,
  a: true,
  b: true,
  c: true,
  beep: 'boop' }

比如

npm init vue@next --vuex --force

4.2 如果设置了 feature flags 跳过 prompts 询问

这种写法方便代码测试等。直接跳过交互式询问，同时也可以省时间。

// if any of the feature flags is set, we would skip the feature prompts
  // use `??` instead of `||` once we drop Node.js 12 support
  const isFeatureFlagsUsed =
    typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) ===
    'boolean'

// 生成目录
  let targetDir = argv._[0]
  // 默认 vue-projects
  const defaultProjectName = !targetDir ? 'vue-project' : targetDir
  // 强制重写文件夹，当同名文件夹存在时
  const forceOverwrite = argv.force

4.3 交互式询问一些配置

如上文npm init vue@next 初始化的图示

输入项目名称
还有是否删除已经存在的同名目录
询问使用需要 JSX Router vuex cypress 等。

let result = {}

  try {
    // Prompts:
    // - Project name:
    //   - whether to overwrite the existing directory or not?
    //   - enter a valid package name for package.json
    // - Project language: JavaScript / TypeScript
    // - Add JSX Support?
    // - Install Vue Router for SPA development?
    // - Install Vuex for state management? (TODO)
    // - Add Cypress for testing?
    result = await prompts(
      [
        {
          name: 'projectName',
          type: targetDir ? null : 'text',
          message: 'Project name:',
          initial: defaultProjectName,
          onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName)
        },
        // 省略若干配置
        {
          name: 'needsTests',
          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
          message: 'Add Cypress for testing?',
          initial: false,
          active: 'Yes',
          inactive: 'No'
        }
      ],
      {
        onCancel: () => {
          throw new Error(red('✖') + ' Operation cancelled')
        }
      }
    ]
    )
  } catch (cancelled) {
    console.log(cancelled.message)
    // 退出当前进程。
    process.exit(1)
  }

4.4 初始化询问用户给到的参数，同时也会给到默认值

// `initial` won't take effect if the prompt type is null
  // so we still have to assign the default values here
  const {
    packageName = toValidPackageName(defaultProjectName),
    shouldOverwrite,
    needsJsx = argv.jsx,
    needsTypeScript = argv.typescript,
    needsRouter = argv.router,
    needsVuex = argv.vuex,
    needsTests = argv.tests
  } = result
  const root = path.join(cwd, targetDir)

  // 如果需要强制重写，清空文件夹

  if (shouldOverwrite) {
    emptyDir(root)
    // 如果不存在文件夹，则创建
  } else if (!fs.existsSync(root)) {
    fs.mkdirSync(root)
  }

  // 脚手架项目目录
  console.log(`\nScaffolding project in ${root}...`)

 // 生成 package.json 文件
  const pkg = { name: packageName, version: '0.0.0' }
  fs.writeFileSync(path.resolve(root, 'package.json'), JSON.stringify(pkg, null, 2))

4.5 根据模板文件生成初始化项目所需文件

  // todo:
  // work around the esbuild issue that `import.meta.url` cannot be correctly transpiled
  // when bundling for node and the format is cjs
  // const templateRoot = new URL('./template', import.meta.url).pathname
  const templateRoot = path.resolve(__dirname, 'template')
  const render = function render(templateName) {
    const templateDir = path.resolve(templateRoot, templateName)
    renderTemplate(templateDir, root)
  }

  // Render base template
  render('base')

   // 添加配置
  // Add configs.
  if (needsJsx) {
    render('config/jsx')
  }
  if (needsRouter) {
    render('config/router')
  }
  if (needsVuex) {
    render('config/vuex')
  }
  if (needsTests) {
    render('config/cypress')
  }
  if (needsTypeScript) {
    render('config/typescript')
  }

4.6 渲染生成代码模板

// Render code template.
  // prettier-ignore
  const codeTemplate =
    (needsTypeScript ? 'typescript-' : '') +
    (needsRouter ? 'router' : 'default')
  render(`code/${codeTemplate}`)

  // Render entry file (main.js/ts).
  if (needsVuex && needsRouter) {
    render('entry/vuex-and-router')
  } else if (needsVuex) {
    render('entry/vuex')
  } else if (needsRouter) {
    render('entry/router')
  } else {
    render('entry/default')
  }

4.7 如果配置了需要 ts

重命名所有的 .js 文件改成 .ts。重命名 jsconfig.json 文件为 tsconfig.json 文件。

jsconfig.json 是VSCode的配置文件，可用于配置跳转等。

把index.html 文件里的 main.js 重命名为 main.ts。

// Cleanup.

if (needsTypeScript) {
    // rename all `.js` files to `.ts`
    // rename jsconfig.json to tsconfig.json
    preOrderDirectoryTraverse(
      root,
      () => {},
      (filepath) => {
        if (filepath.endsWith('.js')) {
          fs.renameSync(filepath, filepath.replace(/\.js$/, '.ts'))
        } else if (path.basename(filepath) === 'jsconfig.json') {
          fs.renameSync(filepath, filepath.replace(/jsconfig\.json$/, 'tsconfig.json'))
        }
      }
    )

    // Rename entry in `index.html`
    const indexHtmlPath = path.resolve(root, 'index.html')
    const indexHtmlContent = fs.readFileSync(indexHtmlPath, 'utf8')
    fs.writeFileSync(indexHtmlPath, indexHtmlContent.replace('src/main.js', 'src/main.ts'))
  }

4.8 配置了不需要测试

因为所有的模板都有测试文件，所以不需要测试时，执行删除 cypress、/__tests__/ 文件夹

  if (!needsTests) {
    // All templates assumes the need of tests.
    // If the user doesn't need it:
    // rm -rf cypress **/__tests__/
    preOrderDirectoryTraverse(
      root,
      (dirpath) => {
        const dirname = path.basename(dirpath)

        if (dirname === 'cypress' || dirname === '__tests__') {
          emptyDir(dirpath)
          fs.rmdirSync(dirpath)
        }
      },
      () => {}
    )
  }

4.9 根据使用的 npm / yarn / pnpm 生成README.md 文件，给出运行项目的提示

// Instructions:
  // Supported package managers: pnpm > yarn > npm
  // Note: until <https://github.com/pnpm/pnpm/issues/3505> is resolved,
  // it is not possible to tell if the command is called by `pnpm init`.
  const packageManager = /pnpm/.test(process.env.npm_execpath)
    ? 'pnpm'
    : /yarn/.test(process.env.npm_execpath)
    ? 'yarn'
    : 'npm'

  // README generation
  fs.writeFileSync(
    path.resolve(root, 'README.md'),
    generateReadme({
      projectName: result.projectName || defaultProjectName,
      packageManager,
      needsTypeScript,
      needsTests
    })
  )

  console.log(`\nDone. Now run:\n`)
  if (root !== cwd) {
    console.log(`  ${bold(green(`cd ${path.relative(cwd, root)}`))}`)
  }
  console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
  console.log(`  ${bold(green(getCommand(packageManager, 'dev')))}`)
  console.log()

5. npm run test => node test.js 测试

// create-vue/test.js
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'

import { spawnSync } from 'child_process'

const __dirname = path.dirname(fileURLToPath(import.meta.url))
const playgroundDir = path.resolve(__dirname, './playground/')

for (const projectName of fs.readdirSync(playgroundDir)) {
  if (projectName.endsWith('with-tests')) {
    console.log(`Running unit tests in ${projectName}`)
    const unitTestResult = spawnSync('pnpm', ['test:unit:ci'], {
      cwd: path.resolve(playgroundDir, projectName),
      stdio: 'inherit',
      shell: true
    })
    if (unitTestResult.status !== 0) {
      throw new Error(`Unit tests failed in ${projectName}`)
    }

    console.log(`Running e2e tests in ${projectName}`)
    const e2eTestResult = spawnSync('pnpm', ['test:e2e:ci'], {
      cwd: path.resolve(playgroundDir, projectName),
      stdio: 'inherit',
      shell: true
    })
    if (e2eTestResult.status !== 0) {
      throw new Error(`E2E tests failed in ${projectName}`)
    }
  }
}

主要对生成快照时生成的在 playground 32个文件夹，进行如下测试。

pnpm test:unit:ci

pnpm test:e2e:ci

6. 总结

我们使用了快如闪电般的npm init vue@next，学习npx命令了。学会了其原理。

npm init vue@next => npx create-vue@next

非常建议读者朋友按照文中方法使用VSCode调试 create-vue 源码。源码中还有很多细节文中由于篇幅有限，未全面展开讲述。

学完本文，可以为自己或者公司创建类似初始化脚手架。

目前版本是3.0.0-beta.6。我们持续关注学习它。

最后欢迎加我微信 ruochuan12 交流，参与源码共读活动，大家一起学习源码，共同进步。

7. 参考资料

发现 create-vue 时打算写文章加入到源码共读计划中，大家一起学习。而源码共读群里小伙伴upupming比我先写完文章。

@upupming vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？

关于 && 交流群

最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，长期交流学习。

遇事不决nextTick，为什么nextTick这么神奇？前端Vue.js

banyungong — Wed, 12 Jan 2022 15:29:56 GMT

场景说明

最近使用Vue全家桶做后台系统的时候，遇到了一个很奇葩的问题：有一个输入框只允许输入数字，当输入其它类型的数据时，输入的内容会被重置为null。为了实现这一功能，使用了一个父组件和子组件。为了方便陈述，这里将业务场景简化，具体代码如下：

// 父组件
<template>
  <Input v-model="form.a" @on-change="onChange"></Input>
</template>
<script type="javascript">
export default {
	data() {
    return {
      form: {
        a: null
      }
    }
  },
  methods: {
    async onChange(value) {
   		if (typeof value !== 'number') {
        // await this.$nextTick()
        this.form.a = null
      }   
    }
  }
}
</script>

// 子组件
<template>
  <input v-model="currentValue" @input="onInput" />
</template>
<script type="javascript">
export default {
	name: 'Input',
	props: {
    value: {
      type: [Number, Null],
      default: null 
    }
  },
	data() {
    return {
      currentValue: null
    }
  },
  methods: {
    onInput(event) {
      const value = event.target.value
      this.$emit('input', value)
      const oldValue = this.value
      if (oldValue === value) return
   		this.$emit('on-change', value)
    }
  },
  watch: {
    value(value, oldValue) {
      this.currentValue = value
    }
  }
}
</script>

将以上代码放到项目中去运行，你会很神奇地发现，在输入框输入字符串’abc’之后，输入框的值并没有被重置为空，而是保持为’abc’没有变化。在将注释的nextTick取消注释以后，输入框的值被重置为空。真的非常神奇。

其实之前有好几次同事也碰到了类似的场景：数据层发生了变化，dom并没有随之响应。在数据层发生变化以后，执行一次nextTick，dom就按照预期地更新了。这样几次以后，我们甚至都调侃：遇事不决nextTick。

代码执行顺序

那么，到底nextTick做了什么呢？这里以上面的代码为例，我们先来理一理我们代码是怎么执行的。具体来说，以上代码执行顺序如下：

form.a初始值为null
用户输入字符串abc
触发input事件，form.a的值改为abc
触发on-change事件，form.a的值改为null
由于form.a的值到这里还是为null
主线程任务执行完毕，检查watch的回调函数是否需要执行。

这个顺序一理，我们就发现了输入框展示abc不置空的原因：原来form.a的值在主线程中间虽然发生了变化，但是最开始到最后始终为null。也就是说，子组件的props的value没有发生变化。自然，watch的回调函数也就不会执行。

但是这样一来，我们就有另外一个问题了：为什么触发input事件，form.a的值改为null的时候，没有触发watch的回调呢？为了说明这一点，我们需要深入Vue源码，看看$emit和watch的回调函数分别是在什么时候执行的。

$emit做了什么？

我们首先看看$emit对应的源码。由于Vue 2.X版本源码是使用flow写的，无形中增加了理解成本。考虑到这一点，我们直接找到Vue的dist包中的vue.js文件，并搜索emit函数

Vue.prototype.$emit = function (event) {
  var vm = this;
  {
    var lowerCaseEvent = event.toLowerCase();
    if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
      tip(
        "Event \"" + lowerCaseEvent + "\" is emitted in component " +
        (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
        "Note that HTML attributes are case-insensitive and you cannot use " +
        "v-on to listen to camelCase events when using in-DOM templates. " +
        "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
      );
    }
  }
  var cbs = vm._events[event];
  if (cbs) {
    cbs = cbs.length > 1 ? toArray(cbs) : cbs;
    var args = toArray(arguments, 1);
    var info = "event handler for \"" + event + "\"";
    for (var i = 0, l = cbs.length; i < l; i++) {
      invokeWithErrorHandling(cbs[i], vm, args, vm, info);
    }
  }
  return vm
};

function invokeWithErrorHandling (
  handler,
  context,
  args,
  vm,
  info
) {
  var res;
  try {
    res = args ? handler.apply(context, args) : handler.call(context);
    if (res && !res._isVue && isPromise(res) && !res._handled) {
      res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
      // issue #9511
      // avoid catch triggering multiple times when nested calls
      res._handled = true;
    }
  } catch (e) {
    handleError(e, vm, info);
  }
  return res
}

源码的内容其实很简单，就是把提前注册（或者说订阅）的函数放到一个数组中，执行$emit函数时就把数组中的函数一一取出并执行。可以看出，这是一个发布-订阅模式的使用。

也就是说，emit的执行是同步的。那么，watch是怎么执行的呢？相比之下，watch的执行会比较繁琐。理解了watch的流程，也就理解了Vue的核心。

首先，在初始化Vue组件时，有一个initWatch函数，我们来看看这个函数做了什么。

function initWatch (vm, watch) {
  for (var key in watch) {
    var handler = watch[key];
    if (Array.isArray(handler)) {
      for (var i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i]);
      }
    } else {
      createWatcher(vm, key, handler);
    }
  }
}

function createWatcher (
  vm,
  expOrFn,
  handler,
  options
) {
  if (isPlainObject(handler)) {
    options = handler;
    handler = handler.handler;
  }
  if (typeof handler === 'string') {
    handler = vm[handler];
  }
  return vm.$watch(expOrFn, handler, options)
}

Vue.prototype.$watch = function (
  expOrFn,
  cb,
  options
) {
  var vm = this;
  if (isPlainObject(cb)) {
    return createWatcher(vm, expOrFn, cb, options)
  }
  options = options || {};
  options.user = true;
  var watcher = new Watcher(vm, expOrFn, cb, options);
  if (options.immediate) {
    try {
      cb.call(vm, watcher.value);
    } catch (error) {
      handleError(error, vm, ("callback for immediate watcher \"" + (watcher.expression) + "\""));
    }
  }
  return function unwatchFn () {
    watcher.teardown();
  }
}

var Watcher = function Watcher (
  vm,
  expOrFn,
  cb,
  options,
  isRenderWatcher
) {
  this.vm = vm;
  if (isRenderWatcher) {
    vm._watcher = this;
  }
  vm._watchers.push(this);
  // options
  if (options) {
    this.deep = !!options.deep;
    this.user = !!options.user;
    this.lazy = !!options.lazy;
    this.sync = !!options.sync;
    this.before = options.before;
  } else {
    this.deep = this.user = this.lazy = this.sync = false;
  }
  this.cb = cb;
  this.id = ++uid$2; // uid for batching
  this.active = true;
  this.dirty = this.lazy; // for lazy watchers
  this.deps = [];
  this.newDeps = [];
  this.depIds = new _Set();
  this.newDepIds = new _Set();
  this.expression = expOrFn.toString();
  // parse expression for getter
  if (typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    this.getter = parsePath(expOrFn);
    if (!this.getter) {
      this.getter = noop;
      warn(
        "Failed watching path: \"" + expOrFn + "\" " +
        'Watcher only accepts simple dot-delimited paths. ' +
        'For full control, use a function instead.',
        vm
      );
    }
  }
  this.value = this.lazy
    ? undefined
    : this.get();
}

function parsePath (path) {
  if (bailRE.test(path)) {
    return
  }
  var segments = path.split('.');
  return function (obj) {
    for (var i = 0; i < segments.length; i++) {
      if (!obj) { return }
      obj = obj[segments[i]];
    }
    return obj
  }
}

Watcher.prototype.get = function get () {
  pushTarget(this);
  var value;
  var vm = this.vm;
  try {
    value = this.getter.call(vm, vm);
  } catch (e) {
    if (this.user) {
      handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value);
    }
    popTarget();
    this.cleanupDeps();
  }
  return value
}

function defineReactive$$1 (
  obj,
  key,
  val,
  customSetter,
  shallow
) {
  var dep = new Dep();

  var property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  var getter = property && property.get;
  var setter = property && property.set;
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key];
  }

  var childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val;
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (customSetter) {
        customSetter();
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) { return }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      dep.notify();
    }
  });
}

var Dep = function Dep () {
  this.id = uid++;
  this.subs = [];
}

Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

Dep.prototype.removeSub = function removeSub (sub) {
  remove(this.subs, sub);
};

Dep.prototype.depend = function depend () {
  if (Dep.target) {
    Dep.target.addDep(this);
  }
};

Dep.prototype.notify = function notify () {
  // stabilize the subscriber list first
  var subs = this.subs.slice();
  if (!config.async) {
    // subs aren't sorted in scheduler if not running async
    // we need to sort them now to make sure they fire in correct
    // order
    subs.sort(function (a, b) { return a.id - b.id; });
  }
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
}

Watcher.prototype.update = function update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true;
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this);
  }
}

Dep.target = null;
var targetStack = [];

function pushTarget (target) {
  targetStack.push(target);
  Dep.target = target;
}

function popTarget () {
  targetStack.pop();
  Dep.target = targetStack[targetStack.length - 1];
}

我们看到，watch相关联的函数接近20个。这么多函数在来回跳的时候，很容易把逻辑弄丢了。这里我们来讲一讲整个流程。

在初始化Vue实例时，执行initWatch，initWatch函数往下走，创建了一个watcher实例。watcher实例执行了getter函数，getter函数读取了data某个属性的值，因此触发了Object.defineProperty中的get函数。get函数执行了dep.depend函数，这个函数用于收集依赖。所谓的依赖其实就是回调函数。在我们说的这个例子中，就是value的watch回调函数。

讲到这里，我们发现watch的回调函数只是在这里进行了注册，还没有执行。那么，watch真正的执行是在哪里呢？我们回到最开始代码的执行顺序来看。在第3步的时候，form.a=abc，这里有一个设置的操作。这个操作触发了Object.defineProperty的set函数，set函数执行了dep.notify函数。执行了update函数，update函数的核心就是queueWatcher函数。为了更好地说明，我们把queueWatcher函数单独列出来看看。

function queueWatcher (watcher) {
  var id = watcher.id;
  if (has[id] == null) {
    has[id] = true;
    if (!flushing) {
      queue.push(watcher);
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      var i = queue.length - 1;
      while (i > index && queue[i].id > watcher.id) {
        i--;
      }
      queue.splice(i + 1, 0, watcher);
    }
    // queue the flush
    if (!waiting) {
      waiting = true;

      if (!config.async) {
        flushSchedulerQueue();
        return
      }
      nextTick(flushSchedulerQueue);
    }
  }
}

function flushSchedulerQueue () {
  currentFlushTimestamp = getNow();
  flushing = true;
  var watcher, id;

  // Sort queue before flush.
  // This ensures that:
  // 1. Components are updated from parent to child. (because parent is always
  //    created before the child)
  // 2. A component's user watchers are run before its render watcher (because
  //    user watchers are created before the render watcher)
  // 3. If a component is destroyed during a parent component's watcher run,
  //    its watchers can be skipped.
  queue.sort(function (a, b) { return a.id - b.id; });

  // do not cache length because more watchers might be pushed
  // as we run existing watchers
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    if (watcher.before) {
      watcher.before();
    }
    id = watcher.id;
    has[id] = null;
    watcher.run();
    // in dev build, check and stop circular updates.
    if (has[id] != null) {
      circular[id] = (circular[id] || 0) + 1;
      if (circular[id] > MAX_UPDATE_COUNT) {
        warn(
          'You may have an infinite update loop ' + (
            watcher.user
              ? ("in watcher with expression \"" + (watcher.expression) + "\"")
              : "in a component render function."
          ),
          watcher.vm
        );
        break
      }
    }
  }

  // keep copies of post queues before resetting state
  var activatedQueue = activatedChildren.slice();
  var updatedQueue = queue.slice();

  resetSchedulerState();

  // call component updated and activated hooks
  callActivatedHooks(activatedQueue);
  callUpdatedHooks(updatedQueue);

  // devtool hook
  /* istanbul ignore if */
  if (devtools && config.devtools) {
    devtools.emit('flush');
  }
}

Watcher.prototype.run = function run () {
  if (this.active) {
    var value = this.get();
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      var oldValue = this.value;
      this.value = value;
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue);
        } catch (e) {
          handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
        }
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
  }
}

function nextTick (cb, ctx) {
  var _resolve;
  callbacks.push(function () {
    if (cb) {
      try {
        cb.call(ctx);
      } catch (e) {
        handleError(e, ctx, 'nextTick');
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });
  if (!pending) {
    pending = true;
    timerFunc();
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(function (resolve) {
      _resolve = resolve;
    })
  }
}

var timerFunc;

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve();
  timerFunc = function () {
    p.then(flushCallbacks);
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) { setTimeout(noop); }
  };
  isUsingMicroTask = true;
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  var counter = 1;
  var observer = new MutationObserver(flushCallbacks);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true
  });
  timerFunc = function () {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
  isUsingMicroTask = true;
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = function () {
    setImmediate(flushCallbacks);
  };
} else {
  // Fallback to setTimeout.
  timerFunc = function () {
    setTimeout(flushCallbacks, 0);
  };
}

在queueWatcher函数中，我们看到了熟悉的面孔：nextTick。我们发现，nextTick就是一个微任务的平稳降级：它将根据所在环境，依次使用Promise、MutationObserver、setImmediate以及setTimeout执行任务。我们看到，执行form.a=abc时，实际上是先注册了一个微任务，在这里我们可以理解为watch回调函数的包裹函数。这个微任务将在主线程任务走完以后执行，因此它将被先挂起。

随后主线程执行了form.a=null，再次触发了setter。由于都是form.a注册的，在推入微任务队列前会去重，避免watch的回调多次执行。到这里，主线程任务执行完成，微任务队列中watcher回调函数的包裹函数被推出执行，由于form.a的值始终都为null，因此不会执行回调函数。

在加入$nextTick函数以后，在form.a=null之前先执行了nextTick函数，nextTick函数执行了watcher的回调函数的包裹函数，此时form.a的值为abc，旧的值和新的值不一样，因此执行了watch回调函数。至此，整个逻辑就理顺了。

后话

没想到，一个简简单单nextTick的使用居然关系到了Vue的核心原理！

面试官：项目中常用的 .env 文件原理是什么？如何实现？前端JavaScript__Vue.js

banyungong — Wed, 12 Jan 2022 15:13:58 GMT

highlight: darcula theme: smartblue

1. 前言

大家好，我是若川。正在参加掘金年度人气作者活动，可以点此帮我投票。为了能帮助到更多对源码感兴趣、想学会看源码、提升自己前端技术能力的同学。我倾力组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与。每周大家一起学习200行左右的源码，已进行5个月。

本文仓库 https://github.com/lxchuan12/dotenv-analysis.git，求个star^_^

源码共读活动每周一期，已进行到18期。于是搜寻各种值得我们学习，且代码行数不多的源码。dotenv 主文件仅118行，非常值得我们学习。

阅读本文，你将学到：

1. 学会 dotenv 原理和实现
2. 学会使用 fs模块 获取文件并解析
3. 等等

2. 环境准备

# 推荐克隆我的项目，保证与文章同步
git clone https://github.com/lxchuan12/dotenv-analysis.git
# npm i -g yarn
cd dotenv-analysis/dotenv && yarn i
# VSCode 直接打开当前项目
# code .
# 我写的例子都在 examples 这个文件夹中，可以启动服务本地查看调试
# 在 dotenv-analysis 目录下
node examples/index.js

# 或者克隆官方项目
git clone https://github.com/motdotla/dotenv.git
# npm i -g yarn
cd dotenv && yarn i
# VSCode 直接打开当前项目
# code .

如果需要对源码进行调试，可以看我的这篇文章：新手向：前端程序员必学基本技能——调试JS代码，这里就不再赘述了。

3. dotenv 的作用

dotenv

Dotenv 是一个零依赖模块，可将 .env 文件中的环境变量加载到 process.env 中。

如果需要使用变量，则配合如下扩展包使用。

dotenv-expand

众所周知，.env 文件在我们项目中非常常见，在 vue-cli 和 create-react-app 中都有使用。

vue-cli .env

create-react-app .env

4. .env 文件使用

我们项目中经常会用到.env 文件写法：

NAME=若川
AGE=18
BLOG=https://lxchuan12.gitee.io
MP_WEIXIN='若川视野'
ACTIVITY=每周一起学200行左右的源码共读活动
WEIXIN=加我微信 ruochuan12 参与

单从这个文件来看，我们可以知道有如下功能需要实现：

读取 .env 文件
解析 .env 文件拆成键值对的对象形式
赋值到 process.env 上
最后返回解析后得到的对象

5. 简单实现

根据分析问题，我们最终可以简单把代码实现如下：

const fs = require('fs');
const path = require('path');

const parse = function parse(src){
    const obj = {};
    // 用换行符 分割
    // 比如
    /**
     * NAME=若川
     * AGE=18
     * MP_WEIXIN=若川视野
     * BLOG=https://lxchuan12.gitee.io
     * ACTIVITY=每周一起学200行左右的源码共读活动
     * WEIXIN=加我微信 ruochuan12 参与
    */
    src.toString().split('\n').forEach(function(line, index){
        // 用等号分割
        const keyValueArr = line.split('=');
        // NAME
        key = keyValueArr[0];
        // 若川
        val = keyValueArr[1] || '';
        obj[key] = val;
    });
    // { NAME: '若川', ... }
    return obj;
}

const config = function(){
    // 读取 node 执行的当前路径下的 .env 文件
    let dotenvPath = path.resolve(process.cwd(), '.env');
    // 按 utf-8 解析文件，得到对象
    // { NAME: '若川', ... }
    const parsed = parse(fs.readFileSync(dotenvPath, 'utf-8'));

    // 键值对形式赋值到 process.env 变量上，原先存在的不赋值
    Object.keys(parsed).forEach(function(key){
        if(!Object.prototype.hasOwnProperty.call(process.env, key)){
            process.env[key] = parsed[key];
        }
    });

    // 返回对象
    return parsed;
};

console.log(config());
console.log(process.env);

// 导出 config parse 函数
module.exports.config = config;
module.exports.parse = parse;

6. 继续完善 config 函数

简版的 config 函数还缺失挺多功能，比如：

可由用户自定义路径
可由用户自定义解析编码规则
添加 debug 模式
完善报错输出，用户写的 env 文件自由度比较大，所以需要容错机制。

根据功能，我们很容易实现以下代码：

function resolveHome (envPath) {
    return envPath[0] === '~' ? path.join(os.homedir(), envPath.slice(1)) : envPath
}

const config = function(options){
    // 读取 node 执行的当前路径下的 .env 文件
    let dotenvPath = path.resolve(process.cwd(), '.env');
    // utf8
    let encoding = 'utf8';
    // debug 模式，输出提示等信息
    let debug = false;
    // 对象
    if (options) {
        if (options.path != null) {
            // 解析路径
            dotenvPath = resolveHome(options.path)
        }
        // 使用配置的编码方式
        if (options.encoding != null) {
            encoding = options.encoding
        }
        // 有配置就设置为 true
        if (options.debug != null) {
            debug = true
        }
    }

    try {
        // 按 utf-8 解析文件，得到对象
        // { NAME: '若川', ... }
        // debug 传递给 parse 函数 便于
        const parsed = parse(fs.readFileSync(dotenvPath, { encoding }), { debug });

        // 键值对形式赋值到 process.env 变量上，原先存在的不赋值
        Object.keys(parsed).forEach(function(key){
            if(!Object.prototype.hasOwnProperty.call(process.env, key)){
                process.env[key] = parsed[key];
            } else if (debug) {
                console.log(`"${key}" is already defined in \`process.env\` and will not be overwritten`);
            }
        });

        // 返回对象
        return parsed;
    }
    catch (e) {
        return { error: e };
    }
};

dotenv 源码中，parse 函数主要是一些正则和单双引号、跨平台等细致处理。这里就暂时不阐述，读者朋友可以查看dotenv 源码。

7. 总结

鉴于文章不宜过长，文章只比较深入的分析了 config 函数。parse 函数目前没有深入分析。

一句话总结 dotenv 库的原理。用 fs.readFileSync 读取 .env 文件，并解析文件为键值对形式的对象，将最终结果对象遍历赋值到 process.env 上。

本文同时也给我们启发：围绕工作常用的技术包和库值得深入学习，做到知其然，知其所以然。

值得一提的是：dotenv 源码使用的是 flow 类型。vue2 源码也是用的 flow。vue3 源码改用 ts了。

最后可以持续关注我@若川。欢迎加我微信 ruochuan12 交流，参与源码共读活动，每周大家一起学习200行左右的源码，共同进步。

vue3保姆级教程Vue.js前端

banyungong — Wed, 12 Jan 2022 15:13:58 GMT

theme: channing-cyan

初学vue3

说来惭愧，vue3都发布了一年左右了，我才来学习vue3，看来我是真的弱鸡，现在的我是站在巨人的肩膀上来学习，刚出来vue3全是英文，看都看不懂，现在起码有中文了，结合了许多大佬的见解写出来的小白通俗易懂vue3理解，写的不好希望大家轻喷

ok，ok同志们，没有什么花里胡哨的开场白，今天我们来了解下vue3.

了解vue3创建方式

首先我们先创建vue3文件，当然这一步和vue2一样，我就不一一描述了哈，懂的都懂。

都创建好了吧，创建好了我们就来讲一讲vite

第一我们要先了解vite是什么，vite是尤雨溪团队开发的新一代的前端构建工具，意图取代webpack，首先我们先来看一看vite有什么优点

无需打包，快速的冷服务器启动
即时热模块更换（HMR，热更新）
真正的按需编译 webpack是一开始是入口文件，然后分析路由，然后模块，最后进行打包，然后告诉你，服务器准备好了（默认8080）

然而vite是什么，它一开始是先告诉你服务器准备完成，然后等你发送HTTP请求，然后是入口文件，Dynamic import（动态导入）code split point（代码分割）如何使用vite呢，大家可以去看官网，也可以看我写的

//要构建一个 Vite + Vue 项目，运行，使用 NPM:
npm init @vitejs/app 项目名
//使用 Yarn:
yarn create @vitejs/app 项目名
你会觉得非常快速的创建了项目，然而它并没有给你下载依赖，你还有进入文件然后
npm install (or yarn)

然后它的打开方式不是 serve 变成了dev Edit components/HelloWorld.vue to test hot module replacement.

编辑components/HelloWorld.vue以测试热模块更换。（也就是热更新更快）

然而我们只是简单了解下，我们现在的重点是vue3，如果以后vite成为主流，我们也可以在回头看看。

现在还是以主流的方式创建并进行讲解

分析vue3

基本了解

当我们创建完成vue3项目后，点击它的main.js，你会发现写法发生了改变

引入的不是vue构造函数，而是createApp工厂函数然而，创建实例对象其实就相当于vue2中的vm，mount（'#app'）就相当于$mount('#app')，并且vue2的写法在vue3不能兼容

现在我们进入App组件，你会发现什么不一样的地方，他没有了根标签，在vue2的时候，我们都是在div根标签里面写东西，所以在vue3里面可以没有根标签

常用组合式API（重点！！！）

setup

setup函数是 Composition API（组合API）的入口

在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用

<script>
 export default {
  name: 'App',
  setup(){
   let name = '流星'
   let age = 18
   //方法
   function say(){
    console.log(`我叫${name},今年${age}岁`)
   }

   //返回一个对象
   return {
    name,
    age,
    say
   }
  }
 }
</script>

当然这不是响应式的写法，然后你们可能会问，为什么没有用this，我们要想一想之前为什么要用this，还不是作用域的问题，然而这次我们都在setup里面，所以不会用到this，而且这里兼容vue2的写法如：data，methods...，并且在vue2中可以读取到vue3里的配置但是vue3里面不能读取到vue2的配置，所以，vue3和vue2不要混用，如果有重名那么优先setup。

ps.如果大家不喜欢return这样的写法的话，可以用vue3新语法糖<script setup>， <script setup>就相当于在编译运行是把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中。具体操作可以看掘金其他大佬

script setup基本使用

上手后才知道，Vue3 的 script setup 语法糖是真的爽

vue3新语法糖——setup script

…

setup还有几个注意点

它比beforeCreate和created这两个生命周期还要快，就是说，setup在beforeCreate,created前，它里面的this打印出来是undefined
setup可以接受两个参数，第一个参数是props,也就是组件传值，第二个参数是context,上下文对象，context里面还有三个很重要的东西attrs，slots,emit，它们就相当于vue2里面的this.$attrs,this.$slots,this.$emit。

通过打印，你可以看到传值，但是会有警告，那是因为我传了两个值，却只接收了一个，要是两个都接收就不会出现警告了这个是因为vue3中要求我们用emits去接收，接收后就不会警告了，但是也可以不理警告直接用使用插槽时，不能使用 slot="XXX",要使用v-slot，不然会报错

父
<template>
  <div class="home">
    <HelloWorld wish="不掉发" wishes="变瘦" @carried="carried">
      <h3>实现插槽1</h3>
      <template v-slot:dome>
        <h4>实现插槽2</h4>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: 'Home',
  components:{
    HelloWorld
  },
  setup(){
    function carried(value){
      alert(`牛呀，都实现了！！！${value}`)
    }
    return {
      carried
    }
  }
}
</script>
-------
子
<template>
  <h1>HelloWorld</h1>
  <h1>{{ wish }}</h1>
  <button @click="dream">点击实现</button>
  <slot></slot>
  <slot name="dome"></slot>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["wish",'wishes'],
  emits:['carried'],
  setup(props,context) {
    console.log(props)
    console.log(context.attrs)
    function dream(){
      context.emit('carried',666)
    }
    return{
      dream
    }
  },
};
</script>

<style scoped></style>

ref与reactive

ref

上方我说到，我们写的不是响应式数据，我们写的只是字符串和数字，那怎么变成响应式数据呢，那就呀引入ref，但是如果我们直接在代码里面修改是修改不了的,不如打印一下name和age，你会发现ref把它们变成了对象并且还是RefImpl的实例对象

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <button @click="say">修改</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'Home',
  setup(){
    let name = ref('燕儿')
    let age = ref(18)
    console.log(name)
    console.log(age)
    //方法
    function say(){
      name='苒苒'
      age=20
    }
    return {
      name,
      age,
      say
    }
  }
}
</script>

所以，在修改的时候要.value去修改，里面还是走的get与set去修改页面其实按道理的话，我们在页面上用的话应该要{{name.value}}显示的，但是因为vue3检测到你是ref对象，它就自动给你.value了

function say(){
  name.value='苒苒'
  age.value=20
}

那么要是我定义的ref是个对象呢，因为我们知道尽管ref后会变成RefImpl的实例对象，所以我们就用XX.value.xx进行修改

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h2>职业：{{job.occupation}}</h2>
    <h2>薪资：{{job.salary}}</h2>
    <button @click="say">修改</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'Home',
  setup(){
    let name = ref('燕儿')
    let age = ref(18)
    let job=ref({
      occupation:'程序员',
      salary:'10k'
    })
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.value.salary='12k'
    }
    return {
      name,
      age,
      job,
      say
    }
  }
}
</script>

但是我们打印job.value,你会发现，它不再是RefImpl实例对象，变成了Proxy实例对象，他只是vue3底层，把对象都变成了Proxy实例对象，对于基本数据类型就是按照Object.defineProperty里面的get和set进行数据劫持然后进行响应式，但是如果是对象类型的话，是用到的Proxy，但是vue3把它封装在新函数reactive里，就相当于，ref中是对象，自动会调用reactive。

reactive

reactive只能定义对象类型的响应式数据，前面说到的ref里是对象的话，会自动调用reactive，把Object转换为Proxy，那我们来打印一下，你会发现就直接变成了Proxy，之前为什么会.value呢，是因为要去获取值，然后通过reactive变成Proxy，但是现在是直接通过reactive变成Proxy，而且它是进行的一个深层次的响应式，也可以进行数组的响应式

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h2>职业：{{job.occupation}}<br>薪资：{{job.salary}}</h2>
    <h3>爱好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'Home',
  setup(){
    let name = ref('燕儿')
    let age = ref(18)
    let job=reactive({
      occupation:'程序员',
      salary:'10k'
    })
    let hobby=reactive(['刷剧','吃鸡','睡觉'])
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.salary='12k'
      hobby[0]='学习'
    }
    return {
      name,
      age,
      job,
      say,
      hobby
    }
  }
}
</script>

有些人可能觉得，哎呀，我记不住，我就用ref，每次就.value可以了，香香香。他喵的，你正常点，要是一个页面就几个数据的话那还好，要是一堆数据，不得把你.value点的冒烟吗？，其实你可以按照之前vue2中data的形式来写，这样你就会觉得reactive香的一批了

<template>
  <div class="home">
    <h1>姓名：{{data.name}}</h1>
    <h1>年龄：{{data.age}}</h1>
    <h2>职业：{{data.job.occupation}}<br>薪资：{{data.job.salary}}</h2>
    <h3>爱好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'Home',
  setup(){
    let data=reactive({
      name:'燕儿',
      age:18,
      job:{
        occupation:'程序员',
        salary:'10k'
      },
      hobby:['刷剧','吃鸡','睡觉']
    })
    //方法
    function say(){
      data.job.salary='12k'
      data.hobby[0]='学习'
    }
    return {
      data,
      say,
    }
  }
}
</script>

怎么样，是不是直接暴露出去个data就好了，这样起码更能理解，不会让人摸不着头脑为什么要.value，是吧

ref与reactive的区别

ref用来定义：基本类型数据。
ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
reactive用来定义：对象或数组类型数据。
reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源代码内部的数据。
reactive定义的数据：操作数据与读取数据：均不需要.value。当然，我之前就说过，ref可以定义对象或数组的，它只是内部自动调用了reactive来转换。

vue3的响应式原理

说到vue3的响应式原理，那我们就不得不提一句vue2的响应式了，（狗都知道的一句）通过Object.defineProperty的get，set来进行数据劫持，修改，从而响应式,但是它有什么缺点呢

由于只有get()、set() 方式，所以只能捕获到属性读取和修改操作，当新增、删除属性时，捕获不到，导致界面也不会更新。
直接通过下标修改数组，界面也不会自动更新。 ok，vue2就聊这么多，什么？你还想听vue2底层？那你就Alt+←，拜拜了您嘞。

对于vue3中的响应式，我们用到的Proxy，当然，我们在vue2里面知道，Proxy是什么，是代理，当然，并不是只用到了它，还有个Window上的内置对象Reflect（反射）

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。

const p=new Proxy(data, {
// 读取属性时调用
    get (target, propName) {
    	return Reflect.get(target, propName)
    },
//修改属性或添加属性时调用
    set (target, propName, value) {
    	return Reflect.set(target, propName, value)
    },
//删除属性时调用
    deleteProperty (target, propName) {
    	return Reflect.deleteProperty(target, propName)
    }
})

computed，watch与watchEffect

computed

在vue3中，把computed变成为组合式API，那么就意味着你要去引入它，代码如下，一个简易的计算就完成了

<template>
  <div class="home">
    姓：<input type="text" v-model="names.familyName"><br>
    名：<input type="text" v-model="names.lastName"><br>
    姓名：{{fullName}}<br>
  </div>
</template>

<script>
import {reactive,computed} from 'vue'
export default {
  name: 'Home',
  setup(){
    let names=reactive({
      familyName:'阿',
      lastName:'斌'
    })
    fullName=computed(()=>{
      return names.familyName+'.'+names.lastName
    })
    return {
      names,
      fullName
    }
  }
}
</script>

要是你去修改计算出来的东西，你知道会发生什么吗？警告的意思是计算出来的东西是一个只读属性。

那要是我们想要修改怎么办呢,那么就要用到computed的终结写法了

<template>
  <div class="home">
    姓：<input type="text" v-model="names.familyName"><br>
    名：<input type="text" v-model="names.lastName"><br>
    姓名：<input type="text" v-model="names.fullName"><br>
  </div>
</template>

<script>
import {reactive,computed} from 'vue'
export default {
  name: 'Home',
  setup(){
    let names=reactive({
      familyName:'阿',
      lastName:'斌'
    })
    names.fullName=computed({
      get(){
        return names.familyName+'.'+names.lastName
      },
      set(value){
        let  nameList=value.split('.')
        names.familyName=nameList[0]
        names.lastName=nameList[1]
      }
    })
    return {
      names
    }
  }
}
</script>

但是，yysy（有一说一），他喵的，我寻思也没有人会去改计算属性吧？如果有，就当我没说

watch

你可能会想到computed都是组合式API，那么watch会不会也是组合式API呢？大胆点，它也是，那么我们就来进行监视

<template>
  <div class="home">
    <h1>当前数字为:{{num}}</h1>
    <button @click="num++">点击数字加一</button>
  </div>
</template>

<script>
import {ref,watch} from 'vue'
export default {
  name: 'Home',
  setup(){
    let num=ref('0')
    watch(num,(newValue,oldValue)=>{
      console.log(`当前数字增加了,${newValue},${oldValue}`)
    })
    return {
      num
    }
  }
}
</script>

当然这是监听ref定义出来的单个响应式数据，要是监听多个数据应该怎么办呢？其实可以用多个watch去进行监听，当然这不是最好的方法，最好的办法其实是监视数组

 watch([num,msg],(newValue,oldValue)=>{
      console.log('当前改变了',newValue,oldValue)
    })

既然我们监听的是数组，那么我们得到的newValue和oldValue也就是数组，那么数组中的第一个就是你监视的第一个参数。

ps.当然之前在vue2中watch不是有什么其他参数吗，vue3中也有,是写在最后的。

watch([num,msg],(newValue,oldValue)=>{
      console.log('当前改变了',newValue,oldValue)
    },{immediate:true,deep:true})

之前我说过，我们现在监听的是监听ref定义出来数据，那么要是我们监听的是reactive

<template>
  <div class="home">
    <h1>当前姓名:{{names.familyName}}</h1>
    <h1>当前年龄:{{names.age}}</h1>
    <h1>当前薪水:{{names.job.salary}}K</h1>
    <button @click="names.familyName+='!'">点击加!</button>
    <button @click="names.age++">点击加一</button>
    <button @click="names.job.salary++">点击薪水加一</button>
  </div>
</template>

<script>
import {reactive,watch} from 'vue'
export default {
  name: 'Home',
  setup(){
    let names=reactive({
      familyName: '鳌',
      age:23,
      job:{
        salary:10
      }
    })
    watch(names,(newValue,oldValue)=>{
      console.log(`names改变了`,newValue,oldValue)
    },{deep:false})
    return {
      names
    }
  }
}
</script>

但是你会发现一个问题，为什么newValue与oldValue一样呢，就很尴尬，都是新的数据，就算你使用ref来定义，还是没有办法监听到oldValue（他喵的，都给你说了ref定义的对象会自动调用reactive）,所以在监视reactive定义的响应式数据时，oldValue无法正确获取,并且你会发现，它是强制开启深度监视（deep:true），并且无法关闭。

然而现在我们监视的是reactive定义的响应式数据的全部属性，是只监听其中的一个属性，那怎么办呢，可能大家会

watch(names.age,(newValue,oldValue)=>{
  console.log(`names改变了`,newValue,oldValue)
})

来进行监视，但是，vue3会警告只能监听reactive定义的或者ref定义的,并且不能监听。那么我们就必须这样写（不会还有人不知道return可以省略吧？不会吧？不会吧？不会那个人就是你吧？）

watch(()=>names.age,(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)
})

那么要是我们监听的是多个属性，那怎么办呢？emmmm，你正常点，我上面都写了监听多个ref定义的响应式数据，你就不会举一反三吗？敲代码很累的好吧！！！他喵的，为了防止你们问多个reactive定义的一个属性，我就只能说和这个是一样的！！！能不能聪明点！！！

watch([()=>names.age,()=>names.familyName],(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)
})

ok，要是我们监听的是深度的属性那要怎么办呢？你会发现我要是只监听第一层是监听不到的，那么我们有两种写法

//第一种
watch(()=> names.job.salary,(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)
})
//第二种
watch(()=> names.job,(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)
},{deep:true})

那么我们就可以这样理解，如果监视的是reactive定义的响应式数据的属性，并且这个属性是对象，那么我们可以开启深度监视

（人都写傻了，写了四千多字了，还没写完…）

watchEffect

watchEffect是vue3的新函数，它是来和watch来抢饭碗的，它和watch是一样的功能，那它有什么优势呢？

自动默认开启了immediate:true
用到了谁就监视谁

watchEffect(()=>{
    const one = num.value
    const tow = person.age
    console.log('watchEffect执行了')
})

其实吧，watchEffect有点像computed，都是里面的值发生了改变就调用一次，但是呢computed要写返回值,而watchEffect不用写返回值。

生命周期

我们先来简单分析下，在vue2中，我们是先new Vue()，然后执行beforeCreate与created接着问你有没有vm.$mount(el)，有，才继续执行，但是在vue3中，它是先全部准备好后然后再进行函数。

其实在vue3中生命周期没有多大的改变，只是改变了改变了销毁前，和销毁，让它更加语义化了 beforeDestroy改名为beforeUnmount,destroyed改名为unmounted

然后在vue3中，beforeCreate与created并没有组合式API中,setup就相当于这两个生命周期函数

在vue3中也可以按照之前的生命周期函数那样写，只是要记得有些函数名称发生了改变

在setup里面应该这样写

beforeCreate===>Not needed*
created=======>Not needed*
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted

hooks函数

Vue3 的 hook函数相当于 vue2 的 mixin, 不同在与 hooks 是函数
Vue3 的 hook函数可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数

其实就是代码的复用，可以用到外部的数据，生命钩子函数…，具体怎么用直接看代码，

//一般都是建一个hooks文件夹，都写在里面
import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
   //鼠标点击坐标
   let point = reactive({
      x:0,
      y:0
   })

   //实现鼠标点击获取坐标的方法
   function savePoint(event){
      point.x = event.pageX
      point.y = event.pageY
      console.log(event.pageX,event.pageY)
   }

   //实现鼠标点击获取坐标的方法的生命周期钩子
   onMounted(()=>{
      window.addEventListener('click',savePoint)
   })

   onBeforeUnmount(()=>{
      window.removeEventListener('click',savePoint)
   })

   return point
}
//在其他地方调用
import useMousePosition from './hooks/useMousePosition'
let point = useMousePosition（）

toRef与toRefs

toRef

toRef翻译过来其实就是把什么变成ref类型的数据，可能大家会觉得没有什么用，毕竟我们之前定义时就已经定义成ref,但是你们想一想，我们在之前是怎么写的

<template>
  <div class="home">
    <h1>当前姓名:{{names.name}}</h1>
    <h1>当前年龄:{{names.age}}</h1>
    <h1>当前薪水:{{names.job.salary}}K</h1>
    <button @click="names.name+='!'">点击加!</button>
    <button @click="names.age++">点击加一</button>
    <button @click="names.job.salary++">点击薪水加一</button>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'Home',
  setup(){
    let names=reactive({
      name:'老谭',
      age:23,
      job:{
        salary:10
      }
    })
    return {
      names
    }
  }
}
</script>

是不是一直都是用到代码name.xx，可能你会说，那我就return的时候不这样写，改成这样

return {
  name:names.name,
  age:names.age,
  salary:names.job.salary
}

但是你要是在页面进行操作时就不是响应式了，为什么呢？那是因为你现在暴露出去的是简简单单的字符串，字符串会有响应式吗？肯定没有呀，但是你要是用到了toRef,那就是把name.xx变为响应式，然后操作它时会自动的去修改name里面的数据

return {
  name:toRef(names,'name'),
  age:toRef(names,'age'),
  salary:toRef(names.job,'salary')
}

但是有的人可能会说那我为什么不用ref去改变？可能大家会发现在页面里也是响应式的，但是我告诉你们，根本用到的不是names里面的数据，而是你单独定义出来的数据，所以要是这样写，无论怎么修改都不会修改到names里的数据

return {
  name:ref(names.name),
  age:ref(names.age),
  salary:ref(names.job.salary),
}

toRefs

聪明一点，toRefs与toRef有什么不同，加了个s,toRef是单个转化为响应式，那toRefs就是多个转化为响应式咯，这样的话就减少代码，不然要是有成千上万个，那你不是要当憨憨闷写吗？（...是结构哈,看不懂就麻溜的alt+←)，当然它只会结构一层，深层里的代码还是要老实的写

 <h1>当前姓名:{{name}}</h1>
 <h1>当前薪水:{{job.salary}}K</h1>
return {
    ...toRefs(names)
}

其他组合式API（了解，我寻思你基本上不会用）

shallowReactive 与 shallowRef

shallowReactive浅层次的响应式,它就是只把第一层的数据变为响应式，深层的数据不会变为响应式,shallowRef如果定义的是基本类型的数据，那么它和ref是一样的不会有什么改变，但是要是定义的是对象类型的数据，那么它就不会进行响应式，之前我们说过如果ref定义的是对象，那么它会自动调用reactive变为Proxy,但是要是用到的是shallowRef那么就不会调用reactive去进行响应式。

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

let person = shallowReactive({
 name:'大理段氏',
 age:10,
 job:{
   salary:20
 }
})
let x = shallowRef({
 y:0
})

readonly 与 shallowReadonly

readonly是接收了一个响应式数据然后重新赋值，返回的数据就不允许修改（深层只读），shallowReadonly却只是浅层只读（第一层只读，其余层可以进行修改）

names=readonly(names)
names=shallowReadonly(names)

toRaw 与 markRaw

toRaw其实就是将一个由reactive生成的响应式对象转为普通对象。如果是ref定义的话，是没有效果的（包括ref定义的对象）如果在后续操作中对数据进行了添加的话，添加的数据为响应式数据，当然要是将数据进行markRaw操作后就不会变为响应式，可能大家会说，不就是和readonly一样吗？那肯定不一样咯，readonly是根本没办法改，但markRaw是不转化为响应式，但是数据还会发生改变。

<template>
  <div class="home">
    <h1>当前姓名:{{names.name}}</h1>
    <h1>当前年龄:{{names.age}}</h1>
    <h1>当前薪水:{{names.job.salary}}K</h1>
    <h1 v-if="names.girlFriend">女朋友：{{names.girlFriend}}</h1>
    <button @click="names.name+='!'">点击加!</button>
    <button @click="addAges">点击加一</button>
    <button @click="addSalary">点击薪水加一</button>
    <button @click="add">添加女朋友</button>
    <button @click="addAge">添加女朋友年龄</button>
  </div>
</template>

<script>
import {reactive,toRaw,markRaw} from 'vue'
export default {
  name: 'Home',
  setup(){
    let names=reactive({
      name:'老伍',
      age:23,
      job:{
        salary:10
      }
    })
    function addAges(){
      names.age++
      console.log(names)
    }
    function addSalary(){
      let fullName=toRaw(names)
      fullName.job.salary++
      console.log(fullName)
    }
    function add(){
      let girlFriend={sex:'女',age:40}
      names.girlFriend=markRaw(girlFriend)
    }
    function addAge(){
      names.girlFriend.age++
      console.log(names.girlFriend.age)
    }
    return {
      names,
      add,
      addAge,
      addAges,
      addSalary
    }
  }
}
</script>

customRef

customRef创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

单纯觉得这个东西的作用只有防抖的作用（要是知道其他的用法可以告知一下我）

<template>
  <input type="text" v-model="keyWord">
  <h3>{{keyWord}}</h3>
</template>

<script>
import {customRef} from 'vue'
export default {
  name: 'App',
  setup() {
    //自定义一个ref——名为：myRef
    function myRef(value,times){
      let time
      return customRef((track,trigger)=>{
        return {
          get(){
            console.log(`有人从myRef中读取数据了，我把${value}给他了`)
            track() //通知Vue追踪value的变化（必须要有，并且必须要在return之前）
            return value
          },
          set(newValue){
            console.log(`有人把myRef中数据改为了：${newValue}`)
            clearTimeout(time)
            time = setTimeout(()=>{
              value = newValue
              trigger() //通知Vue去重新解析模板（必须要有）
            },times)
          },
        }
      })
    }
    let keyWord = myRef('HelloWorld',1000) //使用自定义的ref

    return {keyWord}
  }
}
</script>

给你们说个趣事吧，顺便你们讲一下防抖节流的区别，之前有人在我公司面试的时候哈，给我说对项目进行了防抖节流处理，但是我细问防抖与节流的区别时却支支吾吾的，就很尴尬，然后我们就心照不宣的跳过了这个话题

我是这样理解的

防抖：在第一次触发事件时，不立即执行函数，而是给出一个时间段，如果短时间内大量触发同一事件，只会执行一次函数。

节流：函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活，如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再生效，直至过了这段时间才重新生效。（可以理解为游戏技能冷却期）

如果还是不是很能理解的话去看大佬的一杯茶的时间，带你彻底学会手写防抖节流

provide 与 inject

都知道组件传值吧，在vue2中，如果要在后代组件中使用父组件的数据，那么要一层一层的父子组件传值或者用到vuex，但是现在，无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

//父
import { provide } from 'vue'
setup(){
 let fullname = reactive({name:'阿月',salary:'15k'})
 provide('fullname',fullname) //给自己的后代组件传递数据
 return {...toRefs(fullname)}
}
//后代
import {inject} from 'vue'
setup(){
 let fullname = inject('fullname')
 return {fullname}
}

当然子组件也可以用，但是请记住，父子组件传参是有方法的！！！别瞎搞。

响应式判断

下面是vue3给的一些判断方法

isRef: 检查值是否为一个 ref 对象。

isReactive：检查对象是否是由 reactive 创建的响应式代理。

isReadonly: 检查对象是否是由 readonly 创建的只读代理。

isProxy：检查对象是否是由 reactive 或 readonly 创建的 proxy。

import {ref, reactive,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
export default {
  name:'App',
  setup(){
    let fullName = reactive({name:'小唐',price:'20k'})
    let num = ref(0)
    let fullNames = readonly(fullName)
    console.log(isRef(num))
    console.log(isReactive(fullName))
    console.log(isReadonly(fullNames))
    console.log(isProxy(fullName))
    console.log(isProxy(fullNames))
    console.log(isProxy(num))
    return {}
  }
}

有趣的组件

Fragment

对我而言这个更像是一种概念，它的意思就相当于创建页面时，给了一个虚拟根标签VNode，因为我们知道在vue2里面，我们是有根标签这个概念的，但是到来vue3，它是自动给你创建个虚拟根标签VNode（Fragment）,所以可以不要根标签。好处就是 减少标签层级, 减小内存占用

Teleport

teleport 提供了一种有趣的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。

其实就是可以不考虑你写在什么位置，你可以定义teleport在任意标签里进行定位等（常见操作为模态框），除了body外，还可以写css选择器（id，class）

//id定位
 <teleport to="#app">
            <div class="four">
              <div class="five"></div>
            </div>
 </teleport>
//class定位
 <teleport to=".one">
            <div class="four">
              <div class="five"></div>
            </div>
 </teleport>
//示例
<template>
  <div class="one">
    <h1>第一层</h1>
    <div class="two">
      <h1>第二层</h1>
      <div class="three">
        <h1>第三层</h1>
        <teleport to="body">
            <div class="four">
              <div class="five"></div>
            </div>
        </teleport>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'App',
  setup(){
    return {}
  }
}
</script>

<style lang="less">
.one{
  width: 100%;
  background-color: blue;
  .two{
    margin: 20px;
    background-color: aqua;
    .three{
      margin: 20px;
      background-color: aliceblue;
    }
  }
}
.four{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .five{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    left: 50%;
    background-color:#f60;
  }
}
</style>

打开控制台然后触发事件，观看效果

Suspense

大家都知道在渲染组件之前进行一些异步请求是很常见的事，suspense 组件提供了一个方案，允许将等待过程提升到组件树中处理，而不是在单个组件中。但是！！！在vue3中特别说明了，Suspense 是一个试验性的新特性，其 API 可能随时会发生变动。特此声明，以便社区能够为当前的实现提供反馈。，我直接尬住，以后估计会发生改变，但是你们愿意卷的话可以去看文章vue3的传送门teleport究竟有多神奇？suspense发起异步请求有多简约？，嗯，记得写800字观后感

vue3其他改动

router

可能大家会想到路由跳转的问题，可能大家会以为还是用this.$router.push来进行跳转，但是哦，在vue3中，这些东西是没有的，它是定义了一个vue-router然后引入的useRoute,useRouter 相当于vue2的 this.$route，this.$router,然后其他之前vue2的操作都可以进行

import {useRouter,useRoute} from "vue-router";
setup(){
  const router= useRouter()
  const route= useRoute()
  function fn(){
    this.$route.push('/about')
  }
  onMounted(()=>{
    console.log(route.query.code)
  })
  return{
    fn
  }
}

全局API的转移

2.x 全局 API（`Vue`）	3.x 实例 API (`app`)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

其他改变

移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

移除v-on.native修饰符

移除过滤器（filter）

…

对了有手痒的想实战项目的话可以去看一看大佬的Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦

完结撒花

在这里感谢各位大佬们的vue3讲解，感谢他们的大力支持！！！

感谢蒙古海军对本栏目的大力支持。蒙古海军：‘我们要征服的可是星辰大海！’

感谢素未谋面的女友对本栏目的大力支持。‘躲猫猫是吧？你藏这么隐蔽我怎么去找？快给我留线索！！！立刻马上！’

遇事不决nextTick，为什么nextTick这么神奇？前端Vue.js

banyungong — Wed, 12 Jan 2022 15:13:58 GMT

场景说明

// 父组件
<template>
  <Input v-model="form.a" @on-change="onChange"></Input>
</template>
<script type="javascript">
export default {
	data() {
    return {
      form: {
        a: null
      }
    }
  },
  methods: {
    async onChange(value) {
   		if (typeof value !== 'number') {
        // await this.$nextTick()
        this.form.a = null
      }   
    }
  }
}
</script>

// 子组件
<template>
  <input v-model="currentValue" @input="onInput" />
</template>
<script type="javascript">
export default {
	name: 'Input',
	props: {
    value: {
      type: [Number, Null],
      default: null 
    }
  },
	data() {
    return {
      currentValue: null
    }
  },
  methods: {
    onInput(event) {
      const value = event.target.value
      this.$emit('input', value)
      const oldValue = this.value
      if (oldValue === value) return
   		this.$emit('on-change', value)
    }
  },
  watch: {
    value(value, oldValue) {
      this.currentValue = value
    }
  }
}
</script>

代码执行顺序

那么，到底nextTick做了什么呢？这里以上面的代码为例，我们先来理一理我们代码是怎么执行的。具体来说，以上代码执行顺序如下：

form.a初始值为null
用户输入字符串abc
触发input事件，form.a的值改为abc
触发on-change事件，form.a的值改为null
由于form.a的值到这里还是为null
主线程任务执行完毕，检查watch的回调函数是否需要执行。

$emit做了什么？

Vue.prototype.$emit = function (event) {
  var vm = this;
  {
    var lowerCaseEvent = event.toLowerCase();
    if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
      tip(
        "Event \"" + lowerCaseEvent + "\" is emitted in component " +
        (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
        "Note that HTML attributes are case-insensitive and you cannot use " +
        "v-on to listen to camelCase events when using in-DOM templates. " +
        "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
      );
    }
  }
  var cbs = vm._events[event];
  if (cbs) {
    cbs = cbs.length > 1 ? toArray(cbs) : cbs;
    var args = toArray(arguments, 1);
    var info = "event handler for \"" + event + "\"";
    for (var i = 0, l = cbs.length; i < l; i++) {
      invokeWithErrorHandling(cbs[i], vm, args, vm, info);
    }
  }
  return vm
};

function invokeWithErrorHandling (
  handler,
  context,
  args,
  vm,
  info
) {
  var res;
  try {
    res = args ? handler.apply(context, args) : handler.call(context);
    if (res && !res._isVue && isPromise(res) && !res._handled) {
      res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
      // issue #9511
      // avoid catch triggering multiple times when nested calls
      res._handled = true;
    }
  } catch (e) {
    handleError(e, vm, info);
  }
  return res
}

也就是说，emit的执行是同步的。那么，watch是怎么执行的呢？相比之下，watch的执行会比较繁琐。理解了watch的流程，也就理解了Vue的核心。

首先，在初始化Vue组件时，有一个initWatch函数，我们来看看这个函数做了什么。

function initWatch (vm, watch) {
  for (var key in watch) {
    var handler = watch[key];
    if (Array.isArray(handler)) {
      for (var i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i]);
      }
    } else {
      createWatcher(vm, key, handler);
    }
  }
}

function createWatcher (
  vm,
  expOrFn,
  handler,
  options
) {
  if (isPlainObject(handler)) {
    options = handler;
    handler = handler.handler;
  }
  if (typeof handler === 'string') {
    handler = vm[handler];
  }
  return vm.$watch(expOrFn, handler, options)
}

Vue.prototype.$watch = function (
  expOrFn,
  cb,
  options
) {
  var vm = this;
  if (isPlainObject(cb)) {
    return createWatcher(vm, expOrFn, cb, options)
  }
  options = options || {};
  options.user = true;
  var watcher = new Watcher(vm, expOrFn, cb, options);
  if (options.immediate) {
    try {
      cb.call(vm, watcher.value);
    } catch (error) {
      handleError(error, vm, ("callback for immediate watcher \"" + (watcher.expression) + "\""));
    }
  }
  return function unwatchFn () {
    watcher.teardown();
  }
}

var Watcher = function Watcher (
  vm,
  expOrFn,
  cb,
  options,
  isRenderWatcher
) {
  this.vm = vm;
  if (isRenderWatcher) {
    vm._watcher = this;
  }
  vm._watchers.push(this);
  // options
  if (options) {
    this.deep = !!options.deep;
    this.user = !!options.user;
    this.lazy = !!options.lazy;
    this.sync = !!options.sync;
    this.before = options.before;
  } else {
    this.deep = this.user = this.lazy = this.sync = false;
  }
  this.cb = cb;
  this.id = ++uid$2; // uid for batching
  this.active = true;
  this.dirty = this.lazy; // for lazy watchers
  this.deps = [];
  this.newDeps = [];
  this.depIds = new _Set();
  this.newDepIds = new _Set();
  this.expression = expOrFn.toString();
  // parse expression for getter
  if (typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    this.getter = parsePath(expOrFn);
    if (!this.getter) {
      this.getter = noop;
      warn(
        "Failed watching path: \"" + expOrFn + "\" " +
        'Watcher only accepts simple dot-delimited paths. ' +
        'For full control, use a function instead.',
        vm
      );
    }
  }
  this.value = this.lazy
    ? undefined
    : this.get();
}

function parsePath (path) {
  if (bailRE.test(path)) {
    return
  }
  var segments = path.split('.');
  return function (obj) {
    for (var i = 0; i < segments.length; i++) {
      if (!obj) { return }
      obj = obj[segments[i]];
    }
    return obj
  }
}

Watcher.prototype.get = function get () {
  pushTarget(this);
  var value;
  var vm = this.vm;
  try {
    value = this.getter.call(vm, vm);
  } catch (e) {
    if (this.user) {
      handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value);
    }
    popTarget();
    this.cleanupDeps();
  }
  return value
}

function defineReactive$$1 (
  obj,
  key,
  val,
  customSetter,
  shallow
) {
  var dep = new Dep();

  var property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  var getter = property && property.get;
  var setter = property && property.set;
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key];
  }

  var childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val;
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (customSetter) {
        customSetter();
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) { return }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      dep.notify();
    }
  });
}

var Dep = function Dep () {
  this.id = uid++;
  this.subs = [];
}

Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

Dep.prototype.removeSub = function removeSub (sub) {
  remove(this.subs, sub);
};

Dep.prototype.depend = function depend () {
  if (Dep.target) {
    Dep.target.addDep(this);
  }
};

Dep.prototype.notify = function notify () {
  // stabilize the subscriber list first
  var subs = this.subs.slice();
  if (!config.async) {
    // subs aren't sorted in scheduler if not running async
    // we need to sort them now to make sure they fire in correct
    // order
    subs.sort(function (a, b) { return a.id - b.id; });
  }
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
}

Watcher.prototype.update = function update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true;
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this);
  }
}

Dep.target = null;
var targetStack = [];

function pushTarget (target) {
  targetStack.push(target);
  Dep.target = target;
}

function popTarget () {
  targetStack.pop();
  Dep.target = targetStack[targetStack.length - 1];
}

我们看到，watch相关联的函数接近20个。这么多函数在来回跳的时候，很容易把逻辑弄丢了。这里我们来讲一讲整个流程。

function queueWatcher (watcher) {
  var id = watcher.id;
  if (has[id] == null) {
    has[id] = true;
    if (!flushing) {
      queue.push(watcher);
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      var i = queue.length - 1;
      while (i > index && queue[i].id > watcher.id) {
        i--;
      }
      queue.splice(i + 1, 0, watcher);
    }
    // queue the flush
    if (!waiting) {
      waiting = true;

      if (!config.async) {
        flushSchedulerQueue();
        return
      }
      nextTick(flushSchedulerQueue);
    }
  }
}

function flushSchedulerQueue () {
  currentFlushTimestamp = getNow();
  flushing = true;
  var watcher, id;

  // Sort queue before flush.
  // This ensures that:
  // 1. Components are updated from parent to child. (because parent is always
  //    created before the child)
  // 2. A component's user watchers are run before its render watcher (because
  //    user watchers are created before the render watcher)
  // 3. If a component is destroyed during a parent component's watcher run,
  //    its watchers can be skipped.
  queue.sort(function (a, b) { return a.id - b.id; });

  // do not cache length because more watchers might be pushed
  // as we run existing watchers
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    if (watcher.before) {
      watcher.before();
    }
    id = watcher.id;
    has[id] = null;
    watcher.run();
    // in dev build, check and stop circular updates.
    if (has[id] != null) {
      circular[id] = (circular[id] || 0) + 1;
      if (circular[id] > MAX_UPDATE_COUNT) {
        warn(
          'You may have an infinite update loop ' + (
            watcher.user
              ? ("in watcher with expression \"" + (watcher.expression) + "\"")
              : "in a component render function."
          ),
          watcher.vm
        );
        break
      }
    }
  }

  // keep copies of post queues before resetting state
  var activatedQueue = activatedChildren.slice();
  var updatedQueue = queue.slice();

  resetSchedulerState();

  // call component updated and activated hooks
  callActivatedHooks(activatedQueue);
  callUpdatedHooks(updatedQueue);

  // devtool hook
  /* istanbul ignore if */
  if (devtools && config.devtools) {
    devtools.emit('flush');
  }
}

Watcher.prototype.run = function run () {
  if (this.active) {
    var value = this.get();
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      var oldValue = this.value;
      this.value = value;
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue);
        } catch (e) {
          handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
        }
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
  }
}

function nextTick (cb, ctx) {
  var _resolve;
  callbacks.push(function () {
    if (cb) {
      try {
        cb.call(ctx);
      } catch (e) {
        handleError(e, ctx, 'nextTick');
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });
  if (!pending) {
    pending = true;
    timerFunc();
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(function (resolve) {
      _resolve = resolve;
    })
  }
}

var timerFunc;

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve();
  timerFunc = function () {
    p.then(flushCallbacks);
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) { setTimeout(noop); }
  };
  isUsingMicroTask = true;
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  var counter = 1;
  var observer = new MutationObserver(flushCallbacks);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true
  });
  timerFunc = function () {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
  isUsingMicroTask = true;
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = function () {
    setImmediate(flushCallbacks);
  };
} else {
  // Fallback to setTimeout.
  timerFunc = function () {
    setTimeout(flushCallbacks, 0);
  };
}

后话

没想到，一个简简单单nextTick的使用居然关系到了Vue的核心原理！

教你用three.js写一个炫酷的3D登陆页面three.jsVue.js

banyungong — Wed, 12 Jan 2022 11:15:01 GMT

theme: smartblue

前言：

大家好，我是xx传媒严导（xx这两个字请自行脑补）。

该篇文章用到的主要技术：vue3、three.js

我们先看看成品效果：

高清大图预览（会有些慢）：

座机小图预览：

废话不多说，直接进入正题

Three.js的基础知识

想象一下，在一个虚拟的3D世界中都需要什么？首先，要有一个立体的空间，其次是有光源，最重要的是要有一双眼睛。下面我们就看看在three.js中如何创建一个3D世界吧！

创建一个场景
设置光源
创建相机，设置相机位置和相机镜头的朝向
创建3D渲染器，使用渲染器把创建的场景渲染出来

此时，你就通过three.js创建出了一个可视化的3D页面，很简单是吧！

关于场景

你可以为场景添加背景颜色，或创建一个盒模型（球体、立方体），给盒模型的内部贴上图片，再把相机放在这个盒模型内部以达到模拟场景的效果。盒模型的方式多用于360度全景，比如房屋vr展示

【登陆页面】创建场景的例子：

const scene = new THREE.Scene()
// 在场景中添加雾的效果，Fog参数分别代表‘雾的颜色’、‘开始雾化的视线距离’、刚好雾化至看不见的视线距离’
scene.fog = new THREE.Fog(0x000000, 0, 10000)
// 盒模型的深度
const depth = 1400
// 在场景中添加一个圆球盒模型
// 1.创建一个立方体
const geometry = new THREE.BoxGeometry(1000, 800, depth)
// 2.加载纹理
const texture = new THREE.TextureLoader().load('bg.png')
// 3.创建网格材质（原料）
const material = new THREE.MeshBasicMaterial({map: texture, side: THREE.BackSide})
// 4.生成网格
const mesh = new THREE.Mesh(geometry, material)
// 5.把网格放入场景中
scene.add(mesh)

关于光源

为场景设置光源的颜色、强度，同时还可以设置光源的类型（环境光、点光源、平行光等）、光源所在的位置

【登陆页面】创建光源的例子：

// 1.创建环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
// 2.创建点光源，位于场景右下角
const light_rightBottom = new THREE.PointLight(0x0655fd, 5, 0)
light_rightBottom.position.set(0, 100, -200)
// 3.把光源放入场景中
scene.add(light_rightBottom)
scene.add(ambientLight)

关于相机（重要）

很重要的一步，相机就是你的眼睛。这里还会着重说明一下使用透视相机时可能会遇到的问题，我们最常用到的相机就是正交相机和透视相机了。

正交相机：无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。用于渲染2D场景或者UI元素是非常有用的。如图：

图注解：

图中红色三角锥体是视野的大小
红色锥体连着的第一个面是摄像机能看到的最近位置
从该面通过白色辅助线延伸过去的面是摄像机能看到的最远的位置

透视相机：被用来模拟人眼所看到的景象。它是3D场景的渲染中使用得最普遍的投影模式。如图：

我们在使用透视相机时，可能会遇到这种情况：边缘处的物体会产生一定程度上的形变，原因是：透视相机是鱼眼效果，如果视域越大，边缘变形越大。为了避免边缘变形，可以将fov角度设置小一些，距离拉远一些

关于透视相机的几个参数，new THREE.PerspectiveCamera(fov, width / height, near, far)

fov（field of view） — 摄像机视锥体垂直视野角度
aspect（width / height） — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

/**
 * 为了避免边缘变形，这里将fov角度设置小一些，距离拉远一些
 * 固定视域角度，求需要多少距离才能满足完整的视野画面
 * 15度等于(Math.PI / 12)
 */
const container = document.getElementById('login-three-container')
const width = container.clientWidth
const height = container.clientHeight
const fov = 15
const distance = width / 2 / Math.tan(Math.PI / 12)
const zAxisNumber = Math.floor(distance - depth / 2)
const camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000)
camera.position.set(0, 0, zAxisNumber)
const cameraTarget = new THREE.Vector3(0, 0, 0)
camera.lookAt(cameraTarget)

关于渲染器

用WebGL渲染出你精心制作的场景。它会创建一个canvas进行渲染

【登陆页面】创建渲染器的例子：

// 获取容器dom
const container = document.getElementById('login-three-container')
// 创建webgl渲染器实例
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
// 设置渲染器画布的大小
renderer.setSize(width, height)
// 把画布实例（canvas）放入容器中
container.appendChild(renderer.domElement)
// 渲染器渲染场景
renderer.render(scene, camera)

需要注意，这样创建出来的场景并没有动效，原因是这次渲染的仅仅只是这一帧的画面。为了让场景中的物体能动起来，我们需要使用requestAnimationFrame，所以我们可以写一个loop函数

//动画刷新
const loopAnimate = () => {
    requestAnimationFrame(loopAnimate)
    scene.rotateY(0.001)
    renderer.render(scene, camera)
}
loopAnimate()

完善效果

创建一个左上角的地球

// 加载纹理
const texture = THREE.TextureLoader().load('earth_bg.png')
// 创建网格材质
const material = new THREE.MeshPhongMaterial({map: texture, blendDstAlpha: 1})
// 创建几何球体
const sphereGeometry = new THREE.SphereGeometry(50, 64, 32)
// 生成网格
const sphere = new THREE.Mesh(sphereGeometry, material)
// 为了单独操作球体的运动效果，我们把球体放到一个组中
const Sphere_Group = new THREE.Group()
const Sphere_Group.add(sphere)
// 设置该组（球体）在空间坐标中的位置
const Sphere_Group.position.x = -400
const Sphere_Group.position.y = 200
const Sphere_Group.position.z = -200
// 加入场景
scene.add(Sphere_Group)
// 使球能够自转，需要在loopAnimate中加上
Sphere_Group.rotateY(0.001)

使地球自转

// 渲染星球的自转
const renderSphereRotate = () => {
    if (sphere) {
      Sphere_Group.rotateY(0.001)
    }
}
// 使球能够自转，需要在loopAnimate中加上
const loopAnimate = () => {
    requestAnimationFrame(loopAnimate)
    renderSphereRotate()
    renderer.render(scene, camera)
}

创建星星

// 初始化星星
const initSceneStar = (initZposition: number): any => {
    const geometry = new THREE.BufferGeometry()
    const vertices: number[] = []
    const pointsGeometry: any[] = []
    const textureLoader = new THREE.TextureLoader()
    const sprite1 = textureLoader.load('starflake1.png')
    const sprite2 = textureLoader.load('starflake2.png')
    parameters = [
      [[0.6, 100, 0.75], sprite1, 50],
      [[0, 0, 1], sprite2, 20]
    ]
    // 初始化500个节点
    for (let i = 0; i < 500; i++) {
      /**
       * const x: number = Math.random() * 2 * width - width
       * 等价
       * THREE.MathUtils.randFloatSpread(width)
       * _.random使用的是lodash库中的生成随机数
       */
      const x: number = THREE.MathUtils.randFloatSpread(width)
      const y: number = _.random(0, height / 2)
      const z: number = _.random(-depth / 2, zAxisNumber)
      vertices.push(x, y, z)
    }

    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))

    // 创建2种不同的材质的节点（500 * 2）
    for (let i = 0; i < parameters.length; i++) {
      const color = parameters[i][0]
      const sprite = parameters[i][1]
      const size = parameters[i][2]

      materials[i] = new THREE.PointsMaterial({
        size,
        map: sprite,
        blending: THREE.AdditiveBlending,
        depthTest: true,
        transparent: true
      })
      materials[i].color.setHSL(color[0], color[1], color[2])
      const particles = new THREE.Points(geometry, materials[i])
      particles.rotation.x = Math.random() * 0.2 - 0.15
      particles.rotation.z = Math.random() * 0.2 - 0.15
      particles.rotation.y = Math.random() * 0.2 - 0.15
      particles.position.setZ(initZposition)
      pointsGeometry.push(particles)
      scene.add(particles)
    }
    return pointsGeometry
}
const particles_init_position = -zAxisNumber - depth / 2
let zprogress = particles_init_position
let zprogress_second = particles_init_position * 2
const particles_first = initSceneStar(particles_init_position)
const particles_second = initSceneStar(zprogress_second)

使星星运动

// 渲染星星的运动
const renderStarMove = () => {
    const time = Date.now() * 0.00005
    zprogress += 1
    zprogress_second += 1

    if (zprogress >= zAxisNumber + depth / 2) {
      zprogress = particles_init_position
    } else {
      particles_first.forEach((item) => {
        item.position.setZ(zprogress)
      })
    }
    if (zprogress_second >= zAxisNumber + depth / 2) {
      zprogress_second = particles_init_position
    } else {
      particles_second.forEach((item) => {
        item.position.setZ(zprogress_second)
      })
    }

    for (let i = 0; i < materials.length; i++) {
      const color = parameters[i][0]

      const h = ((360 * (color[0] + time)) % 360) / 360
      materials[i].color.setHSL(color[0], color[1], parseFloat(h.toFixed(2)))
    }
}

星星的运动效果，实际就是沿着z轴从远处不断朝着相机位置移动，直到移出相机的位置时回到起点，不断重复这个操作。我们使用上帝视角，从x轴的左侧看去，效果如下：

创建云以及运动轨迹

// 创建曲线路径
const route = [
    new THREE.Vector3(-width / 10, 0, -depth / 2),
    new THREE.Vector3(-width / 4, height / 8, 0),
    new THREE.Vector3(-width / 4, 0, zAxisNumber)
]
const curve = new THREE.CatmullRomCurve3(route, false)
const tubeGeometry = new THREE.TubeGeometry(curve, 100, 2, 50, false)
const tubeMaterial = new THREE.MeshBasicMaterial({
  opacity: 0,
  transparent: true
})
const tube = new THREE.Mesh(tubeGeometry, tubeMaterial)
// 把创建好的路径加入场景中
scene.add(tube)
// 创建平面几何
const clondGeometry = new THREE.PlaneGeometry(500, 200)
const textureLoader = new THREE.TextureLoader()
const cloudTexture = textureLoader.load('cloud.png')
const clondMaterial = new THREE.MeshBasicMaterial({
  map: cloudTexture,
  blending: THREE.AdditiveBlending,
  depthTest: false,
  transparent: true
})
const cloud = new THREE.Mesh(clondGeometry, clondMaterial)
// 将云加入场景中
scene.add(cloud)

现在有了云和曲线路径，我们需要将二者结合，让云按着路径进行运动

使云运动

let cloudProgress = 0
let scaleSpeed = 0.0006
let maxScale = 1
let startScale = 0
// 初始化云的运动函数
const cloudMove = () => {
  if (startScale < maxScale) {
    startScale += scaleSpeed
    cloud.scale.setScalar(startScale)
  }
  if (cloudProgress > 1) {
    cloudProgress = 0
    startScale = 0
  } else {
    cloudProgress += speed
    if (cloudParameter.curve) {
      const point = curve.getPoint(cloudProgress)
      if (point && point.x) {
        cloud.position.set(point.x, point.y, point.z)
      }
    }
  }

}

完成three.js有关效果

最后，把cloudMove函数放入loopAnimate函数中即可实现云的运动。至此，该登录页所有与three.js有关的部分都介绍完了。剩下的月球地面、登录框、宇航员都是通过定位和层级设置以及css3动画实现的，这里就不进行深入的讨论了。

上面的每个部分的代码在连贯性并不完整，并且同登录页的完整代码也有些许出入。上面更多是为了介绍每个部分的实现方式。完整代码，我放在github上了，每行注释几乎都打上了，希望能给你入坑three.js带来一些帮助，地址：https://github.com/Yanzengyong/threejs-login-view

结语

之前用react+three.js写过一个3D可视化的知识图谱，如果这篇对大家有帮助并且反响好的话，后续我会写一篇如何使用three.js创建一个3D知识图谱。

最后，我认为3D可视化的精髓其实在于设计，有好的素材、好的建模，能让你的页面效果瞬间提升N倍

three.js官网

花60秒给Vue3提的PR，竟然被尤大亲自Merge了~JavaScriptVue.js__开源

banyungong — Wed, 12 Jan 2022 10:38:54 GMT

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

先来一个图镇楼！

终于等到一个活动可以让我分享在去年定下的目标

我要成为Vue3的Contributor

然而，在定下目标60秒后，我就完成了它！

我成为了Vue3的Contributor

我这个PR举世无双的水，说是世界第一水也不过分！

但是不好意思啊，即便是如此水的一个PR，尤大也不得不Merge！

尤大亲手让我成为了Vue3的Contributor

因为我确实修正了源码中一处错误！

哈哈哈，我甚至连那个TODO都没帮忙完成！

Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae we do not raed ervey lteter by itslef but the wrod as a wlohe.

对不对？

那么只要找出开源项目中那些拼错的单词再改掉，岂不是各种顶级项目的Contributor标记拿到手软？

下面我来教大家如何对开源项目进行单词拼写检查

把代码文件copy到Word里

就这的话我是不是要被大家的唾沫淹死？

原理就是这么个简单的原理

有没有帮我们搞效检查项目代码中拼写错误的仓库呢？

有的！

请大家自行前往Github搜索SpellCheck 或点击下方链接

https://github.com/search?q=spellcheck

One more times and Follow me 大声say!

大帅是Vue3的Contributor

弱弱的问大家一句，尤大要是看到这篇文章，还有能力撤销这个Merge吗？

后端一次给你10万条数据，如何优雅展示，到底考察我什么?前端Vue.js__面试

banyungong — Wed, 12 Jan 2022 10:38:54 GMT

theme: smartblue

前言

前置工作

先把前置工作给做好，后面才能进行测试

后端搭建

新建一个server.js文件，简单起个服务，并返回给前端10w条数据，并通过nodemon server.js开启服务

没有安装nodemon的同学可以先全局安装npm i nodemon -g

// server.js

const http = require('http')
const port = 8000;

http.createServer(function (req, res) {
  // 开启Cors
  res.writeHead(200, {
    //设置允许跨域的域名，也可设置*允许所有域名
    'Access-Control-Allow-Origin': '*',
    //跨域允许的请求方法，也可设置*允许所有方法
    "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
    //允许的header类型
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  let list = []
  let num = 0

  // 生成10万条数据的list
  for (let i = 0; i < 100000; i++) {
    num++
    list.push({
      src: 'https://p3-passport.byteacctimg.com/img/user-avatar/d71c38d1682c543b33f8d716b3b734ca~300x300.image',
      text: `我是${num}号嘉宾林三心`,
      tid: num
    })
  }
  res.end(JSON.stringify(list));
}).listen(port, function () {
  console.log('server is listening on port ' + port);
})

前端页面

先新建一个index.html

// index.html

// 样式
<style>
    * {
      padding: 0;
      margin: 0;
    }
    #container {
      height: 100vh;
      overflow: auto;
    }
    .sunshine {
      display: flex;
      padding: 10px;
    }
    img {
      width: 150px;
      height: 150px;
    }
  </style>

// html部分
<body>
  <div id="container">
  </div>
  <script src="./index.js"></script>
</body>

然后新建一个index.js文件，封装一个AJAX函数，用来请求这10w条数据

// index.js

// 请求函数
const getList = () => {
    return new Promise((resolve, reject) => {
        //步骤一:创建异步对象
        var ajax = new XMLHttpRequest();
        //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数
        ajax.open('get', 'http://127.0.0.1:8000');
        //步骤三:发送请求
        ajax.send();
        //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                resolve(JSON.parse(ajax.responseText))
            }
        }
    })
}

// 获取container对象
const container = document.getElementById('container')

直接渲染

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    list.forEach(item => {
        const div = document.createElement('div')
        div.className = 'sunshine'
        div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
        container.appendChild(div)
    })
    console.timeEnd('列表时间')
}
renderList()

setTimeout分页渲染

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        setTimeout(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        }, 0)
    }
    render(page)
    console.timeEnd('列表时间')
}

requestAnimationFrame

使用requestAnimationFrame代替setTimeout，减少了重排的次数，极大提高了性能，建议大家在渲染方面多使用requestAnimationFrame

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        // 使用requestAnimationFrame代替setTimeout
        requestAnimationFrame(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('列表时间')
}

文档碎片 + requestAnimationFrame

文档碎片的好处

1、之前都是每次创建一个div标签就appendChild一次，但是有了文档碎片可以先把1页的div标签先放进文档碎片中，然后一次性appendChild到container中，这样减少了appendChild的次数，极大提高了性能
2、页面只会渲染文档碎片包裹着的元素，而不会渲染文档碎片

const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        requestAnimationFrame(() => {
            // 创建一个文档碎片
            const fragment = document.createDocumentFragment()
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                // 先塞进文档碎片
                fragment.appendChild(div)
            }
            // 一次性appendChild
            container.appendChild(fragment)
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('列表时间')
}

懒加载

为了比较通俗的讲解，咱们启动一个vue前端项目，后端服务还是开着

至于怎么判断blank出现在视图上，可以使用getBoundingClientRect方法获取top属性

IntersectionObserver 性能更好，但是我这里就拿getBoundingClientRect来举例

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
const getList = () => {
  // 跟上面一样的代码
}

const container = ref<HTMLElement>() // container节点
const blank = ref<HTMLElement>() // blank节点
const list = ref<any>([]) // 列表
const page = ref(1) // 当前页数
const limit = 200 // 一页展示
// 最大页数
const maxPage = computed(() => Math.ceil(list.value.length / limit))
// 真实展示的列表
const showList = computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
  // 当前页数与最大页数的比较
  if (page.value > maxPage.value) return
  const clientHeight = container.value?.clientHeight
  const blankTop = blank.value?.getBoundingClientRect().top
  if (clientHeight === blankTop) {
    // blank出现在视图，则当前页数加1
    page.value++
  }
}

onMounted(async () => {
  const res = await getList()
  list.value = res
})
</script>

<template>
  <div id="container" @scroll="handleScroll" ref="container">
    <div class="sunshine" v-for="(item) in showList" :key="item.tid">
      <img :src="item.src" />
      <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</template>

虚拟列表

虚拟列表需要讲解的比较多，在这里我分享一下我的一篇虚拟列表的文章，哈哈我自认为讲的不错吧哈哈哈哈哈哈

结合“康熙选秀”，给大家讲讲“虚拟列表”

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。

如果你想一起学习前端或者摸鱼，那你可以加我，加入我的摸鱼学习群，点击这里 —> 摸鱼沸点

如果你是有其他目的的，别加我，我不想跟你交朋友，我只想简简单单学习前端，不想搞一些有的没的！！！

研究大佬写的倒计时组件(Vue)，学到了不少东西Vue.js前端

banyungong — Wed, 12 Jan 2022 10:38:54 GMT

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。

一、前言

入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目。

由于是一起开发，当然不会放过阅读大佬的代码的机会。

因为我的页面中需要使用到倒计时功能，发现大佬的已经写了个现成的倒计时组件，于是直接就拿过来用了。

传个参数就实现了功能的感觉真是太棒了。项目完成后，就膜拜了一下大佬的倒计时组件的代码。真是让我学到了不少。列举如下：

计时器为什么要用setTimeout而不用setInterval
为什么不直接将剩余时间-1。
如何将所需要的时间返回出去（有可能我只需要分钟和秒数，那就只返回分钟和秒数，也有可能我全都要）。
不确定接口返回的是剩余时间还是截止日期，该怎么同时兼容这两种情况。
不确定接口返回的时间是秒还是毫秒单位。

好了，你可能不太理解这些问题，但是没关系，看完下面的解释，相信你会豁然开朗。

二、开始手操

1. 先创建一个vue组件

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
   
  }),
  props: {
    
  },
};
</script>
<style lang='scss' scoped>

</style>

2. 实现基本的倒计时组件

接下来，假设接口获得的是一个剩余时间。

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
};
</script>
<style lang='scss' scoped>

</style>

我们获得duration之后就可以开始倒计时了

<template>
  <div class="_base-count-down">
  </div>
</template>
<script>

export default {
  data: () => ({
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  // 新增代码：
  mounted() {
    this.countDown();
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
  }
};
</script>
<style lang='scss' scoped>

</style>

在这里创建了一个countDown方法，表示开始倒计时的意思，已进入页面就开始执行countdown方法。

countDown方法调用了getTime方法，getTime需要传入duration这个参数，也就是我们获得的剩余时间。

现在来实现一下这个方法。

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
    // 新增代码：
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        this.getTime(duration - 1);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

durationFormatter是一个将duration转化成天数，小时，分钟，秒数的方法，很简单，可以看下它的具体实现。

durationFormatter(time) {
  if (!time) return { ss: 0 };
  let t = time;
  const ss = t % 60;
  t = (t - ss) / 60;
  if (t < 1) return { ss };
  const mm = t % 60;
  t = (t - mm) / 60;
  if (t < 1) return { mm, ss };
  const hh = t % 24;
  t = (t - hh) / 24;
  if (t < 1) return { hh, mm, ss };
  const dd = t;
  return { dd, hh, mm, ss };
},

好了，问题开始来了！！

3. 为什么要用setTimeout来模拟setInterval的行为？

这里用setInerval不是更方便吗？

setTimeout(function(){··· }, n); // n毫秒后执行function

setInterval(function(){··· }, n); // 每隔n毫秒执行一次function

可以看看setInterval有什么缺点：

再次强调，定时器指定的时间间隔，表示的是何时将定时器的代码添加到消息队列，而不是何时执行代码。所以真正何时执行代码的时间是不能保证的，取决于何时被主线程的事件循环取到，并执行。

setInterval(function, N)  
//即：每隔N秒把function事件推到消息队列中

综上所述，setInterval有两个缺点：

使用setInterval时，某些间隔会被跳过；
可能多个定时器会连续执行；

因而我们一般用setTimeout模拟setInterval，来规避掉上面的缺点。

4. 为什么要clearTimeout(this.timer)

第二问：为什么要有this.timer && clearTimeout(this.timer);这一句？

假设一个场景：

如图所示，在倒计时的父组件中，有两个按钮，点击活动一就会传入活动一的剩余时间，点击活动二，就会传入活动二的时间。

我们来监听duration，如果发现duration变化，说明新的时间time传入组件，这时就要重新调用this.countDown()。

代码如下：

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  // 新增代码：
  watch: {
    duration() {
      this.countDown();
    }
  },
  methods: {
    countDown() {
      this.getTime(this.duration);
    },
    durationFormatter(){...}
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        this.getTime(duration - 1);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

好了，但是并没有解释上面提出的那个问题：为什么要有this.timer && clearTimeout(this.timer);这一句？

这就是为什么要添加上this.timer && clearTimeout(this.timer);这一句的原因了。就是要把上一个setTimeout清除掉。

5. 使用 diffTime

这是怎么回事？

出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停待用户回到浏览器时, 才会重新激活定时任务

说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异。

所以我们需要改写一下getTime方法。

<template>
  <div class="_base-count-down">
    还剩{{day}}天{{hours}}:{{mins}}:{{seconds}}
  </div>
</template>
<script>

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
    curTime: 0,// 新增代码：
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  
  watch: {
    duration() {
      this.countDown();
    }
  },
  methods: {
    countDown() {
      // 新增代码：
      this.curTime = Date.now();
      this.getTime(this.duration);
    },
    durationFormatter(){...}
    getTime(duration) {
      this.timer && clearTimeout(this.timer);
      if (duration < 0) {
        return;
      }
      const { dd, hh, mm, ss } = this.durationFormatter(duration);
      this.days = dd || 0;
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        // 新增代码：
        const now = Date.now();
        const diffTime = Math.floor((now - this.curTime) / 1000);
        this.curTime = now;
        this.getTime(duration - diffTime);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>

</style>

可以看到，我们在三个位置添加了新的代码。

首先在data了添加了curTime这个变量，然后在执行countDown的时候给curTime赋值Date.now()，也就是当前的时刻，也就是显示在页面上的那个时刻。

然后看修改的第三处代码。可以看到是将-1改成了-diffTime。

now 是 setTimeout的回调函数执行的时候的那个时刻。

可能你还是不太能理解diffTime。举个例子：

你打开了这个倒计时页面，于是执行了countDown，也就是说要执行getTime这个方法了。也就是会马上执行下列的代码。

this.days = dd || 0;
this.hours = hh || 0;
this.mins = mm || 0;
this.seconds = ss || 0;

执行完这些代码页面上就会出现剩余时间。

而this.curTime = Date.now(); 就记录下了此刻的时间点。

然后一秒后执行setTimeout里的回调函数：

const now = Date.now(); 记录当前这个setTimeout的回调函数执行的时间点。

然后this.curTime = now; 将curTime的值变成当前这个setTimeout的回调函数执行的时间点。

this.getTime(duration - diffTime); 其实就是this.getTime(duration - 1);

然后又执行getTime，就会重新执行下面的代码，有渲染了新的剩余时间。

this.days = dd || 0;
this.hours = hh || 0;
this.mins = mm || 0;
this.seconds = ss || 0;

这时const now = Date.now(); 记录当前这个setTimeout的回调函数执行的时间点。

而curTime是上一个setTimeout的回调函数执行的时间。

所以const diffTime = Math.floor((now - this.curTime) / 1000);实际上，diffTime的值就是5秒。

因而this.getTime(duration - diffTime); 其实就是this.getTime(duration - 5);

这样就完美解决了因为浏览器切到后台，导致剩余时间不变的问题。

6. 添加新功能：可以传入到期时间。

之前是只能传入剩余时间的，现在希望也支持传入到期时间。

只需要改动一下duration就好了。

  computed: {
    duration() {
      if (this.end) {
        let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;
        end -= Date.now();
        return end;
      }
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },

判断传入的end的长度是否大于13来判断是秒还是毫秒。轻松！

7. 添加新功能：可以选择要显示的内容，例如只显示秒，或者只显示小时。

只需要改动一下html：

<template>
  <div class="_base-count-down no-rtl">
    <div class="content">
      <slot v-bind="{
        d: days, h: hours, m: mins, s: seconds,
        hh: `00${hours}`.slice(-2),
        mm: `00${mins}`.slice(-2),
        ss: `00${seconds}`.slice(-2),
      }"></slot>
    </div>
  </div>
</template>

很巧妙有没有，只需要用插槽，就把倒计时组件，也就是把子组件的值传递给父组件了。

看看父组件是怎么使用这个组件的。

<base-counter v-slot="timeObj" :time="countDown">
  <div class="count-down">
    <div class="icon"></div>
    {{timeObj.d}}天{{timeObj.hh}}小时{{timeObj.mm}}分钟{{timeObj.ss}}秒
  </div>
</base-counter>

看，如此巧妙又简单。

var StartMinute = startDate.getMinutes().toString().length >= 2 ? startDate.getMinutes() : '0' + startDate.getHours();

而00${hours}.slice(-2) 则不用判断，先补上0再说，然后再从后面往前截取两位。

到此。

一个完美的倒计时组件就完成了。

三、学习总结

明白了setInterval的缺点以及用setTimeout代替setInterval。
学到了“+”，操作，不管三七二十一，将接口得到的长串数字转化为数字保平安。
利用clearTimeout来清除掉之前的计时器，以防止造成影响。
学会使用v-slot来子传父传值
学会一个倒计时组件，为了以后方便cv操作。把组件完整代码贴上：

<template>
  <div class="_base-count-down no-rtl">
    <div class="content">
      <slot v-bind="{
        d: days, h: hours, m: mins, s: seconds,
        hh: `00${hours}`.slice(-2),
        mm: `00${mins}`.slice(-2),
        ss: `00${seconds}`.slice(-2),
      }"></slot>
    </div>
  </div>
</template>
<script>
/* eslint-disable object-curly-newline */

export default {
  data: () => ({
    days: '0',
    hours: '00',
    mins: '00',
    seconds: '00',
    timer: null,
    curTime: 0
  }),
  props: {
    time: {
      type: [Number, String],
      default: 0
    },
    refreshCounter: {
      type: [Number, String],
      default: 0
    },
    end: {
      type: [Number, String],
      default: 0
    },
    isMiniSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      if (this.end) {
        let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;
        end -= Date.now();
        return end;
      }
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      return time;
    }
  },
  mounted() {
    this.countDown();
  },
  watch: {
    duration() {
      this.countDown();
    },
    refreshCounter() {
      this.countDown();
    }
  },
  methods: {
    durationFormatter(time) {
      if (!time) return { ss: 0 };
      let t = time;
      const ss = t % 60;
      t = (t - ss) / 60;
      if (t < 1) return { ss };
      const mm = t % 60;
      t = (t - mm) / 60;
      if (t < 1) return { mm, ss };
      const hh = t % 24;
      t = (t - hh) / 24;
      if (t < 1) return { hh, mm, ss };
      const dd = t;
      return { dd, hh, mm, ss };
    },
    countDown() {
      // eslint-disable-next-line no-unused-expressions
      this.curTime = Date.now();
      this.getTime(this.duration);
    },
    getTime(time) {
      // eslint-disable-next-line no-unused-expressions
      this.timer && clearTimeout(this.timer);
      if (time < 0) {
        return;
      }
      // eslint-disable-next-line object-curly-newline
      const { dd, hh, mm, ss } = this.durationFormatter(time);
      this.days = dd || 0;
      // this.hours = `00${hh || ''}`.slice(-2);
      // this.mins = `00${mm || ''}`.slice(-2);
      // this.seconds = `00${ss || ''}`.slice(-2);
      this.hours = hh || 0;
      this.mins = mm || 0;
      this.seconds = ss || 0;
      this.timer = setTimeout(() => {
        const now = Date.now();
        const diffTime = Math.floor((now - this.curTime) / 1000);
        const step = diffTime > 1 ? diffTime : 1; // 页面退到后台的时候不会计时，对比时间差，大于1s的重置倒计时
        this.curTime = now;
        this.getTime(time - step);
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>
@import '~@assets/css/common.scss';

._base-count-down {
  color: #fff;
  text-align: left;
  position: relative;
  .content {
    width: auto;
    display: flex;
    align-items: center;
  }
  span {
    display: inline-block;
  }
  .section {
    position: relative;
  }
}
</style>

你学到了什么，欢迎补充！！

欢迎大家留言讨论，祝工作顺利、生活愉快！

我是bigo前端，下期见。

Vue3.2发布了，我激动了，实在学不动了！Vue.jsVuex

banyungong — Wed, 12 Jan 2022 10:38:54 GMT

什么？VUE3.2 发布了？

前两天一早收到尤大微博推送，Vue 3.2 发布了！好家伙，上个版本还没玩儿透，这新版本就来了。评论区也是一片哀嚎

但也正如评论区所言，很难不支持。让我们看看这次更新了点儿什么。

两个新功能已经从实验状态毕业了

<script setup> 与 <style> v-bind。

-----------------------------华尔兹分割----------------------------

第一个：`<script setup>` 正式毕业

从一开始学习vue3就注意到了实验性的<script setup>。因为简洁的写法受到许多人追捧（写过setup(){return{}} 的人都知道），甚至有人说这才是vue3的完全形态。看了更新描述，emmm…官方吐槽最为致命。

<script setup> 是一种编译时语法糖，可在 SFC 内使用 Composition API 时**极大地改善工作效率。

第二个：新增`<style> v-bind`

而<style> v-bind呢，简单地来说就是可以在<style>内使用组件定义的动态值。官方给出了例子：

import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>

因为vue中文官网暂时没有此次的更新内容，需要的同学可能要到外网啃啃英文文档了。

文档地址：https://v3.vuejs.org/api/sfc-script-setup.html

第三个：新增 defineCustomElement方法

Vue 3.2 引入了一个新的 defineCustomElement 方法，可以使用 Vue 组件 API 轻松创建原生自定义元素：

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

第四个：性能改进

此处有很大篇幅讲述3.2版本的性能升级，其中提到了新的指令v-memo，简单来说这个指令会记住模板树的一部分，不仅跳过虚拟 DOM 差异，而且完全跳过新 VNode 的创建。可用于复杂的大型页面。

第五个：服务器渲染

最后提到了服务端渲染与新的Effect Scope API。有兴趣的同学可以仔细看一看更新文档。https://blog.vuejs.org/posts/vue-3.2.html。

第6个：1024Lab 再说点儿

相信很多同学已经上手开始使用<scripte setup>了。在文档中可以看到，

defineProps、defineEmits、defineExpose、withDefaults***属于***compiler macro，编译器宏。文档中也说到：

They do not need to be imported, and are compiled away when is processed

他们不需要引入，会在编译的时候处理掉。

然而不引入你用的时候就会报错。

<script setup lang="ts">
const props = defineProps<{
  value?: number;
}>();

const emit = defineEmits<{
  (e: 'update:value', value: number): void;
}>();
</script>

首先eslint会报错：

ESLint: ‘defineEmits’ is not defined.(no-undef)

此时你需要更改eslint-plugin-vue的配置

//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
module.exports = {
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  }
}

然后可能编译后浏览器控制台会报错

defineEmits is not defined

你可能会发现defineEmits等并没有在编译的时候处理掉，通过浏览器看源代码defineEmits还在，且画着红色波浪线。此时你可能需要查看package.json中各个包的版本以及vite的版本2.4.x，更新后重试，此时编译出来的代码应该是这样：

const _sfc_main = _defineComponent({
  props: {
    value: { type: Number, required: false }
  },
  emits: ["update:value"],
  setup(__props, { expose, emit }) {}
 })

第7点：最后让我吐槽一下下

尤大在微博上提到的Volar是一款vscode的插件，这让webstorm党…哭惨了…

但是Vue 3.2 + script setup + typescript + volar 真香！真的香！

SmartAdmin2.0 也在用最新的 <script setup>重构，真香~

SmartAdmin: https://github.com/1024-lab/smart-admin

Element-UI 奇淫技巧第二弹！提升开发效率，延长摸鱼时间~Element前端

banyungong — Wed, 12 Jan 2022 10:38:54 GMT

theme: cyanosis highlight: atom-one-light

主题样式修改

曾经为了修改组件风格，一个项目用了上百个样式穿透，后来才发现定制一个主题就够了！

第一步，在官网的主题页面，修改背景色、字体颜色及边框颜色

第二步，下载主题

第三步，用下载的css文件替换掉默认的css文件

效果如下：

el-backtop 回到顶部组件

有时候页面很长，我们需要一个回到顶部的按钮，推荐大家使用 el-backtop，自带过渡效果。

代码如下：

<template>
  <div class="container">
    <div class="box">Scroll down to see the bottom-right button.</div>
    <el-backtop target=".container">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow-x: hidden;
  .box {
    padding: 20px;
    height: 1500px;
  }
}
</style>

注意：需要将 body 的 margin 设置为 0，不然会出现两个滚动条。

el-form-item label宽度自适应

通常我们是给 label 设置一个固定宽度，但这完全限制了 UI 的发挥，如何让 label 宽度自适应呢？答案是给控件设置一个固定宽度。

代码如下：

<template>
  <el-form>
    <el-form-item label="教师">
      <el-input v-model="form.teacher" style="width: 625px;"></el-input>
    </el-form-item>
    <el-form-item label="请选择在线教学平台名称">
      <el-select v-model="form.platform" style="width: 500px;">
        <el-option label="平台一" value="1"></el-option>
        <el-option label="平台二" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        teacher: '',
        platform: ''
      }
    }
  }
}
</script>

el-form-item 循环校验

有时候表单项是一个循环的列表，需要对每一项进行校验。

代码如下：

<template>
  <div>
    <el-form :model="form" label-width="100px" ref="form">
      <el-form-item
        v-for="(item, index) in form.list"
        :key="index"
        :label="'评价项目' + (index + 1)"
        :prop="'list.' + index + '.evaluateName'"
        :rules="rules.evaluateName"
      >
        <el-input v-model="item.evaluateName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          },
          {
            evaluateName: ''
          }
        ]
      },
      rules: {
        evaluateName: [
          {
            required: true,
            message: '请输入评价项目',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-form-item 表单嵌套表格校验

如果在表单里嵌套表格，那么如何对表格里面的控件进行校验呢？

代码如下：

<template>
  <el-form :model="form" ref="form">
    <el-table border :data="form.list" style="margin-bottom: 10px;">
      <el-table-column
        label="评价项目"
        prop="evaluateName"
        align="center"
      ></el-table-column>
      <el-table-column label="评价等级" align="center">
        <template slot-scope="scope">
          <el-form-item
            :prop="'list.' + scope.$index + '.evaluateLevel'"
            :rules="rules.evaluateLevel"
            class="evaluate-level"
          >
            <el-radio-group class="radio-group" v-model="scope.row.evaluateLevel">
              <el-radio
                v-for="evaluationItem in evaluateOptions"
                :key="evaluationItem.value"
                :label="evaluationItem.value"
              >
                {{ evaluationItem.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>
      <el-button type="primary" class="submit-btn" @click="submitOpinionCheck">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          {
            id: '01',
            evaluateName: '指标一',
            evaluateLevel: ''
          },
          {
            id: '02',
            evaluateName: '指标二',
            evaluateLevel: ''
          },
          {
            id: '03',
            evaluateName: '指标二',
            evaluateLevel: ''
          }
        ]
      },
      evaluateOptions: [
        {
          value: '1',
          label: '优'
        },
        {
          value: '2',
          label: '良'
        },
        {
          value: '3',
          label: '中'
        },
        {
          value: '4',
          label: '差'
        }
      ],
      rules: {
        evaluateLevel: [{ required: true, message: '请选择评价等级', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitOpinionCheck() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluate-level {
  ::v-deep .el-form-item__error {
    width: 100px;
    /* 使校验信息居中 */
    left: calc(50% - 50px);
  }
}
</style>

el-form-item 表单校验 label只保留 *

有时候我们只需要表单校验的 *，而不需要 lable 文字，像这样：

代码如下：

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px">
    <el-form-item label=" " prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
    </el-form-item>
    <el-form-item label=" " prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

el-select 下拉框样式修改

使用样式穿透修改下拉框样式，你会发现打死都不生效，那是因为下拉框是默认挂载在 body 下面。解决办法：设置 :popper-append-to-body="false"

代码如下：

<template>
  <el-form>
    <el-form-item label="活动区域">
      <el-select
        class="form-select"
        :popper-append-to-body="false"
        v-model="form.region"
        placeholder="请选择活动区域"
      >
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        region: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-select {
  ::v-deep .el-select-dropdown__item.selected {
    background: pink;
  }
}
</style>

el-input 打开弹框自动聚焦

很多时候 form 表单是嵌套在 dialog 下面，为了提高用户体验，需要在打开弹框后 input 框自动聚焦。

代码如下：

<template>
  <div>
    <el-button type="text" @click="showDialog">
      打开嵌套表单的 Dialog
    </el-button>

    <el-dialog title="活动" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="80px">
          <el-input ref="nameInput" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动内容" label-width="80px">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        content: ''
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      // 如果弹框显示，则自动聚焦
      this.$nextTick(() => {
        this.$refs.nameInput.focus()
      })
    }
  }
}
</script>

今天的分享就到到这里，希望对你有所帮助！如果觉得有用，不要忘了点个赞呦~

听说喜欢点赞的你，今年年终奖拿到手软

浅析我们为什么要上Vue3？前端Vue.js

banyungong — Wed, 12 Jan 2022 10:38:54 GMT

theme: vue-pro highlight: a11y-dark

专栏地址：Vue 源码解析与实践

本文：我是970
原文链接：https://juejin.cn/post/7040769191393099783

✨ 开篇

RT，我们为什么要上 Vue3？使用 Vue3 影响我开法拉利吗？

最近在 Vue3 发布了3.2 大版本之后，掘金上关于 Vue3 的文章越来越多，本来想着让子弹再飞一会，但最近公司上了 Vue3 的项目，自己也跟着学了起来。

昨天还是 Vue2 的 Options API 的忠实信徒，结果今天搞了 Vue3 的 Composition API 之后，直呼 Vue3 真香！

接下来，我们从分析 Vue2 优缺点入手，以及结合图片和用例来了解 Vue3 的优势。

Vue2 ⚔ Vue3

Vue2

优点

不可否认 Vue2 在取得的成功，在 Github 的 Front-End 分类的排行榜上也能看到 Vue 仓库的排名是第一，粉丝足够多，活跃用户足够多

比 React 足足多了 12k+ star

从我的角度来看，最大的功臣莫过于这三个：

响应式数据
Options API
SFC

除去这三位大将，不可或缺 Vuex/Vue-Router 这两位功臣，以及丰富的周边插件和活跃的社区。

缺点

在一个组件仅承担单一逻辑的时候，使用 Options API 来书写组件是很清晰的。

这时候，我们根据Vue2的Options API的写法，就写完了 10 个method、10 个data、10 个watch，我们就将本来 10 个的函数方法，分割在 30 个不同的地方。

这时候父组件的代码，对代码维护者来说是很不友好的。

可能有人说，这么写可以增加代码量，老板夸我牛逼！哈哈哈哈

Vue3

优点

自由，自由，还是 TM 的自由！

更强的性能，更好的 tree shaking
Composition API + setup
更好地支持 TypeScript

可能的缺点

Vue3: 让你自由过了火

使用Composition API在setup这个舞台上尽情的表演之后，可能存在一个问题：那就是如何优雅地组织代码？

代码不能优雅的组织，在代码量上去之后，也一样很难维护。

SFC 写法变化

Vue2 一个普通的 Vue 文件

<template>
  <div>
    <p>{{ person.name }}</p>
    <p>{{ car.name }}</p>
  </div>
</template>

<script>
export default {
  name: "Person",

  data() {
    return {
      person: {
        name: "小明",
        sex: "male",
      },
      car: {
        name: "宝马",
        price: "40w",
      }
    };
  },

  watch:{
      'person.name': (value) => {
          console.log(`名字被修改了, 修改为 ${value}`)
      },
      'person.sex': (value) => {
          console.log(`性别被修改了, 修改为 ${value}`)
      }
  },

  methods: {
    changePersonName() {
      this.person.name = "小浪";
    },

    changeCarPrice() {
      this.car.price = "80w";
    }
  },
};
</script>

采用 Vue3 Composition API 进行重写

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";

// person的逻辑
const person = reactive<{ name: string; sex: string }>({
  name: "小明",
  sex: "male",
});
watch(
  () => [person.name, person.sex],
  ([nameVal, sexVal]) => {
    console.log(`名字被修改了, 修改为 ${nameVal}`);
    console.log(`名字被修改了, 修改为 ${sexVal}`);
  }
);
function changePersonName() {
  person.name = "小浪";
}

// car的逻辑
const car = reactive<{ name: string; price: string }>({
  name: "宝马",
  price: "40w",
});
function changeCarPrice() {
  car.price = "80w";
}
</script>

采用 Vue3 自定义 Hook 的方式，进一步拆分

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
  <p>{{ animal.name }}</p>
</template>

<script lang="ts" setup>
import { usePerson, useCar, useAnimal } from "./hooks";

const { person, changePersonName } = usePerson();

const { car } = useCar();
</script>

// usePerson.ts
import { reactive, watch } from "vue";

export default function usePerson() {
  const person = reactive<{ name: string; sex: string }>({
    name: "小明",
    sex: "male",
  });
  watch(
    () => [person.name, person.sex],
    ([nameVal, sexVal]) => {
      console.log(`名字被修改了, 修改为 ${nameVal}`);
      console.log(`名字被修改了, 修改为 ${sexVal}`);
    }
  );
  function changePersonName() {
    person.name = "小浪";
  }
  return {
    person,
    changePersonName,
  };
}

// useCar.ts
import { reactive } from "vue";

export default function useCar() {
  const car = reactive<{ name: string; price: string }>({
    name: "宝马",
    price: "40w",
  });
  function changeCarPrice() {
    car.price = "80w";
  }
  return {
    car,
    changeCarPrice,
  };
}

对比完之后，我们会发现，Vue3 可以让我们更好组织代码。person和car的逻辑都被单独放置在一块

仅仅是代码组织的优势吗？不不不，我们再看看模板中的一些变化

<template>标签中起始便签可以不用<div>标签，因为Vue3提供了片段的能力，使用Vue-detools中查看，可以看到有fragment的标记
Watch也不需要罗列多个了，Vue3中支持侦听多个源
很自然的使用TypeScript，类型约束更加简单

性能方面

Vue3 主要在这几个方面进行了提升

编译阶段。对 diff 算法优化、静态提升等等
响应式系统。Proxy()替代Object.defineProperty()监听对象。监听一个对象，不需要再深度遍历，Proxy()就可以劫持整个对象
体积包减少。Compostion API 的写法，可以更好的进行 tree shaking，减少上下文没有引入的代码，减少打包后的文件体积
新增片段特性。Vue 文件的<template>标签内，不再需要强制声明一个的<div>标签，节省额外的节点开销

总结

Vue3 的优点和新特性还有很多很多，本篇文章主要从Vue2/3版本的优缺点和SFC写法变化这两个角度介入，给大家介绍我们为什么要上 Vue3。

Vue3 很香，更好地支持 TypeScript，让 Vue3 成为了企业级 Vue 项目的首选，各种新特性也迎合前端技术的发展趋势。

ie 浏览器：那我走？

最后

翻译翻译什么是 Vue3 ？

如果这篇文章对你有帮助，那麻烦你动动小手点个赞，你的每一个点赞都是我继续创作的莫大鼓励！

参考资料

面试官：Vue3.0 性能提升主要是通过哪几方面体现的？

Vue3 教程：Vue 3.x 快在哪里？

其他

掘金年度人气创作者打榜最后一天啦，欢迎大家为我们团队投票~ IDuxFE@深信服前端开发团队感谢大家的支持~

Vue3.2发布了，我激动了，实在学不动了！Vue.jsVuex

banyungong — Wed, 12 Jan 2022 10:38:54 GMT

什么？VUE3.2 发布了？

前两天一早收到尤大微博推送，Vue 3.2 发布了！好家伙，上个版本还没玩儿透，这新版本就来了。评论区也是一片哀嚎

但也正如评论区所言，很难不支持。让我们看看这次更新了点儿什么。

两个新功能已经从实验状态毕业了

<script setup> 与 <style> v-bind。

-----------------------------华尔兹分割----------------------------

第一个：`<script setup>` 正式毕业

<script setup> 是一种编译时语法糖，可在 SFC 内使用 Composition API 时**极大地改善工作效率。

第二个：新增`<style> v-bind`

而<style> v-bind呢，简单地来说就是可以在<style>内使用组件定义的动态值。官方给出了例子：

import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>

因为vue中文官网暂时没有此次的更新内容，需要的同学可能要到外网啃啃英文文档了。

文档地址：https://v3.vuejs.org/api/sfc-script-setup.html

第三个：新增 defineCustomElement方法

Vue 3.2 引入了一个新的 defineCustomElement 方法，可以使用 Vue 组件 API 轻松创建原生自定义元素：

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

第四个：性能改进

第五个：服务器渲染

最后提到了服务端渲染与新的Effect Scope API。有兴趣的同学可以仔细看一看更新文档。https://blog.vuejs.org/posts/vue-3.2.html。

第6个：1024Lab 再说点儿

相信很多同学已经上手开始使用<scripte setup>了。在文档中可以看到，

defineProps、defineEmits、defineExpose、withDefaults***属于***compiler macro，编译器宏。文档中也说到：

They do not need to be imported, and are compiled away when is processed

他们不需要引入，会在编译的时候处理掉。

然而不引入你用的时候就会报错。

<script setup lang="ts">
const props = defineProps<{
  value?: number;
}>();

const emit = defineEmits<{
  (e: 'update:value', value: number): void;
}>();
</script>

首先eslint会报错：

ESLint: ‘defineEmits’ is not defined.(no-undef)

此时你需要更改eslint-plugin-vue的配置

//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
module.exports = {
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  }
}

然后可能编译后浏览器控制台会报错

defineEmits is not defined

const _sfc_main = _defineComponent({
  props: {
    value: { type: Number, required: false }
  },
  emits: ["update:value"],
  setup(__props, { expose, emit }) {}
 })

第7点：最后让我吐槽一下下

尤大在微博上提到的Volar是一款vscode的插件，这让webstorm党…哭惨了…

但是Vue 3.2 + script setup + typescript + volar 真香！真的香！

SmartAdmin2.0 也在用最新的 <script setup>重构，真香~

SmartAdmin: https://github.com/1024-lab/smart-admin

Vue3 Ref 语法糖，告别 .value 的写法Vue.js源码

banyungong — Tue, 11 Jan 2022 13:16:14 GMT

前言

近期，Vue3 提了一个 Ref Sugar 的 RFC，即 ref 语法糖，目前还处理实验性的（Experimental）阶段。在 RFC 的动机（Motivation）中，Evan You 介绍到在 Composition API 引入后，一个主要未解决的问题是 refs 和 reactive 对象的使用。而到处使用 .value 可能会很麻烦，如果在没使用类型系统的情况下，也会很容易错过：

let count = ref(1)

function add() {
	count.value++
}

所以，一些用户会更倾向于只使用 reactive，这样就不用处理使用 refs 的 .value 问题。而 ref 语法糖的作用是让我们在使用 ref 创建响应式的变量时，可以直接获取和更改变量本身，而不是使用 .value 来获取和更改对应的值。简单的说，站在使用层面，我们可以告别使用 refs 时的 .value 问题：

let count = $ref(1)

function add() {
	count++
}

那么，ref 语法糖目前要怎么在项目中使用？它又是怎么实现的？这是我第一眼看到这个 RFC 建立的疑问，相信这也是很多同学持有的疑问。所以，下面让我们来一一揭晓。

1 Ref 语法糖在项目中的使用

由于 ref 语法糖目前还处于实验性的（Experimental）阶段，所以在 Vue3 中不会默认支持 ref 语法糖。那么，这里我们以使用 Vite + Vue3 项目开发为例，看一下如何开启对 ref 语法糖的支持。

在使用 Vite + Vue3 项目开发时，是由 @vitejs/plugin-vue 插件来实现对 .vue 文件的代码转换（Transform）、热更新（HMR）等。所以，我们需要在 vite.config.js 中给 @vitejs/plugin-vue 插件的选项（Options）传入 refTransform: true：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({
    refTransform: true
  })]
})

那么，这样一来 @vitejs/plugin-vue 插件内部会根据传入的选项中 refTransform 的值判断是否需要对 ref 语法糖进行特定的代码转换。由于，这里我们设置的是 true，显然它是会对 ref 语法糖执行特定的代码转换。

接着，我们就可以在 .vue 文件中使用 ref 语法糖，这里我们看一个简单的例子：

<template>
	<div>{{count}}</div>
	<button @click="add">click me</button>
</template>

<script setup>
let count = $ref(1)

function add() {
	count++
}
</script>

对应渲染到页面上：

可以看到，我们可以使用 ref 语法糖的方式创建响应式的变量，而不用思考使用的时候要加 .value 的问题。此外，ref 语法糖还支持其他的写法，个人比较推荐的是这里介绍的 $ref 的方式，有兴趣的同学可以去 RFC 上了解其他的写法。

那么，在了解完 ref 语法糖在项目中的使用后，我们算是解答了第一个疑问（怎么在项目中使用）。下面，我们来解答第二个疑问，它又是怎么实现的，也就是在源码中做了哪些处理？

2 Ref 语法糖的实现

首先，我们通过 Vue Playground 来直观地感受一下，前面使用 ref 语法糖的例子中的 <script setup> 块（Block）在编译后的结果：

import { ref as _ref } from 'vue'

const __sfc__ = {
  setup(__props) {
  let count = _ref(1)

  function add() {
    count.value++
  }
}

可以看到，虽然我们在使用 ref 语法糖的时候不需要处理 .value，但是它经过编译后仍然是使用的 .value。那么，这个过程肯定不难免要做很多编译相关的代码转换处理。因为，我们需要找到使用 $ref 的声明语句和变量，给前者重写为 _ref，给后者添加 .value。

而在前面，我们也提及 @vitejs/plugin-vue 插件会对 .vue 文件进行代码的转换，这个过程则是使用的 Vue3 提供的 @vue/compiler-sfc 包（Package），它分别提供了对 <script>、<template>、<style> 等块的编译相关的函数。

那么，显然这里我们需要关注的是 <script> 块编译相关的函数，这对应的是 @vue/compiler-sfc 中的 compileScript() 函数。

2.1 compileScript() 函数

compileScript() 函数定义在 vue-next 的 packages/compiler-sfc/src/compileScript.ts 文件中，它主要负责对 <script> 或 <script setup> 块内容的编译处理，它会接收 2 个参数：

sfc 包含 .vue 文件的代码被解析后的内容，包含 script、scriptSetup、source 等属性
options 包含一些可选和必须的属性，例如组件对应的 scopeId 会作为 options.id、前面提及的 refTransform 等

compileScript() 函数的定义（伪代码）：

// packages/compiler-sfc/src/compileScript.ts
export function compileScript(
  sfc: SFCDescriptor,
  options: SFCScriptCompileOptions
): SFCScriptBlock {
  // ...
  return {
    ...script,
    content,
    map,
    bindings,
    scriptAst: scriptAst.body
  }
}

对于 ref 语法糖而言，compileScript() 函数首先会获取选项（Option）中 refTransform 的值，并赋值给 enableRefTransform：

const enableRefTransform = !!options.refTransform

enableRefTransform 则会用于之后判断是否要调用 ref 语法糖相关的转换函数。那么，前面我们也提及要使用 ref 语法糖，需要先给 @vite/plugin-vue 插件选项的 refTransform 属性设置为 true，它会被传入 compileScript() 函数的 options，也就是这里的 options.refTransform。

接着，会从 sfc 中解构出 scriptSetup、source、filename 等属性。其中，会先用源文件的代码字符串 source 创建一个 MagicString 实例 s，它主要会用于后续代码转换时对源代码字符串进行替换、添加等操作，然后会调用 parse() 函数来解析 <script setup> 的内容，即 scriptSetup.content，从而生成对应的抽象语法树 scriptSetupAst：

let { script, scriptSetup, source, filename } = sfc
const s = new MagicString(source)
const startOffset = scriptSetup.loc.start.offset
const scriptSetupAst = parse(
  scriptSetup.content,
  {
    plugins: [
      ...plugins,
      'topLevelAwait'
    ],
    sourceType: 'module'
  },
  startOffset
)

而 parse() 函数内部则是使用的 @babel/parser 提供的 parser 方法进行代码的解析并生成对应的 AST。对于上面我们这个例子，生成的 AST 会是这样：

{
  body: [ {...}, {...} ],
  directives: [],
  end: 50,
  interpreter: null,
  loc: {
    start: {...}, 
    end: {...}, 
    filename: undefined, 
    identifierName: undefined
  },
  sourceType: 'module',
  start: 0,
  type: 'Program'
}

注意，这里省略了 body、start、end 中的内容

然后，会根据前面定义的 enableRefTransform 和调用 shouldTransformRef() 函数的返回值（true 或 false）来判断是否进行 ref 语法糖的代码转换。如果，需要进行相应的转换，则会调用 transformRefAST() 函数来根据 AST 来进行相应的代码转换操作：

if (enableRefTransform && shouldTransformRef(scriptSetup.content)) {
  const { rootVars, importedHelpers } = transformRefAST(
    scriptSetupAst,
    s,
    startOffset,
    refBindings
  )
}

在前面，我们已经介绍过了 enableRefTransform。这里我们来看一下 shouldTransformRef() 函数，它主要是通过正则匹配代码内容 scriptSetup.content 来判断是否使用了 ref 语法糖：

// packages/ref-transform/src/refTransform.ts
const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\(/

export function shouldTransform(src: string): boolean {
  return transformCheckRE.test(src)
}

所以，当你指定了 refTransform 为 true，但是你代码中实际并没有使用到 ref 语法糖，则在编译 <script> 或 <script setup> 的过程中也不会执行和 ref 语法糖相关的代码转换操作，这也是 Vue3 考虑比较细致的地方，避免了不必要的代码转换操作带来性能上的开销。

那么，对于我们这个例子而言（使用了 ref 语法糖），则会命中上面的 transformRefAST() 函数。而 transformRefAST() 函数则对应的是 packages/ref-transform/src/refTransform.ts 中的 transformAST() 函数。

所以，下面我们来看一下 transformAST() 函数是如何根据 AST 来对 ref 语法糖相关代码进行转换操作的。

2.2 transformAST() 函数

在 transformAST() 函数中主要是会遍历传入的原代码对应的 AST，然后通过操作源代码字符串生成的 MagicString 实例 s 来对源代码进行特定的转换，例如重写 $ref 为 _ref、添加 .value 等。

transformAST() 函数的定义（伪代码）：

// packages/ref-transform/src/refTransform.ts
export function transformAST(
  ast: Program,
  s: MagicString,
  offset: number = 0,
  knownRootVars?: string[]
): {
  // ...
  walkScope(ast)
  (walk as any)(ast, {
    enter(node: Node, parent?: Node) {
      if (
        node.type === 'Identifier' &&
        isReferencedIdentifier(node, parent!, parentStack) &&
        !excludedIds.has(node)
      ) {
        let i = scopeStack.length
        while (i--) {
          if (checkRefId(scopeStack[i], node, parent!, parentStack)) {
            return
          }
        }
      }
    }
  })
  
  return {
    rootVars: Object.keys(rootScope).filter(key => rootScope[key]),
    importedHelpers: [...importedHelpers]
  }
}

可以看到 transformAST() 会先调用 walkScope() 来处理根作用域（root scope），然后调用 walk() 函数逐层地处理 AST 节点，而这里的 walk() 函数则是使用的 Rich Haris 写的 estree-walker。

下面，我们来分别看一下 walkScope() 和 walk() 函数做了什么。

walkScope() 函数

首先，这里我们先来看一下前面使用 ref 语法糖的声明语句 let count = $ref(1) 对应的 AST 结构：

可以看到 let 的 AST 节点类型 type 会是 VariableDeclaration，其余的代码部分对应的 AST 节点则会被放在 declarations 中。其中，变量 count 的 AST 节点会被作为 declarations.id ，而 $ref(1) 的 AST 节点会被作为 declarations.init。

那么，回到 walkScope() 函数，它会根据 AST 节点的类型 type 进行特定的处理，对于我们这个例子 let 对应的 AST 节点 type 为 VariableDeclaration 会命中这样的逻辑：

function walkScope(node: Program | BlockStatement) {
  for (const stmt of node.body) {
    if (stmt.type === 'VariableDeclaration') {
      for (const decl of stmt.declarations) {
        let toVarCall
        if (
          decl.init &&
          decl.init.type === 'CallExpression' &&
          decl.init.callee.type === 'Identifier' &&
          (toVarCall = isToVarCall(decl.init.callee.name))
        ) {
          processRefDeclaration(
            toVarCall,
            decl.init as CallExpression,
            decl.id,
            stmt
          )
        }
      }
    }
  }
}

这里的 stmt 则是 let 对应的 AST 节点，然后会遍历 stmt.declarations，其中 decl.init.callee.name 指的是 $ref，接着是调用 isToVarCall() 函数并赋值给 toVarCall。

isToVarCall() 函数的定义：

// packages/ref-transform/src/refTransform.ts
const TO_VAR_SYMBOL = '$'
const shorthands = ['ref', 'computed', 'shallowRef']
function isToVarCall(callee: string): string | false {
  if (callee === TO_VAR_SYMBOL) {
    return TO_VAR_SYMBOL
  }
  if (callee[0] === TO_VAR_SYMBOL && shorthands.includes(callee.slice(1))) {
    return callee
  }
  return false
}

在前面我们也提及 ref 语法糖可以支持其他写法，由于我们使用的是 $ref 的方式，所以这里会命中 callee[0] === TO_VAR_SYMBOL && shorthands.includes(callee.slice(1)) 的逻辑，即 toVarCall 会被赋值为 $ref。

然后，会调用 processRefDeclaration() 函数，它会根据传入的 decl.init 提供的位置信息来对源代码对应的 MagicString 实例 s 进行操作，即将 $ref 重写为 ref：

// packages/ref-transform/src/refTransform.ts
function processRefDeclaration(
    method: string,
    call: CallExpression,
    id: VariableDeclarator['id'],
    statement: VariableDeclaration
) {
  // ...
  if (id.type === 'Identifier') {
    registerRefBinding(id)
    s.overwrite(
      call.start! + offset,
      call.start! + method.length + offset,
      helper(method.slice(1))
    )
  } 
  // ...
}

位置信息指的是该 AST 节点在源代码中的位置，通常会用 start、end 表示，例如这里的 let count = $ref(1)，那么 count 对应的 AST 节点的 start 会是 4、end 会是 9。

因为，此时传入的 id 对应的是 count 的 AST 节点，它会是这样：

{
  type: "Identifier",
  start: 4,
  end: 9,
  name: "count"
}

所以，这会命中上面的 id.type === 'Identifier' 的逻辑。首先，会调用 registerRefBinding() 函数，它实际上是调用的是 registerBinding()，而 registerBinding 会在当前作用域 currentScope 上绑定该变量 id.name 并设置为 true ，它表示这是一个用 ref 语法糖创建的变量，这会用于后续判断是否给某个变量添加 .value：

const registerRefBinding = (id: Identifier) => registerBinding(id, true)
function registerBinding(id: Identifier, isRef = false) {
  excludedIds.add(id)
  if (currentScope) {
    currentScope[id.name] = isRef
  } else {
    error(
      'registerBinding called without active scope, something is wrong.',
      id
    )
  }
}

可以看到，在 registerBinding() 中还会给 excludedIds 中添加该 AST 节点，而 excludeIds 它是一个 WeekMap，它会用于后续跳过不需要进行 ref 语法糖处理的类型为 Identifier 的 AST 节点。

然后，会调用 s.overwrite() 函数来将 $ref 重写为 _ref，它会接收 3 个参数，分别是重写的起始位置、结束位置以及要重写为的字符串。而 call 则对应着 $ref(1) 的 AST 节点，它会是这样：

{
  type: "Identifier",
  start: 12,
  end: 19,
  callee: {...}
  arguments: {...},
  optional: false
}

并且，我想大家应该注意到了在计算重写的起始位置的时候用到了 offset，它代表着此时操作的字符串在源字符串中的偏移位置，例如该字符串在源字符串中的开始，那么偏移量则会是 0。

而 helper() 函数则会返回字符串 _ref，并且在这个过程会将 ref 添加到 importedHelpers 中，这会在 compileScript() 时用于生成对应的 import 语句：

function helper(msg: string) {
  importedHelpers.add(msg)
  return `_${msg}`
}

那么，到这里就完成了对 $ref 到 _ref 的重写，也就是此时我们代码的会是这样：

let count = _ref(1)

function add() {
	count++
}

接着，则是通过 walk() 函数来将 count++ 转换成 count.value++。下面，我们来看一下 walk() 函数。

walk() 函数

前面，我们提及 walk() 函数使用的是 Rich Haris 写的 estree-walker，它是一个用于遍历符合 ESTree 规范的 AST 包（Package）。

walk() 函数使用起来会是这样：

import { walk } from 'estree-walker'

walk(ast, {
  enter(node, parent, prop, index) {
    // ...
  },
  leave(node, parent, prop, index) {
    // ...
  }
});

可以看到，walk() 函数中可以传入 options，其中 enter() 在每次访问 AST 节点的时候会被调用，leave() 则是在离开 AST 节点的时候被调用。

那么，回到前面提到的这个例子，walk() 函数主要做了这 2 件事：

1.维护 scopeStack、parentStack 和 currentScope

scopeStack 用于存放此时 AST 节点所处的作用域链，初始情况下栈顶为根作用域 rootScope；parentStack 用于存放遍历 AST 节点过程中的祖先 AST 节点（栈顶的 AST 节点是当前 AST 节点的父亲 AST 节点）；currentScope 指向当前的作用域，初始情况下等于根作用域 rootScope：

const scopeStack: Scope[] = [rootScope]
const parentStack: Node[] = []
let currentScope: Scope = rootScope

所以，在 enter() 的阶段会判断此时 AST 节点类型是否为函数、块，是则入栈 scopeStack：

parent && parentStack.push(parent)
if (isFunctionType(node)) {
  scopeStack.push((currentScope = {}))
  // ...
  return
}
if (node.type === 'BlockStatement' && !isFunctionType(parent!)) {
  scopeStack.push((currentScope = {}))
  // ...
  return
}

然后，在 leave() 的阶段判断此时 AST 节点类型是否为函数、块，是则出栈 scopeStack，并且更新 currentScope 为出栈后的 scopeStack 的栈顶元素：

parent && parentStack.pop()
if (
  (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
  isFunctionType(node)
) {
  scopeStack.pop()
  currentScope = scopeStack[scopeStack.length - 1] || null
}

2.处理 Identifier 类型的 AST 节点

由于，在我们的例子中 ref 语法糖创建 count 变量的 AST 节点类型是 Identifier，所以这会在 enter() 阶段命中这样的逻辑：

if (
    node.type === 'Identifier' &&
    isReferencedIdentifier(node, parent!, parentStack) &&
    !excludedIds.has(node)
  ) {
    let i = scopeStack.length
    while (i--) {
      if (checkRefId(scopeStack[i], node, parent!, parentStack)) {
        return
      }
    }
  }

在 if 的判断中，对于 excludedIds 我们在前面已经介绍过了，而 isReferencedIdentifier() 则是通过 parenStack 来判断当前类型为 Identifier 的 AST 节点 node 是否是一个引用了这之前的某个 AST 节点。

然后，再通过访问 scopeStack 来沿着作用域链来判断是否某个作用域中有 id.name（变量名 count）属性以及属性值为 true，这代表它是一个使用 ref 语法糖创建的变量，最后则会通过操作 s（s.appendLeft）来给该变量添加 .value：

function checkRefId(
    scope: Scope,
    id: Identifier,
    parent: Node,
    parentStack: Node[]
): boolean {
  if (id.name in scope) {
    if (scope[id.name]) {
      // ...
      s.appendLeft(id.end! + offset, '.value')
    }
    return true
  }
  return false
}

结语

通过了解 ref 语法糖的实现，我想大家应该会对语法糖这个术语会有不一样的理解，它的本质是在编译阶段通过遍历 AST 来进行特定的代码转换操作。并且，这个实现过程的一些工具包（Package）的配合使用也是非常巧妙的，例如 MagicString 操作源代码字符串、estree-walker 遍历 AST 节点和作用域相关处理等。

最后，如果文中存在表达不当或错误的地方，欢迎各位同学提 Issue ～

通过阅读本篇文章，如果有收获的话，可以点个赞，这将会成为我持续分享的动力，感谢～

我是五柳，喜欢创新、捣鼓源码，专注于源码（Vue 3、Vite）、前端工程化、跨端等技术学习和分享，欢迎关注我的微信公众号：Code center。
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。作者: 五柳原文链接：https://juejin.im/post/7007765756221849608

在 Vue 中为什么不推荐用 index 做 key前端JavaScript__Vue.js

banyungong — Tue, 11 Jan 2022 12:15:16 GMT

这是第 120 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注我们吧~ 本文首发于政采云前端博客：在 Vue 中为什么不推荐用 index 做 key

前言

key 的作用

Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极其重要的作用。

key 在 diff 算法中的角色

具体 diff 流程如下

Vue3.0中在 patchChildren 方法中有这么一段源码

if (patchFlag > 0) {
      if (patchFlag & PatchFlags.KEYED_FRAGMENT) { 
         /* 对于存在 key 的情况用于 diff 算法 */
        patchKeyedChildren(
         ...
        )
        return
      } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
         /* 对于不存在 key 的情况,直接 patch  */
        patchUnkeyedChildren( 
          ...
        )
        return
      }
    }

patchChildren 根据是否存在 key 进行真正的 diff 或者直接 patch。对于 key 不存在的情况我们就不做深入研究了。

我们先来看看一些声明的变量。

/*  c1 老的 vnode c2 新的vnode  */
let i = 0              /* 记录索引 */
const l2 = c2.length   /* 新 vnode的数量 */
let e1 = c1.length - 1 /* 老 vnode 最后一个节点的索引 */
let e2 = l2 - 1        /* 新节点最后一个节点的索引 */

同步头部节点

第一步的事情就是从头开始寻找相同的 vnode，然后进行 patch ,如果发现不是相同的节点，那么立即跳出循环。

//(a b) c
//(a b) d e
/* 从头对比找到有相同的节点 patch ，发现不同，立即跳出*/
    while (i <= e1 && i <= e2) {
      const n1 = c1[i]
      const n2 = (c2[i] = optimized
        ? cloneIfMounted(c2[i] as VNode)
        : normalizeVNode(c2[i]))
        /* 判断 key ，type 是否相等 */
      if (isSameVNodeType(n1, n2)) {
        patch(
          ...
        )
      } else {
        break
      }
      i++
    }

流程如下：

isSameVNodeType 作用就是判断当前 vnode 类型和 vnode 的 key 是否相等

export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

其实看到这，是不是已经知道 key 在 diff 算法的作用，就是用来判断是否是同一个节点。

同步尾部节点

第二步从尾开始同前 diff

//a (b c)
//d e (b c)
/* 如果第一步没有 patch 完，立即，从后往前开始 patch  如果发现不同立即跳出循环 */
    while (i <= e1 && i <= e2) {
      const n1 = c1[e1]
      const n2 = (c2[e2] = optimized
        ? cloneIfMounted(c2[e2] as VNode)
        : normalizeVNode(c2[e2]))
      if (isSameVNodeType(n1, n2)) {
        patch(
         ...
        )
      } else {
        break
      }
      e1--
      e2--
    }

添加新的节点

第三步如果老节点是否全部 patch，新节点没有被 patch 完,创建新的 vnode

//(a b)
//(a b) c
//i = 2, e1 = 1, e2 = 2
//(a b)
//c (a b)
//i = 0, e1 = -1, e2 = 0
/* 如果新的节点大于老的节点数 ，对于剩下的节点全部以新的 vnode 处理（这种情况说明已经 patch 完相同的 vnode ） */
    if (i > e1) {
      if (i <= e2) {
        const nextPos = e2 + 1
        const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor
        while (i <= e2) {
          patch( /* 创建新的节点*/
            ...
          )
          i++
        }
      }
    }

流程如下：

删除多余节点

第四步如果新节点全部被 patch，老节点有剩余，那么卸载所有老节点

//i > e2
//(a b) c
//(a b)
//i = 2, e1 = 2, e2 = 1
//a (b c)
//(b c)
//i = 0, e1 = 0, e2 = -1
else if (i > e2) {
   while (i <= e1) {
      unmount(c1[i], parentComponent, parentSuspense, true)
      i++
   }
}

流程如下：

最长递增子序列

这里引入一个概念，叫最长递增子序列。
官方解释：在一个给定的数组中，找到一组递增的数值，并且长度尽可能的大。
有点比较难理解，那来看具体例子：

const arr = [10, 9, 2, 5, 3, 7, 101, 18]
=> [2, 3, 7, 18]
这一列数组就是arr的最长递增子序列，其实[2, 3, 7, 101]也是。
所以最长递增子序列符合三个要求：
1、子序列内的数值是递增的
2、子序列内数值的下标在原数组中是递增的
3、这个子序列是能够找到的最长的
但是我们一般会找到数值较小的那一组数列，因为他们可以增长的空间会更多。

为什么不要用index

性能消耗

使用 index 做 key，破坏顺序操作的时候，因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建。

例子：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}</li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们先把 Chorme 调试器打开，我们双击把里面文本修改一下

我们运行以上上面的代码，看下运行结果

上面我们也讲过 diif 比较方式,下面根据 diff 比较绘制一张图，看看具体是怎么比较的吧

当我们在前面加了一条数据时 index 顺序就会被打断，导致新节点 key 全部都改变了，所以导致我们页面上的数据都被重新渲染了。

下面我们下面生成1000个 DOM 来比较一下采用 index ，和不采用 index 性能比较，为了保证 key 的唯一性我们采用 uuid 作为 key

我们用 index 做为 key 现执行一遍

<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="index">{{item.id}}</li>
    </ul>
  </div>
</template>

<script>
import uuidv1 from 'uuid/v1'
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [{id:uuidv1()}],
    };
  },
  created(){
    for (let i = 0; i < 1000; i++) {
      this.studentList.push({
        id: uuidv1(),
      });
    }
  },
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 75.259033203125 ms
  },
  methods:{
    addStudent(){
      const studentObj = { id: uuidv1() };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

换成 id 作为 key

<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="item.id">{{item.id}}</li>
    </ul>
  </div>
</template>
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 42.200927734375 ms
  },

从上面比较可以看出，用唯一值作为 key 可以节约开销

数据错位

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}<input /></li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们往 input 里面输入一些值，添加一位同学看下效果：

这时候我们就会发现，在添加之前输入的数据错位了。添加之后王五的输入框残留着张三的信息，这很显然不是我们想要的结果。

解决方案

在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
可以采用 Symbol 作为 key，Symbol 是 ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

let a=Symbol('测试')
let b=Symbol('测试')
console.log(a===b)//false

可以采用 uuid 作为 key ，uuid 是 Universally Unique Identifier 的缩写，它是在一定的范围内（从特定的名字空间到全球）唯一的机器生成的标识符

我们采用上面第一种方案作为 key 在看一下上面情况，如图所示。key 相同的节点都做到了复用。起到了diff 算法的真正作用。

总结

用 index 作为 key 时，在对数据进行，逆序添加，逆序删除等破坏顺序的操作时，会产生没必要的真实 DOM更新，从而导致效率低
用 index 作为 key 时，如果结构中包含输入类的 DOM，会产生错误的 DOM 更新
在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
如果不存在对数据逆序添加，逆序删除等破坏顺序的操作时，仅用于渲染展示用时，使用 index 作为 key 也是可以的（但是还是不建议使用，养成良好开发习惯）。

参考链接

vue3.0 diff算法详解(超详细)

Vue 3 Virtual Dom Diff源码阅读

开源作品

政采云前端小报

开源地址 www.zoo.team/openweekly/ (小报官网首页有微信交流群)

skuDemo

开源地址 https://github.com/zcy-inc/skuPathFinder-back/

招贤纳士

『前端优化』—— Vue中避免滥用this去读取data中数据Vue.js面试

banyungong — Tue, 11 Jan 2022 11:15:00 GMT

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: awesome-green highlight:

前言

在Vue中，data选项是个好东西，把数据往里一丢，在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据，至于在哪里要避免滥用，如果滥用会导致什么后果，本专栏将会一一揭晓。

一、用this读取data中数据的过程

在Vue源码中会把data中数据添加getter函数和setter函数，将其转成响应式的。getter函数代码如下所示：

function reactiveGetter() {
    var value = getter ? getter.call(obj) : val;
    if (Dep.target) {
        dep.depend();
        if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
                dependArray(value);
            }
        }
    }
    return value
}

用this读取data中数据时，会触发getter函数，在其中通过 var value = getter ? getter.call(obj) : val; 获取到值后执行 return value，实现读取数据的目的。

但是在其间还有一段代码，在这段代码中会经过一系列复杂的逻辑运算来收集依赖。这里不介绍如何收集依赖，如果想了解可以看这篇专栏。这里只要知道在Dep.target存在时才会去收集依赖。

这里可以得出一个结论，在Dep.target存在时，使用this去读取data中数据时会去收集依赖。如果滥用this去读取data中数据，会多次重复地收集依赖，从而产生性能问题。

二、Dep.target什么时候存在

Dep.target是由依赖赋值的。依赖又称为Watcher（侦听者）或者订阅者。在Vue中有三种依赖，其中两种是很常见的，就是watch（侦听器）和computed（计算属性）。还有一种隐藏的依赖———渲染Watcher，在模板首次渲染的过程中创建的。

Dep.target是在依赖创建时被赋值，依赖是用构造函数Watcher创建。

function Watcher(vm, expOrFn, cb, options, isRenderWatcher) {
    //...
    if (typeof expOrFn === 'function') {
        this.getter = expOrFn;
    } else {
        this.getter = parsePath(expOrFn);
    }
    this.value = this.lazy ? undefined : this.get();
};
Watcher.prototype.get = function get() {
    pushTarget(this);
    try {
        value = this.getter.call(vm, vm);
    } catch (e) {
        
    }
    return value
};
Dep.target = null;
var targetStack = [];
function pushTarget(target) {
    targetStack.push(target);
    Dep.target = target;
}

在构造函数Watcher最后会执行实例方法get，在实例方法get中执行pushTarget(this)中给Dep.target赋值的。

而依赖是在Vue页面或组件初次渲染时创建，所以产生的性能问题应该是首次渲染过慢的问题。

三、在何处滥用this去读取data中数据

在Dep.target存在时去执行这些滥用this去读取data中数据的代码会产生性能问题，故还要搞清楚这些代码是写在哪里才会被执行到，换句话来说，要搞清楚在哪里滥用this去读取data中数据会产生性能问题。

在第二小节中介绍了Dep.target被赋值后会执行value = this.getter.call(vm, vm)，其中this.getter是一个函数，那么若在其中有用this去读取data数据，就会去收集依赖，假如滥用的话就会产生性能问题。

this.getter是在创建依赖过程中赋值的，每种依赖的this.getter都是不相同的。下面来一一介绍。

watch（侦听器）依赖的this.getter是parsePath函数，其函数参数就是侦听的对象。

var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_\\d]"));
function parsePath(path) {
    if (bailRE.test(path)) {
        return
    }
    var segments = path.split('.');
    return function(obj) {
        for (var i = 0; i < segments.length; i++) {
            if (!obj) {
                return
            }
            obj = obj[segments[i]];
        }
        return obj
    }
}

如下所示的代码中的 a 和 a.b.c作为参数传入parsePath函数会返回一个函数赋值给this.getter，执行this.getter.call(vm, vm)会得到this.a和this.a.b.c的值。在这个过程中不会存在滥用this去读取data中数据的场景。

watch:{
  a:function(newVal, oldVal){
    //做点什么
  }
}
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

computed（计算属性）依赖的this.getter有两种，如果计算属性的值是个函数，那么this.getter就是这个函数。如果计算属性的值是个对象，那么this.getter就是这个对象的get属性值，get属性值也是个函数。在这个函数可能会存在滥用this去读取data中数据的场景，举个例子，代码如下所示。
```
computed:{
    d:function(){
        let result = 0;
        for(let key in this.a){
            if(this.a[key].num > 20){
                result += this.a[key].num + this.b + this.c;
            }else{
                result += this.a[key].num + this.e + this.f;
            }
        }
        return result;
    }
}
```
在计算属性d中就存在滥用this去读取data数据。其中this.a是个数组，此时Dep.target的值为计算属性d这个依赖，在循环this.a中使用this去获取中a、b、c、e、f的数据，使这些数据进行一系列复杂的逻辑运算来重复地收集计算属性d这个依赖。导致获取计算属性d的值的速度变慢，从而产生性能问题。
渲染Watcher的this.getter是一个函数如下所示：

updateComponent = function() {
  vm._update(vm._render(), hydrating);
};

其中vm._render()会把template模板生成的渲染函数render转成虚拟DOM（VNode）：vnode = render.call(vm._renderProxy, vm.$createElement);，举一个例子来说明一下渲染函数render是什么。

例如template模板：

<template>
  <div class="wrap">
    <p>{{a}}<span>{{b}}</span></p>
  </div>
</template>

通过vue-loader会生成渲染函数render，如下所示：

(function anonymous() {
    with(this) {
        return _c('div', {
            attrs: {
                "class": "wrap"
            }
        }, [_c('p', [_v(_s(a)), _c('span', [_v(_s(b))])])])
    }
})

其中with语句的作用是为一个或一组语句指定默认对象，例with(this){ a + b } 等同 this.a + this.b，那么在template模板中使用{{ a }}相当使用this去读取data中的a数据。故在template模板生成的渲染函数render中也可能存在滥用this去读取data中数据的场景。举个例子，代码如下所示：

<template>
  <div class="wrap">
    <div v-for=item in list>
      <div> {{ arr[item.index]['name'] }} </div>
      <div> {{ obj[item.id]['age'] }} </div>
    </div>
  </div>
</template>

其中用v-for循环list数组过程中，不断用this去读取data中arr、obj的数据，使这些数据进行一系列复杂的逻辑运算来重复收集这个依赖，导致初次渲染的速度变慢，从而产生性能问题。

四、如何避免滥用this去读取data中数据

综上所述在计算属性和template模板中滥用this去读取data中数据会导致多次重复地收集依赖，从而产生性能问题，那要怎么避免这种情况。

计算属性中如何避免

用ES6对象解构赋值来避免，计算属性的值是一个函数，其参数是Vue的实例化this对象，在上述计算属性中滥用this的例子中可以这样优化。

优化前：

computed:{
    d:function(){
        let result = 0;
        for(let key in this.a){
            if(this.a[key].num > 20){
                result += this.a[key].num + this.b + this.c;
            }else{
                result += this.a[key].num + this.e + this.f;
            }
        }
        return result;
    }
}

优化后：

computed: {
  d({ a, b, c, e, f }) {
    let result = 0;
    for (let key in a) {
      if (a[key].num > 20) {
        result += a[key].num + b + c;
      } else {
        result += a[key].num + e + f;
      }
    }
    return result;
  }
}

以上利用解构赋值提前把data数据中的a、b、c、e、f赋值给对应的变量a、b、c、e、f，然后在计算属性中可以通过这些变量访问data数据的，且不会触发data中对应数据的依赖收集。这样只用this读取了一次data中的数据，只触发了一次依赖收集，避免了多次重复地依赖收集产生的性能问题。

template模板中如何避免

提前处理v-for循环所用的数据，不要在v-for循环中去读取数组、对象类型的数据。在上述template模板中滥用this的例子中可以这样优化。

假设list、arr、obj皆是服务端返回来的数据，且arr和obj没有用到任何模块渲染中，可以这样优化。

优化前：

<template>
  <div class="wrap">
    <div v-for=item in list>
      <div> {{ arr[item.index]['name'] }} </div>
      <div> {{ obj[item.id]['age'] }} </div>
    </div>
  </div>
</template>

优化后：

<template>
  <div class="wrap">
    <div v-for=item in listData>
      <div{{item.name}} </div>
        <div>{{item.age}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    }
  },
  created(){
    // 在这里定义arr和obj避免被转成响应式
    this.arr = [];
    this.obj = {};
  },
  computed: {
    listData: function ({list}) {
      list.forEach(item => {
        item.name = this.arr[item.index].name;
        item.age = this.obj[item.id].age;
      })
      return list;
    }
  },
}
</script>

你会用ES6，那倒是用啊！前端Vue.js__React.js

banyungong — Tue, 11 Jan 2022 10:15:00 GMT

theme: fancy highlight: arta

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

ps：ES5之后的JS语法统称ES6！！！

一、关于取值的吐槽

取值在程序中非常常见，比如从对象obj中取值。

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

吐槽：

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

或者

const f = obj.a + obj.d;
const g = obj.c + obj.e;

改进：

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

反驳

不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。

吐槽

看来你对ES6的解构赋值掌握的还是不够彻底。如果想创建的变量名和对象的属性名不一致，可以这么写：

const {a:a1} = obj;
console.log(a1);// 1

补充

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

二、关于合并数据的吐槽

比如合并两个数组，合并两个对象。

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

吐槽

ES6的扩展运算符是不是忘记了，还有数组的合并不考虑去重吗？

改进

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

三、关于拼接字符串的吐槽

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

吐槽

改进

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

四、关于if中判断条件的吐槽

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

吐槽

ES6中数组实例方法includes会不会使用呢？

改进

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

五、关于列表搜索的吐槽

在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

吐槽

如果是精确搜索不会用ES6中的find吗？性能优化懂么，find方法中找到符合条件的项，就不会继续遍历数组。

改进

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

六、关于扁平化数组的吐槽

一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

吐槽

改进

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。

补充

flat方法不支持IE浏览器。

七、关于获取对象属性值的吐槽

const name = obj && obj.name;

吐槽

ES6中的可选链操作符会使用么？

改进

const name = obj?.name;

八、关于添加对象属性的吐槽

当给对象添加属性时，如果属性名是动态变化的，该怎么处理。

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';

吐槽

为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？

改进

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

九、关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

if(value !== null && value !== undefined && value !== ''){
    //...
}

吐槽

ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？

if((value??'') !== ''){
  //...
}

十、关于异步函数的吐槽

异步函数很常见，经常是用 Promise 来实现。

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

吐槽

如果这样调用异步函数，不怕形成地狱回调啊！

改进

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

补充

但是要做并发请求时，还是要用到Promise.all()。

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

十一、后续

欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。

此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。

如果你还有其它想吐槽的，也非常欢迎在评论中留下你的吐槽。

读完有帮助，不妨关注一下，点个赞支持一下。

Vue：Vue.js专业中文社区

Flutter全套教程_Flutter+Getx仿小米商城项目实战视频教程-V3版

Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程-免费学

JavaScript 中 Promise 高階面試題求問

問題:

正解:

vue3里怎么使用prerender-spa-plugin

vue开源社区项目

面试官：你真的了解 v-model 吗？(vue2)__Vue.js__前端

阅读本文

一、v-model 的本质是语法糖。

二、v-model 仅仅是语法糖吗？(冷知识)

三、 v-model 是双向绑定还是单向数据流？

2.1 v-model 是双向绑定吗？

2.2 那 v-model 是单向数据流吗？

四、如何让你开发的组件支持 v-model

五、demo和源码

六、结束

面试官：项目中常用的 .env 文件原理是什么？如何实现？__前端__JavaScript__Vue.js

highlight: darcula theme: smartblue

1. 前言

2. 环境准备

3. dotenv 的作用

4. .env 文件使用

5. 简单实现

6. 继续完善 config 函数

7. 总结

花60秒给Vue3提的PR，竟然被尤大亲自Merge了~__JavaScript__Vue.js__开源

用Vue3.2 + Vite2.7 快速从0快速打造一个UI组件库__Vue.js__前端

1. 前言

2. 使用Vite搭建官网

2.1 创建项目

2.1.1. 全局安装vite（这里我装的时候是2.7.2）

2.1.2. 构建一个vue模板(项目名可以改成自己的名字)

2.1.3. 装好之后按照提示逐步执行命令

2.2 基本完成官网的搭建

2.2.1. 下载vue-router

2.2.2. 创建home首页与doc文档页 以及顶部导航栏

2.2.3. 配置路由

3. 封装一个Button组件

4. 封装Markdown组件介绍文档

4.1. 下载

4.2. main.ts中引入

4.3. vite.config.js中配置vite-plugin-markdown插件

4.4. 封装Markdown组件

4.5. 创建介绍页面路由

5. 自定义代码块获取组件展示源代码

5.1. 自定义插件vue-custom-blocks-plugin

5.2. 在vite.config.ts中配置

5.3. 封装Preview组件展示

5.4. 使用Preview组件

5.5. 高亮源代码

6. 去掉示例中的文件导入

6.1. 在lib目录下创建main.ts 这个也是作为之后打包上传至npm的入口

6.2. main.ts中导入注册

6.3. 这样在示例中就可以直接用了/src/views/doc/button/Button1.preview

6.4. 效果

7. 部署到github官网

7.1. 打包

7.2. 上传至github

7.3. 进入仓库Settings最底层

7.4. 找到GitHub Pages

7.5. 选择master分支 点击保存 链接就生成了

7.6 一键部署

8. 上传至npm

8.1. 创建rollup.config.js配置文件

8.2. 执行命令打包

8.3. 效果

8.4. 上传至npm

9. 最后

Hello @idux, 一个全新的 vue 3.x 组件库来了__Vue.js__开源

theme: awesome-green

特性

Monorepo 模式

开箱即用

Composition API

TypeScript

国际化

全局配置

主题定制

面试官：你真的了解 v-model 吗？(vue2)Vue.js前端

一、`v-model` 的本质是语法糖。

三、 `v-model` 是双向绑定还是单向数据流？

2.1 `v-model` 是双向绑定吗？

2.2 那 `v-model` 是单向数据流吗？

四、如何让你开发的组件支持 `v-model`

面试官：项目中常用的 .env 文件原理是什么？如何实现？前端JavaScript__Vue.js

花60秒给Vue3提的PR，竟然被尤大亲自Merge了~JavaScriptVue.js__开源

用Vue3.2 + Vite2.7 快速从0快速打造一个UI组件库Vue.js前端

2.2.2. 创建home首页与doc文档页以及顶部导航栏

6.3. 这样在示例中就可以直接用了`/src/views/doc/button/Button1.preview`

7.5. 选择master分支点击保存链接就生成了

Hello @idux, 一个全新的 vue 3.x 组件库来了Vue.js开源

vue3和Vite双向加持，uni-app性能再次提升uni-appVue.js

是什么事让尤大如此生气？Vue.js前端框架__JavaScript

聊一聊 Vue3 的 9 个知识点前端Vue.js__面试

Vue 团队公开快如闪电的全新脚手架工具 create-vue，未来将替代 Vue-CLI，才300余行代码，学它！前端JavaScript__Vue.js

Element-UI 奇淫技巧第二弹！提升开发效率，延长摸鱼时间~Element前端