智能驾驶业务里常用web 3d来可视化地图和传感器数据、显示路径规划结果等方法协助算法调试和仿真，可以用threejs来做，毕竟在国内社区相对活跃，也比较容易上手，效果类似下图：

当然以上图片都是客户端的版本，web3d版本的ui其实并不会这么精致，毕竟只是服务于内部算法和研发。这个专栏纯属作者一时兴起并希望能产出一个麻雀虽小五脏俱全的行泊场景（简称人太闲），本文就先把自车的基础场景搭建起来

本文基于 three^0.167.1 版本

初始化项目

用 Vite 脚手架快速搭一个 react 项目用来调试

pnpm create vite autopilot --template react-ts

把 threejs 官网的例子稍微改下，加到项目里看看。新建一个 renderer 对象如下：

// src/renderer/index.ts

import * as THREE from "three";



class Renderer {

  constructor() {

    //

  }



  initialize() {

    const container = document.getElementById("my-canvas")!;

    const width = container.offsetWidth,

      height = container.offsetHeight;

    const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);

    camera.position.z = 1;

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);

    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

    const renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(width, height);

    renderer.setAnimationLoop(animate);

    container.appendChild(renderer.domElement);

    function animate(time: number) {

      mesh.rotation.x = time / 2000;

      mesh.rotation.y = time / 1000;

      renderer.render(scene, camera);

    }

  }

}



export const myRenderer = new Renderer();

// App.tsx

import { useEffect } from "react";

import { myRenderer } from "./renderer";

import "./App.css";



function App() {

  useEffect(() => {

    myRenderer.initialize();

  }, []);



  return (

    <>

      <div id="my-canvas"></div>

    </>

  );

}



export default App;

加载自车

ok，跨出第一步了，接下来整辆自车（egoCar）

“自车”指的是自动驾驶汽车本身，它能够通过搭载的传感器、计算平台和软件系统实现自主导航和行驶

可以上 free3d 下载个免费的车辆模型，里面有很多种格式的，尽量找 gltf/glb 格式的（文件体积小，加载比较快）。

这里以加载 glb 格式的模型为例，可以先把模型文件放到 public 目录下，因为加载器相对网页的根路径（index.html）解析，而 public 目录在打包后会原封不动保存到根目录里

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const gltfLoader = new GLTFLoader();



class Renderer {

  scene = new THREE.Scene();

  // ...  

  loadEgoCar() {

    gltfLoader.load("./su7.glb", (gltf) => {

      const car = gltf.scene;

      car.scale.set(0.1, 0.1, 0.1);

      this.scene.add(car);

    });

  }

  // ...

  initialize() {

    // ...

    this.loadEgoCar();

  }

}

但如果一定要放到 src/assets/models 目录里呢？然后通过import方式引入文件来用，那这么操作下来就会遇到这个报错（You may need to install appropriate plugins to handle the .glb file format, or if it's an asset, add "**/*.glb" to assetsInclude in your configuration）：

怎么解？在 vite.config.ts 文件加入 assetsInclude。顺带把 vite 指定路径别名 alias 也支持一下

// vite .config.ts 

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";

import { fileURLToPath, URL } from "node:url";



// https://vitejs.dev/config/

export default defineConfig({

  plugins: [react()],

  // 指定路径别名

  resolve: {

    alias: {

      "@": fileURLToPath(new URL("./src", import.meta.url)),

    },

  },

  assetsInclude: ["**/*.glb"],

});

node:url 如果提示没有该模块，先安装下@types/node，可能要重启下vscode才能生效

pnpm i @types/node -D

接下来就可以直接用 import 导入 glb 文件来用了

import carModel from "@/assets/models/su7.glb";



class Renderer {

  // ...

  loadEgoCar() {

    gltfLoader.load(carModel, (gltf) => {

      const car = gltf.scene;

      car.scale.set(0.1, 0.1, 0.1);

      this.scene.add(car);

    });

  }

}

OrbitControls

增加 OrbitControls 插件，便于调节自车视角，这个插件除了围绕目标点（默认是原点[0,0,0]）旋转视角，还支持缩放（滚轮）和平移（鼠标右键，触摸板的话是双指长按）

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

class Renderer {

    initialize() {

        // ...

        const controls = new OrbitControls(camera, renderer.domElement);

        function animate() {

          // ...

          controls.update();

          renderer.render(scene, camera);

        }

    }

}

光源设置

看起来场景和自车都比较暗，咱们调下光源，加一个环境光 AmbientLight 和平行光 DirectionalLight，平行光位置放自车后上方，沿着自车方向（也就是原点方向）发射光源

// ...

// 没有特定方向，影响整个场景的明暗

const ambient = new THREE.AmbientLight(0xffffff, 0.4);

scene.add(ambient);

// 平行光

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);

directionalLight.position.set(60, 80, 40);

scene.add(directionalLight);

地面网格

增加坐标网格，新建一个 Grid 对象，提供一个水平的基准面，便于观察

// ...

// 50表示网格模型的尺寸大小，20表示纵横细分线条数量

const gridHelper = new THREE.GridHelper(50, 20);

scene.add(gridHelper);

// 顺带调高下相机位置

camera.position.set(0, 1, 1.8);

// 设置场景背景色(颜色值，透明度)

renderer.setClearColor(0x000000, 0.85);

道路实现

这里先简单实现一段不规则道路，封装一个 freespace 对象，还要考虑它的不规则和带洞的可能，所以需要做好接口定义，其实数据主要是点集，一般这些点集都是地图上游发下来的，可能是 protobuf 或者 json 的格式

