Skip to content

Commit

Permalink
fix: 修改笔误
Browse files Browse the repository at this point in the history
  • Loading branch information
iamouyang21 committed Aug 7, 2024
1 parent 8806fab commit 74d1f99
Show file tree
Hide file tree
Showing 6 changed files with 7 additions and 12 deletions.
11 changes: 3 additions & 8 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,16 @@ jobs:
uses: actions/configure-pages@v4
- name: Install dependencies
run: npm ci # 或 pnpm install / yarn install / bun install
- name: test
run: ssh -Tv -i /home/runner/.ssh/deploy_key -o StrictHostKeyChecking=no $REMOTE_USER@$REMOTE_HOST
- name: Build with VitePress
run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: docs/.vitepress/dist

# 部署工作
deploy:
needs: build
runs-on: ubuntu-latest
name: Deploy
steps:
- name: Deploy to server
uses: easingthemes/ssh-deploy@v2.0.7
uses: easingthemes/ssh-deploy@v2.1.1
env:
SSH_PRIVATE_KEY: ${{ secrets.ACCESS_TOKEN }}
ARGS: "-avz --delete"
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/vue-to-js.md
Original file line number Diff line number Diff line change
Expand Up @@ -628,7 +628,7 @@ async function transformMain(code, filename, options, pluginContext, ssr, custom
![progress-full](../images/guide/vue-to-js/progress-full.webp){data-zoomable}
`@vitejs/plugin-vue-jsx`库中有个叫`transform`的钩子函数,每当vite加载模块的时候就会触发这个钩子函数。所以当import一个vue文件的时候,就会走到`@vitejs/plugin-vue-jsx`中的`transform`钩子函数中,在`transform`钩子函数中主要调用了`transformMain`函数。
`@vitejs/plugin-vue`库中有个叫`transform`的钩子函数,每当vite加载模块的时候就会触发这个钩子函数。所以当import一个vue文件的时候,就会走到`@vitejs/plugin-vue`中的`transform`钩子函数中,在`transform`钩子函数中主要调用了`transformMain`函数。
第一次解析这个vue文件时,在`transform`钩子函数中主要调用了`transformMain`函数。在`transformMain`函数中主要调用了4个函数,分别是:`createDescriptor``genScriptCode``genTemplateCode``genStyleCode`
Expand All @@ -645,7 +645,7 @@ async function transformMain(code, filename, options, pluginContext, ssr, custom
然后使用换行符`\n``genScriptCode`函数、`genTemplateCode`函数、`genStyleCode`函数的返回值拼接起来赋值给变量`resolvedCode`,这个`resolvedCode`就是vue文件编译成js文件的`code`字符串。
当浏览器执行到`import "/src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css";`语句时,触发了加载模块操作,再次触发了`@vitejs/plugin-vue-jsx`中的`transform`钩子函数。此时由于有了`type=style``query`,所以在`transform`函数中会执行`transformStyle`函数,在`transformStyle`函数中同样也是调用`vue/compiler-sfc``compileStyleAsync`函数,根据第一步的`descriptor`对象将vue文件的`<style>`模块转换为编译后的css代码`code`字符串,至此编译style部分也讲完了。
当浏览器执行到`import "/src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css";`语句时,触发了加载模块操作,再次触发了`@vitejs/plugin-vue`中的`transform`钩子函数。此时由于有了`type=style``query`,所以在`transform`函数中会执行`transformStyle`函数,在`transformStyle`函数中同样也是调用`vue/compiler-sfc``compileStyleAsync`函数,根据第一步的`descriptor`对象将vue文件的`<style>`模块转换为编译后的css代码`code`字符串,至此编译style部分也讲完了。
Expand Down
Binary file modified docs/images/guide/vue-to-js/progress-full.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/guide/vue-to-js/progress-full.webp
Binary file not shown.
2 changes: 1 addition & 1 deletion docs/template/baseCompile.md
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

- 第二部分为执行`getBaseTransformPreset`函数拿到`@vue/compiler-core`包中内置的`nodeTransforms``directiveTransforms`转换函数。

`nodeTransforms`数组中的为一堆处理node节点的转换函数,比如处理`v-on`指令的`transformOnce`转换函数、处理`v-if`指令的`transformIf`转换函数。
`nodeTransforms`数组中的为一堆处理node节点的转换函数,比如处理`v-once`指令的`transformOnce`转换函数、处理`v-if`指令的`transformIf`转换函数。

`directiveTransforms`对象中存的是对一些“会生成props的指令”进行转换的函数,用于给`node`节点生成对应的`props`。比如处理`v-model`指令的`transformModel`转换函数。

Expand Down
2 changes: 1 addition & 1 deletion docs/template/transform.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const msgList = ref([
const title = ref("hello word");
</script>
```
在上面的代码中,我们给input标签使用了v-for和v-model指令,还渲染了一个p标签。p标签中的内容由`foo`变量、`bar`字符串、`baz`变量拼接而来的
在上面的代码中,我们给input标签使用了v-for和v-model指令,还渲染了一个p标签。p标签中的内容由`title`变量渲染而来的

我们在前面的 [baseCompile函数](/template/baseCompile) 文章中已经讲过了,将template模版编译成**模版AST抽象语法树**的过程中不会处理v-for、v-model等内置指令,而是将其当做普通的props属性处理。

Expand Down

0 comments on commit 74d1f99

Please sign in to comment.