版博士V2.0程序
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

README.md 3.0 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. # @vue/reactivity-transform
  2. > ⚠️ This is experimental and the proposal has been dropped.
  3. > The feature is now marked as deprecated and will be removed from Vue core
  4. > in 3.4.
  5. >
  6. > See reason for deprecation [here](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028).
  7. ## Basic Rules
  8. - Ref-creating APIs have `$`-prefixed versions that create reactive variables instead. They also do not need to be explicitly imported. These include:
  9. - `ref`
  10. - `computed`
  11. - `shallowRef`
  12. - `customRef`
  13. - `toRef`
  14. - `$()` can be used to destructure an object into reactive variables, or turn existing refs into reactive variables
  15. - `$$()` to "escape" the transform, which allows access to underlying refs
  16. ```js
  17. import { watchEffect } from 'vue'
  18. // bind ref as a variable
  19. let count = $ref(0)
  20. watchEffect(() => {
  21. // no need for .value
  22. console.log(count)
  23. })
  24. // assignments are reactive
  25. count++
  26. // get the actual ref
  27. console.log($$(count)) // { value: 1 }
  28. ```
  29. Macros can be optionally imported to make it more explicit:
  30. ```js
  31. // not necessary, but also works
  32. import { $, $ref } from 'vue/macros'
  33. let count = $ref(0)
  34. const { x, y } = $(useMouse())
  35. ```
  36. ### Global Types
  37. To enable types for the macros globally, include the following in a `.d.ts` file:
  38. ```ts
  39. /// <reference types="vue/macros-global" />
  40. ```
  41. ## API
  42. This package is the lower-level transform that can be used standalone. Higher-level tooling (e.g. `@vitejs/plugin-vue` and `vue-loader`) will provide integration via options.
  43. ### `shouldTransform`
  44. Can be used to do a cheap check to determine whether full transform should be performed.
  45. ```js
  46. import { shouldTransform } from '@vue/reactivity-transform'
  47. shouldTransform(`let a = ref(0)`) // false
  48. shouldTransform(`let a = $ref(0)`) // true
  49. ```
  50. ### `transform`
  51. ```js
  52. import { transform } from '@vue/reactivity-transform'
  53. const src = `let a = $ref(0); a++`
  54. const {
  55. code, // import { ref as _ref } from 'vue'; let a = (ref(0)); a.value++"
  56. map
  57. } = transform(src, {
  58. filename: 'foo.ts',
  59. sourceMap: true,
  60. // @babel/parser plugins to enable.
  61. // 'typescript' and 'jsx' will be auto-inferred from filename if provided,
  62. // so in most cases explicit parserPlugins are not necessary
  63. parserPlugins: [
  64. /* ... */
  65. ]
  66. })
  67. ```
  68. **Options**
  69. ```ts
  70. interface RefTransformOptions {
  71. filename?: string
  72. sourceMap?: boolean // default: false
  73. parserPlugins?: ParserPlugin[]
  74. importHelpersFrom?: string // default: "vue"
  75. }
  76. ```
  77. ### `transformAST`
  78. Transform with an existing Babel AST + MagicString instance. This is used internally by `@vue/compiler-sfc` to avoid double parse/transform cost.
  79. ```js
  80. import { transformAST } from '@vue/reactivity-transform'
  81. import { parse } from '@babel/parser'
  82. import MagicString from 'magic-string'
  83. const src = `let a = $ref(0); a++`
  84. const ast = parse(src, { sourceType: 'module' })
  85. const s = new MagicString(src)
  86. const {
  87. rootRefs, // ['a']
  88. importedHelpers // ['ref']
  89. } = transformAST(ast, s)
  90. console.log(s.toString()) // let a = _ref(0); a.value++
  91. ```