export interface IFreespace {

  // 一般可以用于判断元素是否可复用

  id: string;

  position: IPos;

  contour: IPos[];

  // 洞可能有多个，所以这里应该设置成二维数组

  holes?: IPos[][];

  color?: IColor;

}

export interface IPos {

  x: number;

  y: number;

  z?: number;

}

export interface IColor {

  r: number;

  g: number;

  b: number;

  a?: number;

}

因为只是一个平面形状，所以可以用 THREE.Shape 来实现，它可以和 ExtrudeGeometry、ShapeGeometry 一起使用来创建二维形状

// src/renderers/freespace.ts

class Freespace {

  scene = new THREE.Scene();



  constructor(scene: THREE.Scene) {

    this.scene = scene;

  }



  draw(data: IFreespace) {

    const {

      contour,

      holes = [],

      color = { r: 0, g: 0, b: 0 },

      position,

    } = data;

    if (contour.length < 3) {

      return;

    }

    const shape = new THREE.Shape();

    // 先绘制轮廓

    // 设置起点

    shape.moveTo(contour[0].x, contour[0].y);

    contour.forEach((item) => shape.lineTo(item.x, item.y));

    // 绘制洞

    holes.forEach((item) => {

      if (item.length < 3) {

        return;

      }

      const path = new THREE.Path();

      path.moveTo(item[0].x, item[0].y);

      item.forEach((subItem) => {

        path.lineTo(subItem.x, subItem.y);

      });

      // 注意这一步

      shape.holes.push(path);

    });

    const shapeGeometry = new THREE.ShapeGeometry(shape);

    const material = new THREE.MeshPhongMaterial();

    // 注意：setRGB传参颜色值需要介于0-1之间

    material.color.setRGB(color.r / 255, color.g / 255, color.b / 255);

    material.opacity = color.a || 1;

    const mesh = new THREE.Mesh(shapeGeometry, material);

    mesh.position.set(position.x, position.y, position.z || 0);

    mesh.rotateX(-Math.PI / 2);

    this.scene.add(mesh);

  }

}



export default Freespace;

ok先用mock的数据画一段带洞的十字路口，加在 initialize 代码后就行，其实道路上还应该有一些交通标线，后面再加上吧

最后再监听下界面的 resize 事件，使其能根据容器实际大小变化动态调整场景

  // ...

  constructor() {

    // 初始化渲染对象

    this.renderers = {

      freespace: new Freespace(this.scene),

    };

  }

  initialize() {

      // ...

      this.loadEgoCar();

      this.registerDefaultEvents();

      // mock

      this.mockData();

  }

 mockData() {

    this.renderers.freespace.draw(freespaceData1);

  }

  // 监听resize事件

  registerDefaultEvents() {

    window.addEventListener("resize", this.onResize.bind(this), false);

  }

  unmountDefaultEvents() {

    window.removeEventListener("resize", this.onResize.bind(this), false);

  }

  onResize() {

    const container = document.getElementById("my-canvas")!;

    const width = container.offsetWidth,

      height = container.offsetHeight;

    this.camera.aspect = width / height;

    this.camera.updateProjectionMatrix();

    this.renderer.setSize(width, height);

  }

最后

ok先到这了，主要是先把项目搭起来，后面会继续分享下更多地图和感知元素以及他车、行人、障碍物等效果的实现

• github地址[0.1.1]


• 原文地址

有时候不得不承认，官方的总结有时就是最精简的：

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

虽然作为Vuex的升级版，但为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex，同时，pinia提供了一种更简洁、更直观的方式来处理应用程序的状态，更为重要的是，pinia的学习成本更低，低到一篇文章就能涵盖pinia的全部。

Pinia的安装与配置：

首先自然是安装pinia，在基于Vue3的项目环境中，提供了npm与yarn两种安装方式：

npm install pinia

yarn add pinia

随后，通常就是在src目录下新建一个专属的store文件夹，在其中的js文件中创建并抛出这个仓库。

import { createPinia } from 'pinia'  // 引入pinia模块



const store = createPinia()    // 创建一个仓库



export default store   // 抛出这个仓库

既然把这个仓库抛出了，那么现在便是让它能在全局起作用，于是在Vue的主要应用文件中（通常为main.js），引入使用pinia。

import { createApp } from 'vue'

import App from './App3.vue'



import store from './store'  //引入这个仓库 



createApp(App).use(store).mount('#app')  // 再use一下

这样一来pinia仓库就能全局生效了!

Pinia的主要功能：

在官方文档中，Pinia提供了四种功能，分别是：

那么接下来我会通过一个具体的实例来表现出这四个功能，如下图：

分别是充当仓库的Store功能。存储子组件User.vue中数据的State功能。另一个子组件Update-user.vue中，点击按钮后数据会实现更新，也就是修改State中数据的Actions功能。与无论点击多少次” 经过一年后按钮 ”，页面都会实现同步更新的Getters功能。

State：

简单来说，State的作用就是作为仓库的数据源。

就比如说，我想在仓库的数据源里面放上一个对象来进行使用，那我们只需在先前创建的store文件夹中再创建一个js文件，这里我给它起名为user，然后再其中这样添加对象。

（第一行引入的defineStore代表defineStore是store的一部分。)

import { defineStore } from 'pinia'   // defineStore 是 store 的一部分



export const useUserStore = defineStore({

    id: 'user',

    state: () => ({   // 仓库数据源

            userInfo: {

                name: '小明',

                age: 18,

                sex:'boy'

            }

    })

})

那么现在，我们想使用仓库中的数据就成为了一件非常容易的事。

正如上图，这里有一个父组件App.vue，两个子组件User.vue、Update-user.vue。

父组件不做任何动作，只包含对两个子组件的引用：

<template>

        <User/>

        <Updateuser/>

</template>



<script setup>

import User from './components/User.vue'

import Updateuser from './components/Update-user.vue'





</script>



<style lang="css" scoped>



</style>

子组件User.vue：

可以看到在这个子组件中，我们通过import { useUserStore } from '@/store/user'引用仓库，从而获得了仓库中小明姓名、年龄、性别的数据。

由于接下来的Update-user.vue组件中会添加几个按钮对这些数据进行修改，那么我们就要把这些数据设置成响应式。

正常情况下，store自带响应性，但如果我们不想每次都写userStore.userInfo.name这么长一大串，就可以尝试将这些值取出来赋给其他变量：

这里有两种方法，第一种是引入computed模块，如第14行年龄的修改。另一种是引入storeToRefs模块，这是一种属于Pinia仓库的模块，将整个userInfo变成响应式。

于是接下来，就轮到我们的Actions登场了

<template>

<ul>

    <li>姓名：{{ userStore.userInfo.name }}</li>

    <li>年龄：{{ age }}</li>

    <li>性别；{{ userInfo.sex }}</li>

</ul>

</template>



<script setup>

import { useUserStore } from '@/store/user'

import { computed } from 'vue'

import { storeToRefs } from 'pinia'



const userStore = useUserStore()

const age = computed(() => userStore.userInfo.age)   // 1. 计算属性使响应式能生效

const { userInfo } = storeToRefs(userStore)  // 2. 专门包裹仓库中函数用来返回对象



</script>



<style lang="scss" scoped>



</style>

Actions：

简单来说，Actions的作用就是专门用来修改State，如果你想要修改仓库中的响应式元素，只需要进行两步操作：

第一步：在user.js也就是我们的仓库中添加actions，专门设置函数用来修改state对象中的值。例如changeUserName作用是修改姓名， changeUserSex作用是修改性别。

import { defineStore } from 'pinia'   // defineStore  是 store的一部分



export const useUserStore = defineStore({

    id: 'user',

    state: () => ({   // 仓库数据源

            userInfo: {

                name: '小明',

                age: 18,

                sex:'boy'

            }

    }),

    actions: {                     // 专门用来修改state

        changeUserName(name) {

            this.userInfo.name = name

        },

        changeUserSex(sex){

            this.userInfo.sex = sex

        }

    }

})

子组件Update-user.vue：

第二步，在控制按钮的组件Update-user.vue中触发这两个函数，就如第10与14行的两个箭头函数。

<template>

   <button @click="changeName">修改仓库中用户姓名</button>

      <button @click="changeSex">修改仓库中用户性别</button>

</template>



<script setup>

import { useUserStore } from '@/store/user'  // 引入Pinia仓库

const userStore = useUserStore()            // 声明仓库



const changeName = () => {                  // 触发提供的函数

  userStore.changeUserName('小红')



}

const changeSex = () => {

  userStore.changeUserSex('gril')

}



</script>



<style lang="css" scoped>



</style>

这样一来，依赖于Actions，我们就成功完成了响应式修改仓库中数据的功能，也就是前两个按钮的功能！

Getters：

简单来说Getters就是仓库中的计算属性。

现在我们来实现第三个按钮功能，首先就是在User.vue组件中第5行，添加 “ 十年之后年龄 ” 一栏：

<template>

<ul>

    <li>姓名：{{userStore.userInfo.name}}</li>

    <li>年龄：{{ age }}</li>

    <li>十年后年龄：{{ userStore.afterAge }}</li>    // 添加的栏

    <li>性别：{{ userInfo.sex }}</li>

</ul>

</template>



<script setup>

import { useUserStore } from '@/store/user'

import { computed } from 'vue'

import { storeToRefs } from 'pinia'



const userStore = useUserStore()

const age = computed(() => userStore.userInfo.age)

const { userInfo } = storeToRefs(userStore)



</script>



<style lang="scss" scoped>



</style>

那么现在你一定能注意到这一栏其中的userStore.afterAge，这正是我们将在getters中返回的值。

那么关于getters，具体的使用方法就是继续在user.js中添加进getters，我们在其中打造了一个afterAge函数来返回userStore.afterAge，正如第25行。

import { defineStore } from 'pinia'   // defineStore  是 store的一部分



export const useUserStore = defineStore({

    id: 'user',

    state: () => ({   // 仓库数据源

            userInfo: {

                name: '小明',

                age: 18,

                sex:'boy'

            }

    }),

    actions: { // 专门用来修改state

        changeUserName(name) {

            this.userInfo.name = name

        },

        changeUserSex(sex){

            this.userInfo.sex = sex

        },

        changeUserAge(age){           //  新添加的一年后年龄计算方法

            this.userInfo.age += age

        }

    },

    getters: { // 仓库中的计算属性,所依赖的值改变会重新执行

        afterAge(state) {

            return state.userInfo.age + 10

        }

    }

})

准备工作完毕，现在就该在页面上添加这个按钮，于是在组件Update-user.vue添加上按钮与执行函数。

 <button @click="changeAge">经过一年后</button>

const changeAge = () => {

  userStore.changeUserAge(1)

}

有了这些之后，这个项目的功能便彻底完善，无论点击多少次“ 经过一年后 ”按钮，在页面上显示的值都是正确且实时更新的，这就是Getters的功劳！

补充：数据持久化

关于整个项目的功能实现确实已经结束，但人的贪心却是不得满足的，如果我们想要在原有的基础上实现网页刷新数据却不刷新，也就是说数据的持久化，那又该怎么办呢？

很简单，也就是堪堪三步，便能实现。

第一步：安装persist插件。

npm i pinia-plugin-persist

第二步：在store的js文件中引入这个插件。

import { createPinia } from 'pinia'

import piniaPluginPersist from 'pinia-plugin-persist'  //引入插件



const store = createPinia()

store.use(piniaPluginPersist)  // 使用插件



export default store

第三步：在我们前文user.js的defineStore库内继续添加上persist功能。

persist: { // 持久化

    enabled: true,

    strategies: [ // 里面填想要持久化的数据

    {

        paths: ['userInfo'],    // 指明持久化的数据

        storage: localStorage  // 指明存储

    }

    ]

}

现在可以看到点击按钮后的数据都被存储到浏览器的存储空间中，无论多少次刷新都不会被重置！

最后：

至此，这样一个简简单单的项目，却解释清楚了Pinia功能的核心，读完这篇文章，相信每一个学习Pinia的人都能有所收获。

如何将指定html内容转化成图片保存？这个问题很值得深思，实际应用中也很有价值。最直接的想法就是使用canvas，熟悉canvas的同学可以尝试一下。这里不做太多的说明，本文采用html2canvas库来实现。

html2canvas库的使用非常简单，只需要引入html2canvas库，然后调用html2canvas方法即可，官方地址。

接下来说一下简单的使用，以react项目为例。

获取整个页面截图，可以使用底层IDroot，这样下载的就是root下的所有元素。

import html2canvas from "html2canvas";



const saveCanvas = () => {

    // 画布基础元素，要绘制的元素

    const canvas: any = document.getElementById("root");

    const options: any = { scale: 1, useCORS: true };

    html2canvas(canvas, options).then((canvas) => {

      const type = "png";

      // 返回值是一个数据url，是base64组成的图片的源数据

      let imgDt = canvas.toDataURL(type);

      let fileName = "img" + "." + type;

      // 保存为文件

      let a = document.createElement("a");

      document.body.appendChild(a);

      a.href = imgDt;

      a.download = fileName;

      a.click();

    });

  };

图片的默认背景色是#ffffff，如果想要透明色可设置为null，比如设置为红色。

const options: any = { scale: 1, useCORS: true, backgroundColor: "red" };

正常情况下网络图片是无法渲染的，可以使用useCORS属性，设置为true即可。

const options: any = { scale: 1, useCORS: true };

保存某块元素的截图

const canvas: any = document.getElementById("swiper");

如果希望将某些元素排除，可以将data-html2canvas-ignore属性添加到这些元素中，html2canvas将从渲染中排除这些元素。

<Button

  data-html2canvas-ignore

  color="primary"

  fill="solid"

  onClick={saveCanvas}

>

  download

</Button>

完整代码

npm install html2canvas

// demo.less

.contentSwiper {

  width: 710px;

  height: 375px;

  color: #ffffff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 48px;

  user-select: none;

}

.swiper {

  padding: 0 20px;

}

import React from "react";

import { Button, Space, Swiper } from "antd-mobile";

import html2canvas from "html2canvas";

import styles from "./demo.less";



export default () => {

  const saveCanvas = () => {

    // 画布基础元素，要绘制的元素

    const canvas: any = document.getElementById("root");

    const options: any = { scale: 1, useCORS: true, backgroundColor: "red"

  };

    html2canvas(canvas, options).then((canvas) => {

      const type = "png";

      // 返回值是一个数据url，是base64组成的图片的源数据

      let imgDt = canvas.toDataURL(type);

      let fileName = "img" + "." + type;

      // 保存为文件

      let a = document.createElement("a");

      document.body.appendChild(a);

      a.href = imgDt;

      a.download = fileName;

      a.click();

    });

  };

  const colors: string[] = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];

  const items = colors.map((color, index) => (

    <Swiper.Item key={index}>

      <div className={styles.contentSwiper} style={{ background: color }}>

        {index + 1}

      </div>

    </Swiper.Item>

  ));

  return (

    <div className="content">

      <div id="swiper" className={styles.swiper}>

        <Swiper

          style={{

            "--track-padding": " 0 0 16px",

          }}

          defaultIndex={1}

        >

          {items}

        </Swiper>

      </div>

      <div>

        <img

          width={200}

          src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF"

        />

      </div>

      <Space>

        <Button

          data-html2canvas-ignore

          color="primary"

          fill="solid"

          onClick={saveCanvas}

        >

          download

        </Button>

        <Button color="primary" fill="solid">

          Solid

        </Button>

        <Button color="primary" fill="outline">

          Outline

        </Button>

        <Button color="primary" fill="none">

          

        </Button>

      </Space>

    </div>

  );

};

比较好奇vue项目中使用watch还是watchEffect居多，查看了element-plus、ant-design-vue两个UI库, 整体上看，watch使用居多，而watchEffect不怎么受待见，那这两者之间有什么关系？

watchEffect是watch的衍生

为什么说watchEffect是watch的衍生？

• 首先，两者提供功能是有重叠。大部分监听场景，两者都能满足。

const list = ref([]);

const count = ref(0);



watch(

   list,

   (newValue) => {

    count.value = newValue.length;

   } 

)



watchEffect(() => {

    count.value = list.value.length;

})

• 其次，源码上两者也都是同一出处。以下是两者的函数定义：

export function watch(

  source: T | WatchSource,

  cb: any,

  options?: WatchOptions,

): WatchStopHandle {

  return doWatch(source as any, cb, options)

}



export function watchEffect(

  effect: WatchEffect,

  options?: WatchOptionsBase,

): WatchStopHandle {

  return doWatch(effect, null, options)

}

两者内部都调用doWatch函数，并且返回都是WatchStopHandle类型。唯独入参上有比较大的区别，watch的source参数就像大杂烩，支持PlainObject、Ref、ComputedRef以及函数类型；而watchEffect的effect参数仅仅是一个函数类型。

watch早于watchEffect诞生，watch源代码有这样一句提示：

if (__DEV__ && !isFunction(cb)) {

    warn(

      `\`watch(fn, options?)\` signature has been moved to a separate API. ` +

        `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +

        `supports \`watch(source, cb, options?) signature.`,

    )

}

也就是说历史的某一个版本，watch也是支持watch(fn, options?)用法，但为了降低API复杂度，将这部分功能迁移至watchEffect函数。一个优秀框架的发展历程也不过如此，都是在不断的重构升级。

话又说回来，到目前，为什么大部分Vue开发者更偏向于使用watch，而不是watchEffect?，带着这个问题，庖丁解牛式层层分析。

watch、watchEffect底层逻辑

当我们把watch、watchEffect底层逻辑看透，剩下的watchSyncEffect、watchPostEffect也就自然了解。

先回顾下watch、watchEffect内部调用doWatch的参数：

// watch

doWatch(source as any, cb, options)

// demo

watch(

   list,

   (newValue) => {

    count.value = newValue.length;

   } 

)



// watchEffect

doWatch(effect, null, options)

// demo

watchEffect(() => {

    count.value = list.value.length;

})

入参的区别，如下表所示：

根据参数对比，先抛出两个问题：

1. doWatch为什么能自动监听WatchEffect函数内的数据变更，并且能重新执行？

2. 第三个参数WatchOptions、WatchOptionBase有什么区别？

watchOptions、WatchOptionBase的定义如下：

export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {

  immediate?: Immediate

  deep?: boolean

  once?: boolean

}



export interface WatchOptionsBase extends DebuggerOptions {

  flush?: 'pre' | 'post' | 'sync'

}

WatchOptionsBase仅提供了flush，因此watchEffect函数的第三个参数也只有flush一个选项。
flush包含pre、post、sync三个值，缺省为pre。它明确了监听器的触发时机，pre和post比较明确，对应渲染前、渲染后。

sync官方定义为：在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。简而言之，依赖的多个变量，只要其中一个有更新，监听器就会触发一次。

const list = ref([]);

const page = ref(1);

const message = ref('');



watchEffect(() => {

    message.value = `总量${list.value.length}, 当前页：${page.value}`

    console.log(message.value);

}, { flush: 'sync' })

例如上述的list、page任意一个有更新，则会输出一次console。sync模式得慎重使用，例如监听的是数组，其中一项有更新都会触发监听器，可能带来不可预知的性能问题。

post也有明确的应用场景，例如:当页面侧边栏显示或隐藏后，需要容器渲染完成后再更新内部的图表等元素。不使用flush选项的解法，一般是监听visible变化并使用setTimeout延迟更新。有了post，一个属性即可搞定。

watch(visible, (value) => {

    setTimeout(() => {

        // 更新容器内图表

    }, 1000);

})



watch(visible, (value) => {

    // 更新容器内图表

}, { flush: 'post' })

完成了第二个问题的解答， 要回答第一个问题，需要深入doWatch函数， 在上一篇《写Vue大篇幅的ref、computed，而reactive为何少见？》也有对doWatch做局部介绍，可以作为辅助参考。

doWatch源码

先从doWatch函数签名上，对其有概括性的认识：

function doWatch(

  source: WatchSource | WatchSource[] | WatchEffect | object,

  cb: WatchCallback | null,

  {

    immediate,

    deep,

    flush,

    once,

    onTrack,

    onTrigger,

  }: WatchOptions = EMPTY_OBJ,

): WatchStopHandle

由于我们主要目的是回答问题：doWatch为什么能自动监听WatchEffect函数内的数据变更，并且能重新执行？

因此仅分析source为WatchEffect的情况，此时，cb为null, 第三个参数仅有flush选项。

WatchEffect类型定义如下：

export type WatchEffect = (onCleanup: OnCleanup) => void

onCleanup参数的作用是，在下一次监听器执行前被触发，通常用于状态清理。

doWatch函数实现，最核心的片段是ReactiveEffect的生成：

const effect = new ReactiveEffect(getter, NOOP, scheduler)

为什么ReactiveEffect是其核心？因为它起到了"中介"的作用，在监听器函数内，每一个可监听的变量都对应有依赖项集合deps，当调用这些变量的getter时，ReactiveEffect会把自身注入到依赖集合deps中，这样每当执行变量的setter时，deps集合中的副作用都会触发，而每个副作用effect内部会调用scheduler, scheduler可理解为调度器，负责处理视图更新时机，scheduler内部选择合适的时机触发监听器。

接下来着重看getter、scheduler定义，当source为WatchEffect类型时，getter定义片段如下：

 // no cb -> simple effect

  getter = () => {

    if (cleanup) {

      cleanup()

    }

    return callWithAsyncErrorHandling(

      source,

      instance,

      ErrorCodes.WATCH_CALLBACK,

      [onCleanup],

    )

  }

首先执行cleanup，也就是说如果参数传入有onCleanup回调，那么每次在获取新值前都会触发onCleanup。其次是return语句，调用callWithAsyncErrorHandling函数，从函数可探察之，一方面支持异步，另一方面处理异常错误。

支持异步：也就是我们传入的监听器可以是一个异步函数，那么我们可以在其中执行远程请求的调用，例如官方给的示例, 当id.value值变化，从远端请求数据await response，并赋值给data.value。

watchEffect(async (onCleanup) => {

  const { response, cancel } = doAsyncWork(id.value)

  // `cancel` 会在 `id` 更改时调用

  // 以便取消之前未完成的请求

  onCleanup(cancel)

  data.value = await response

})

上述示例中，如果id.value频繁更新，则会导致触发多次远端请求，要解决该问题，可调用onCleanup(cancel)，将cancel传入到doWatch内部，并且每次执行cleanup时被调用。onCleanup定义如下：

let cleanup: (() => void) | undefined

let onCleanup: OnCleanup = (fn: () => void) => {

    cleanup = effect.onStop = () => {

      callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)

      cleanup = effect.onStop = undefined

    }

}

其中，fn即为上述示例中的cancel，这样就建立了cancel和cleanup的关联，因此每次更新前，先调用cancel中断上一次请求。

callWithAsyncErrorHandling函数定义如下：

export function callWithAsyncErrorHandling(fn,instance,type,args?): any {

  ...

  const res = callWithErrorHandling(fn, instance, type, args)

    if (res && isPromise(res)) {

      res.catch(err => {

        handleError(err, instance, type)

      })

    }

    return res

  ...

}

res为fn函数执行结果，由于支持同步、异步。如果fn为异步函数，那么res为Promise类型，并且对异常做了兜底处理。

当fn函数执行后，内部所有可监听变量的deps都会添加上当前effect，所以只要变量有更新，effect的scheduler就被触发。

watchEffect官方定义有：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。“立即运行一个函数”如何体现？

doWatch函数的最后几行代码如下：

if (flush === 'post') {

    queuePostRenderEffect(

      effect.run.bind(effect),

      instance && instance.suspense,

    )

} else {

    effect.run()

}

如果flush不为post，那么立即执行effect.run(), 而run函数会调用getter，因此会立即运行监听器函数一次；如果flush为post，那么effect将会在vue下一次渲染前第一次执行effect.run()。

至此，我们就分析完watchEffect的底层逻辑，总结其特点：立即执行，支持异步，并且会自动监听变量更新。

为什么不能两者取一，而必须共存

再次回顾watch的定义:

export function watch(

  source: T | WatchSource,

  cb: any,

  options?: WatchOptions,

): WatchStopHandle {

  return doWatch(source as any, cb, options)

}

其中WatchOptions包含的选项有：immediate、deep、once、flush。如果是watchEffect，选项仅有flush，并且immediate相当于true，剩下的deep、once不支持配置。

先说watchEffect的缺点：

• 不支持immediate为false，必须是立即执行。例如下面的代码，由于autoplay默认false，初始化时不需要立即执行。如果是watchEffect，则pauseTimer初始化会执行一次，完全没必要。

watch(

    () => props.autoplay,

    (autoplay) => {

      autoplay ? startTimer() : pauseTimer()

    }

)

• 不支持deep为true的场景，只能见监听当前使用的属性。但如果是调用watch(source, cb, { deep: true }), 则会通过traverse(source)将source所有深度属性读取一次，和effect建立关联，达到自动监听所有属性的目的。


• 异步使用有坑，watchEffect 仅会在其同步执行期间，才追踪依赖。在使用异步回调时，只有在第一个 await 正常工作前访问到的属性才会被追踪。

再说watchEffect优点：

优点也是非常明显，写法非常简洁，无需显式声明监听哪些变量，一个回调函数搞定，并且默认为立即执行，我认为能满足开发中80%的应用场景。另一方面，由于只监听回调中使用的属性，相比于deep为true的一锅端方式，watchEffect则更加直观明了。

总结

watchSyncEffect、watchPostEffect和watchEffect唯一的区别是：flush分别固定为sync、post。所以，watchEffect为watch的衍生，而watchSyncEffect、watchPostEffect为watchEffect的衍生。

对于开发使用上:

• watchPostEffect、watchSyncEffect仅在极少数的特殊场景下才使用，完全可以用watchEffect(fn, { flush: 'sync' | 'post' })代替，多了反而对入门开发者来说是徒增干扰。


• 个人认为应优先使用watchEffect函数，毕竟代码写法上更加简洁，属性依赖上也更加明确。满足不了的场景，再考虑使用watch。

前言

Vue的内置指令估计大家都用过不少，例如v-for、v-if之类的就是最常用的内置指令，但今天给大家介绍几个平时用的比较少的内置指令。毕竟这几个Vue内置指令可用可不用，不用的时候系统正常跑，但在对的地方用了却能提升系统性能，下面将结合示例进行详细说明。

一、v-once

作用：在标签上使用v-once能使元素或者表达式只渲染一次。首次渲染之后，后面数据再发生变化时使用了v-once的地方都不会更新，因此用在数据不需要变化的地方就能进行性能优化。

v-once指令实现原理： Vue组件初始化时会标记上v-once，首次渲染会正常执行，后续再次渲染时如果看到有v-once标记则跳过二次渲染。

示例代码： 直接作用在标签上，可以是普通标签也可以是图片标签，当2S后数据变化时标签上的值不会重新渲染更新。

<template>

  <div>

    <span v-once>{{ message }}</span>

    <img v-once :src="imageUrl"></img>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let message = ref('Vue指令!');

let imageSrc = ref('/path/my/image.jpg');



setTimeout(() => {

  message.value = '修改内容!';

  imageUrl.value = '/new/path/my/images.jpg';

}, 2000);



</script>

注意： 作用v-once会使属性失去响应式，要确保这个地方不需要响应式更新才能使用，否则会导致数据和页面视图对不上。

二、v-pre

作用： 在标签上使用v-pre后，Vue编译器会自动跳过这个元素的编译。使用此内置指令后会被视为静态内容。

v-pre指令实现原理： Vue初次编译时如果看到有v-pre标记，那么跳过这部分的编译，直接当成原始的HTML插入到DOM中。

示例代码： 常规文本会正常编译成您好！，但使用了v-pre后会跳过编译原样输出{{ message }}。

<template>

  <div>

    <h2>常规: {{ message }}</h2>

    <h2 v-pre>使用v-pre后: {{ message }}</h2>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let message = ref('您好!');

</script>

注意： 要区分v-pre和v-once的区别，v-once用于只渲染一次，而v-pre是直接跳过编译。

这个指令可能很多人没想到应用场景有那些，其实最常见的用途就是要在页面上显示Vue代码，如果不用v-pre就会被编译。如下所示使用v-pre场景效果。

<template>

  <div>

    <pre v-pre>

      &lt;template&gt;

        &lt;p&gt;{{ message }}&lt;/p&gt;

      &lt;/template&gt;



      &lt;script setup&gt;

      import { ref } from 'vue';



      const message = ref('Hello Vue!');

      &lt;/script&gt;

    </pre>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let message = ref('您好!');

</script>

页面上展示： 代码原始显示不会被编译。

三、v-memo（支持3.2+版本）

作用： 主要用于优化组件的渲染方面性能，能控制达到某个条件才重新当堂组件，否则不重新渲染。v-memo 会缓存 DOM，只有当指定的数据发生变化时才会重新渲染，从而减少渲染次数提升性能。

v-memo 指令实现原理： Vue初始化组件时会识别是否有v-memo标记，如果有就把这部分vnode缓存起来，当数据变化时会对比依赖是否变化，变化再重新渲染。

示例代码： 用v-memo 绑定了arr，那么当arr的值变化才会重新渲染，否则不会重新渲染。

<template>

  <div>

    <ul v-memo="arr">

      <li v-for="(item, index) in arr" :key="index">

        {{ item.text }}

      </li>

    </ul>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let arr = ref([

  { text: '内容1' },

  { text: '内容2' },

  { text: '内容3' }

]);



setInterval(() => {

  arr.value[1].text = '修改2';

}, 2000);

</script>

注意： 用v-memo来指定触发渲染的条件，但只建议在长列表或者说复杂的渲染结构才使用。

小结

总结了几个比较冷门的Vue内置指令，平时用的不多，但用对了地方却能明显提升性能。如果那里写的不对或者有好建议欢迎大佬指出啊。

一、引言

在现代系统中，Token认证已成为保障用户安全的标准做法。然而，尽管许多系统采用了这种认证方式，却在处理Token刷新方面存在不足，导致用户体验不佳。随着Token有效期的缩短，频繁的重新登录成为常见现象，许多系统未能提供一种无缝的、用户无感知的Token刷新机制。通过结合Vue3和Axios这两大前端技术栈，我们可以借助Promise机制，开发出一种更加完善的自动化Token刷新方案，显著提升系统的稳定性和用户体验。本文将深入探讨这一实现过程，帮助你解决Token刷新难题。

二、示意图

三、具体实现

了解了基本步骤后，实际的实现过程其实相当简洁。然而，在具体操作中，仍有许多关键细节需要我们仔细考量，以确保Token刷新机制的稳定性和可靠性。

1. Token 存储与管理：首先，明确如何安全地存储和管理Access Token与Refresh Token。这涉及到浏览器的存储策略，比如使用localStorage、sessionStorage，存储策略不在本文中提及，本文采用localStorage 进行存储。
2. 请求拦截器的设置：在Axios中设置请求拦截器，用于在每次发送请求前检查Token的有效性。如果发现Token过期，则触发刷新流程。这一步骤需注意避免并发请求引发的重复刷新。
3. 处理Token刷新的响应逻辑：当Token过期时，通过发送Refresh Token请求获取新的Access Token。在这里，需要处理刷新失败的情况，如Refresh Token也失效时，如何引导用户重新登录。
4. 队列机制的引入：在Token刷新过程中，可能会有多个请求被同时发出。为了避免重复刷新Token，可以引入队列机制，确保在刷新Token期间，其他请求被挂起，直到新的Token可用。
5. 错误处理与用户体验：最后，要对整个流程中的错误进行处理，比如刷新失败后的重试逻辑、错误提示信息等，确保用户体验不受影响。

通过以上步骤的实现，你可以构建一个用户无感知、稳定可靠的双Token刷新机制，提升应用的安全性与用户体验。接下来，我们将逐一解析这些关键步骤的具体实现。

1. 编写请求拦截器

实现请求拦截器的基本逻辑比较简单，即在每次请求时自动附带上Token以进行认证。

service.interceptors.request.use((config: InternalAxiosRequestConfig) => {  

    const userStore = useUserStore()  

    if (userStore.authInfo.accessToken && userStore.authInfo.accessToken !== "") {  

        // 设置头部 token  

        config.headers.Authorization = RequestConstant.Header.AuthorizationPrefix + userStore.authInfo.accessToken;  

    }  

    return config;  

},  (error: any) => {  

    return Promise.reject(error);  

    }  

);

目前的实现方案是，在请求存在有效Token时，将其附带到请求头中发送给服务器。但在一些特殊情况下，某些请求可能不需要携带Token。为此，我们可以在请求配置中通过config对象来判断是否需要携带Token。例如：

request: (deptId: number, deptForm: DeptForm): AxiosPromise<void> => {  

    return request<void>({  

        url: DeptAPI.UPDATE.endpoint(deptId),  

        method: "put",  

        data: deptForm,

        headers: { 

            // 根据需要添加Token，或者通过自定义逻辑决定是否包含Authorization字段 

            token: false

        }

    });  

}

那么在请求拦截器中，您需要多加一个判断，就是判断请求头中token是否需要

// 代码省略

2. 深究响应拦截器

对于双token刷新的难点就在于响应拦截器中，因为在这里后端会返回token过期的信息。我们需要先清楚后端接口响应内容

2.1 接口介绍

• 正常接口响应内容

// Status Code: 200 OK

{

    "code":"0000",

    "msg":"操作成功",

    "data":{}

}

• accessToken 过期响应内容

// Status Code: 401 Unauthorized

{

    "code":"I009",

    "msg":"登录令牌过期"

}

• accessToken 刷新响应内容

// Status Code: 200 OK

{

    "code": "0000",

    "msg": "操作成功",

    "data": {

        "accessToken": "",

        "refreshToken": "",

        "expires": ""

    }

}

• refreshToken 过期响应内容

// Status Code: 200 OK

{

    "code": "I009",

    "msg": "登录令牌过期"

}

注意 : 当Status Code不是200时，Axios的响应拦截器会自动进入error方法。在这里，我们可以捕捉到HTTP状态码为401的请求，从而初步判断请求是由于Unauthorized（未授权）引发的。然而，触发401状态码的原因有很多，不一定都代表Token过期。因此，为了准确判断Token是否真的过期，我们需要进一步检查响应体中的code字段。

2.2 响应拦截器编写

有上面的接口介绍，我们编写的就简单，判断error.response?.status === 401、code === I009 即可，如果出现这种情况就直接刷新token。

service.interceptors.response.use(async (response: AxiosResponse) => {

        // 正常请求代码忽略

        return Promise.reject(new Error(msg || "Error"));

    },

    async (error: any) => {

        const userStore = useUserStore()

        if (error.response?.status === 401) {

            if (error.response?.data?.code === RequestConstant.Code.AUTH_TOKEN_EXPIRED) {

                // token 过期处理

                // 1. 刷新 token

                const loginResult: LoginResult = await userStore.refreshToken()

                if (loginResult) {

                    // refreshToken 未过期

                    // 2.1 重构请求头

                    error.config.headers.Authorization = RequestConstant.Header.AuthorizationPrefix + userStore.authInfo.accessToken;

                    // 2.2 请求

                    return await service.request(error.config);

                } else {

                    // refreshToken 过期

                    // 1. 重置登录 token , 跳转登录页

                    await userStore.resetToken()

                }

            } else {

                //  如果是系统发出的401 , 重置登录 token , 跳转登录页

                await userStore.resetToken()

            }

        } else if (error.response?.status === 403) {

           // 403 结果处理 , 代码省略

        } else {

           // 其他错误结果处理 , 代码省略

        }

        return Promise.reject(error.message);

    }

);

2.3 解决重复刷新问题

编写完成上面的内容，考虑一下多个请求可能同时遇到 Token 过期，如果没有适当的机制控制，这些请求可能会同时发起刷新 Token 的操作，导致重复请求，甚至可能触发后端的安全机制将这些请求标记为危险操作。

为了解决这个问题，我们实现了一个单例 Promise 的刷新逻辑，通过 singletonRefreshToken 确保在同一时间只有一个请求会发起 Token 刷新操作。其核心思想是让所有需要刷新的请求共享同一个 Promise，这样即使有多个请求同时遇到 Token 过期，它们也只会等待同一个刷新操作的结果，而不会导致多次刷新。

/**

 * 刷新 token

 */

refreshToken(): Promise<LoginResult> {

    // 如果 singletonRefreshToken 不为 null 说明已经在刷新中，直接返回

    if (singletonRefreshToken !== null) {

        return singletonRefreshToken

    }

    // 设置 singletonRefreshToken 为一个 Promise 对象 , 处理刷新 token 请求

    singletonRefreshToken = new Promise<LoginResult>(async (resolve) => {

        await AuthAPI.REFRESH.request({

            accessToken: this.authInfo.accessToken as string,

            refreshToken: this.authInfo.refreshToken as string

        }).then(({data}) => {

            // 设置刷新后的Token

            this.authInfo = data

            // 刷新路由

            resolve(data)

        }).catch(() => {

            this.resetToken()

        })

    })

    // 最终将 singletonRefreshToken 设置为 null, 防止 singletonRefreshToken 一直占用

    singletonRefreshToken.finally(() => {

        singletonRefreshToken = null;

    })

    return singletonRefreshToken

}