深海游弋的鱼 – 默默的点滴

vue3的provide和inject

浅析

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。

provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

在组合式API中的用法

基本用法

似乎，组合式API的provide没有提供批量方法，只能每个变量写一句。

顶级组件：

<template>
  <div>
    <son />
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

provide("abc", "123");

</script>

子组件：

<template>
  <div>
    <grandson />
  </div>
</template>

<script setup>
import grandson from "./grandson.vue";
</script>

<div>

</div>

</template>

import grandson from "./grandson.vue";

</script>

孙组件：

<template>
  <div>我是孙子</div>
</template>

<script setup&gt;
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
</script>

</template>

import { inject } from "vue";

const abc = inject("abc");

console.log(abc);

</script>

官方说：

inject() can only be used inside setup() or functional components.

这个意思是说，inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。

例一：这是允许的，因为console.log是setup()生命周期里的同步代码

function xx() {
  console.log(inject("abc"))
}
xx()

function xx() {

console.log(inject("abc"))

}

xx()

例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。

例四：放在Promise.then()也是禁止的，比如：

Promise.resolve().then(() => {
  console.log(inject("abc"))
})

Promise.resolve().then(() => {

console.log(inject("abc"))

})

一级组件修改数据，孙子组件监听变更

provide的变量必须是响应式变量，孙子组件监听的变量也必须是响应式变量。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
provide("abc", $abc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

ref: abc = "123";

provide("abc", $abc);

</script>

孙子组件：

<template>
  <div>我是孙子 - {{abc}}</div>
</template>

<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
watch($abc, () => {
  console.log(abc + '变了');
});
</script>

</template>

import { inject, watch } from "vue";

ref: abc = inject("abc");

watch($abc, () => {

console.log(abc + '变了');

});

</script>

孙子组件修改数据，一级组件监听变更

一级组件除了提供数据，还要提供一个修改数据的方法，孙子组件要接收并使用这个方法，这样修改的就是一级组件的数据，修改之后又会影响孙子组件的数据。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
function updateAbc(val) {
  abc = val;
}
provide("abc", $abc);
provide("updateAbc", updateAbc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

ref: abc = "123";

function updateAbc(val) {

abc = val;

}

provide("abc", $abc);

provide("updateAbc", updateAbc);

</script>

孙子组件：

<template>
  <div @click="updateAbc('789')">我是孙子 - {{abc}}</div>
</template>

<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
const updateAbc = inject('updateAbc');
watch($abc, () => {
  console.log(abc + '变了');
});
</script>

</template>

import { inject, watch } from "vue";

ref: abc = inject("abc");

const updateAbc = inject('updateAbc');

watch($abc, () => {

console.log(abc + '变了');

});

</script>

禁止孙子组件修改一级组件的数据

禁止的话，一级组件传递的变量必须是只读的，可以是readonly，也可以是shallowRef。这样孙子组件修改数据的话，一级组件不会有反应。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { shallowRef, provide } from "vue";
let abc = shallowRef("123");
function updateAbc(val) {
  abc = val;
}
provide("abc", abc);
provide("updateAbc", updateAbc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { shallowRef, provide } from "vue";

let abc = shallowRef("123");

function updateAbc(val) {

abc = val;

}

provide("abc", abc);

provide("updateAbc", updateAbc);

</script>

在配置项式API中的用法

跟Vue 2差不多，简单说一下。

provide

provide语法比在组合式API里要灵活，毕竟可以用对象。比如：

provide: {
    user: 'John Doe',
 },

provide: {

user: 'John Doe',

如果要把data里的数据provide，说白了就是打算用this，provide要写成函数：

provide() {
    return {
      user: this.user,
      updateUser: this.updateUser
   }
},

provide() {

return {

user: this.user,

updateUser: this.updateUser

}

如果要提供计算属性，也是一样的道理，不过，如果不打算用配置项式计算属性，而是想用vue的computed方法

可以写成：

provide() {
    return {
      userLength: computed(() => this.user.length),
      updateUser: this.updateUser
    }
},

provide() {

return {

userLength: computed(() => this.user.length),

updateUser: this.updateUser

}

inject

inject的用法更简单，比如inject: ['user', 'updateUser']。

双向修改而且响应 想要双向修改而且响应，就必须借助reactive或者ref家族方法和computed方法。provide的数据必须是computed返回的数据，才能保证数据有变化时刷新孙子组件的数据。孙子组件要用computed + unref来解包装且计算属性，才能得到真正需要的数据。

可以看到，由于孙子组件的inject和computed的属性不能重名，所以我造出一个abcabc变量名，这就比较麻烦了。我们再看组合式API，就没有abcabc这种中间变量，原因是ref: abc = inject("abc");让接收和加响应式一气呵成，这也是组合式API的优势之一。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script>
import son from "./son.vue";
import { ref, shallowRef, computed, provide } from "vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      abc: 123,
    }
  },
  provide() {
    return {
      abcabc: computed(() => this.abc),
      updateAbc: this.updateAbc
    }
  },
  methods: {
    updateAbc(val) {
      this.abc = val;
    }
  }
}
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { ref, shallowRef, computed, provide } from "vue";

export default {

components: {

son,

data() {

return {

abc: 123,

}

provide() {

return {

abcabc: computed(() => this.abc),

updateAbc: this.updateAbc

}

methods: {

updateAbc(val) {

this.abc = val;

}

</script>

孙子组件：

<template>
  <div @click="updateAbc('789')">我是孙子 - {{ abc }}</div>
</template>

<script>
import { unref } from "vue";

export default {
  inject: ["abcabc", "updateAbc"],
  computed: {
    abc() {
      return unref(this.abcabc);
    },
  },
};
</script>

</template>

import { unref } from "vue";

export default {

inject: ["abcabc", "updateAbc"],

computed: {

abc() {

return unref(this.abcabc);

};

</script>

参考链接

vue3的provide和inject

vue3 -- @vue/compiler-sfc 单文件转换工具

@vue/compiler-sfc

"version": "3.2.37"

SFC是vue中重要的一环，也是vue3中对于静态节点进行缓存提升的重要位置

SFC -- single file Component 单文件组件，以 .vue 进行结尾，这个文件浏览器也不会识别，最终也是要被转换成js代码

SFC中包含三块，template、script、style等三块代码，分别表示模版、脚本、样式三块

@vue/compiler-sfc的作用就是把单文件组件编译成为js代码

parse

下面就看一看具体的使用

新建一个Foo.vue组件

<template>
    <input type="text" v-model="name">
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'foo',
    setup() {
        return {
            name: ref('jack')
        }
    }
})
</script>
<style lang="scss">
input {
    color: #333;
}
</style>

</template>

import { defineComponent, ref } from 'vue'

export default defineComponent({

setup() {

return {

}

})

</script>

input {

color: #333;

}

</style>

组件同时包括template、script、style三块

新建一个nodejs脚本

const { parse } = require("@vue/compiler-sfc")
const fs = require("fs")
fs.readFile("./foo.vue", (err, data) => {

    let parsed = parse(data.toString(), {
        filename: 'foo.vue'
    })
    console.log('parsed', parsed);

})

const { parse } = require("@vue/compiler-sfc")

const fs = require("fs")

fs.readFile("./foo.vue", (err, data) => {

let parsed = parse(data.toString(), {

filename: 'foo.vue'

})

console.log('parsed', parsed);

})

用fs读取到文件的内容后，使用parse解析, 最终会返回一个对象

{
  descriptor: {
    filename: 'foo.vue',
    source: '<template>\n' +
      '    <input type="text" v-model="name">\n' +
      '</template>\n' +
      "<script lang='ts'>\n" +
      "import { defineComponent, ref } from 'vue'\n" +
      'export default defineComponent({\n' +
      "    name: 'foo',\n" +
      '    setup() {\n' +
      '        return {\n' +
      "            name: ref('jack')\n" +
      '        }\n' +
      '    }\n' +
      '})\n' +
      '</script>\n' +
      '<style lang="scss">\n' +
      'input {\n' +
      '    color: #333;\n' +
      '}\n' +
      '</style>\n',
    template: {
      type: 'template',
      content: '\n    <input type="text" v-model="name">\n',
      loc: [Object],
      attrs: {},
      ast: [Object],
      map: [Object]
    },
    script: {
      type: 'script',
      content: '\n' +
        "import { defineComponent, ref } from 'vue'\n" +
        'export default defineComponent({\n' +
        "    name: 'foo',\n" +
        '    setup() {\n' +
        '        return {\n' +
        "            name: ref('jack')\n" +
        '        }\n' +
        '    }\n' +
        '})\n',
      loc: [Object],
      attrs: [Object],
      lang: 'ts',
      map: [Object]
    },
    scriptSetup: null,
    styles: [ [Object] ],
    customBlocks: [],
    cssVars: [],
    slotted: false,
    shouldForceReload: [Function: shouldForceReload]
  },
  errors: []
}

{

descriptor: {

filename: 'foo.vue',

source: '<template>\n' +

' <input type="text" v-model="name">\n' +

'</template>\n' +

"<script lang='ts'>\n" +

"import { defineComponent, ref } from 'vue'\n" +

'export default defineComponent({\n' +

" name: 'foo',\n" +

' setup() {\n' +

' return {\n' +

" name: ref('jack')\n" +

' }\n' +

'})\n' +

'</script>\n' +

'<style lang="scss">\n' +

'input {\n' +

' color: #333;\n' +

'}\n' +

'</style>\n',

type: 'template',

content: '\n <input type="text" v-model="name">\n',

loc: [Object],

attrs: {},

ast: [Object],

map: [Object]

script: {

type: 'script',

content: '\n' +

"import { defineComponent, ref } from 'vue'\n" +

'export default defineComponent({\n' +

" name: 'foo',\n" +

' setup() {\n' +

' return {\n' +

" name: ref('jack')\n" +

' }\n' +

'})\n',

loc: [Object],

attrs: [Object],

lang: 'ts',

map: [Object]

scriptSetup: null,

styles: [ [Object] ],

customBlocks: [],

cssVars: [],

slotted: false,

shouldForceReload: [Function: shouldForceReload]

errors: []

}

setup脚本改造foo.vue

<template>
    <input type="text" v-model="name">
</template>
<script lang='ts' setup>
import { ref } from 'vue'

const name = ref('jack');
</script>
<style lang="scss">
input {
    color: #333;
}
</style>

</template>

import { ref } from 'vue'

const name = ref('jack');

</script>

input {

color: #333;

}

</style>

setup语法编译后的结果

{
  descriptor: {
    filename: 'foo.vue',
    source: '<template>\n' +
      '    <input type="text" v-model="name">\n' +
      '</template>\n' +
      "<script lang='ts' setup>\n" +
      "import { ref } from 'vue'\n" +
      '\n' +
      "const name = ref('jack');\n" +
      '</script>\n' +
      '<style lang="scss">\n' +
      'input {\n' +
      '    color: #333;\n' +
      '}\n' +
      '</style>\n',
    template: {
      type: 'template',
      content: '\n    <input type="text" v-model="name">\n',
      loc: [Object],
      attrs: {},
      ast: [Object],
      map: [Object]
    },
    script: null,
    scriptSetup: {
      type: 'script',
      content: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",
      loc: [Object],
      attrs: [Object],
      lang: 'ts',
      setup: true
    },
    styles: [ [Object] ],
    customBlocks: [],
    cssVars: [],
    slotted: false,
    shouldForceReload: [Function: shouldForceReload]
  },
  errors: []
}

{

descriptor: {

filename: 'foo.vue',

source: '<template>\n' +

' <input type="text" v-model="name">\n' +

'</template>\n' +

"<script lang='ts' setup>\n" +

"import { ref } from 'vue'\n" +

'\n' +

"const name = ref('jack');\n" +

'</script>\n' +

'<style lang="scss">\n' +

'input {\n' +

' color: #333;\n' +

'}\n' +

'</style>\n',

type: 'template',

content: '\n <input type="text" v-model="name">\n',

loc: [Object],

attrs: {},

ast: [Object],

map: [Object]

script: null,

scriptSetup: {

type: 'script',

content: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",

loc: [Object],

attrs: [Object],

lang: 'ts',

setup: true

styles: [ [Object] ],

customBlocks: [],

cssVars: [],

slotted: false,

shouldForceReload: [Function: shouldForceReload]

errors: []

}

唯一的不同就是编译后的结果从原来的script上迁移到scriptSetup上

compileTemplate

拿到之前parse后的结果后，需要对template进行进一步的转换，把template结果进一步编译成对应的js vnode函数

let compileredTemplate = compileTemplate({
    id: '123',
    filename: 'foo.vue',
    source: parsed.descriptor.template.content
})
console.log('parsed', compileredTemplate);

let compileredTemplate = compileTemplate({

id: '123',

filename: 'foo.vue',

source: parsed.descriptor.template.content

})

console.log('parsed', compileredTemplate);

其中code的值就是最终模版编译的结果

{
  code: 'import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"\n' +
    '\n' +
    'export function render(_ctx, _cache) {\n' +
    '  return _withDirectives((_openBlock(), _createElementBlock("input", {\n' +
    '    type: "text",\n' +
    '    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))\n' +
    '  }, null, 512 /* NEED_PATCH */)), [\n' +
    '    [_vModelText, _ctx.name]\n' +
    '  ])\n' +
    '}',
  ast: {
    type: 0,
    children: [ [Object] ],
    helpers: [
      Symbol(vModelText),
      Symbol(withDirectives),
      Symbol(openBlock),
      Symbol(createElementBlock)
    ],
    components: [],
    directives: [],
    hoists: [],
    imports: [],
    cached: 1,
    temps: 0,
    codegenNode: {
      type: 13,
      tag: '"input"',
      props: [Object],
      children: undefined,
      patchFlag: '512 /* NEED_PATCH */',
      dynamicProps: undefined,
      directives: [Object],
      isBlock: true,
      disableTracking: false,
      isComponent: false,
      loc: [Object]
    },
    loc: {
      start: [Object],
      end: [Object],
      source: '\n    <input type="text" v-model="name">\n'
    },
    filters: []
  },
  preamble: '',
  source: '\n    <input type="text" v-model="name">\n',
  errors: [],
  tips: [],
  map: {
    version: 3,
    sources: [ 'foo.vue' ],
    names: [ 'name' ],
    mappings: ';;;wCACI,oBAAkC;IAA3B,IAAI,EAAC,MAAM;IADtB,6DACgCA,SAAI;;kBAAJA,SAAI',
    sourcesContent: [ '\n    <input type="text" v-model="name">\n' ]
  }
}

{

code: 'import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"\n' +

'\n' +

'export function render(_ctx, _cache) {\n' +

' return _withDirectives((_openBlock(), _createElementBlock("input", {\n' +

' type: "text",\n' +

' "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))\n' +

' }, null, 512 /* NEED_PATCH */)), [\n' +

' [_vModelText, _ctx.name]\n' +

' ])\n' +

'}',

ast: {

type: 0,

children: [ [Object] ],

helpers: [

Symbol(vModelText),

Symbol(withDirectives),

Symbol(openBlock),

Symbol(createElementBlock)

components: [],

directives: [],

hoists: [],

imports: [],

cached: 1,

temps: 0,

codegenNode: {

type: 13,

tag: '"input"',

props: [Object],

children: undefined,

patchFlag: '512 /* NEED_PATCH */',

dynamicProps: undefined,

directives: [Object],

isBlock: true,

disableTracking: false,

isComponent: false,

loc: [Object]

loc: {

start: [Object],

end: [Object],

source: '\n <input type="text" v-model="name">\n'

filters: []

preamble: '',

source: '\n <input type="text" v-model="name">\n',

errors: [],

tips: [],

map: {

version: 3,

sources: [ 'foo.vue' ],

names: [ 'name' ],

mappings: ';;;wCACI,oBAAkC;IAA3B,IAAI,EAAC,MAAM;IADtB,6DACgCA,SAAI;;kBAAJA,SAAI',

sourcesContent: [ '\n <input type="text" v-model="name">\n' ]

}

我们把结果单独拿出来看下

import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache) {
    return _withDirectives((_openBlock(), _createElementBlock("input", {
        type: "text",
        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))
    }, null, 512 /* NEED_PATCH */)), [
        [_vModelText, _ctx.name]
    ])
}

import { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache) {

return _withDirectives((_openBlock(), _createElementBlock("input", {

type: "text",

"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.name) = $event))

}, null, 512 /* NEED_PATCH */)), [

[_vModelText, _ctx.name]

])

}

最终返回了一个render函数，这里也就符合预期，vue组件中如果使用js的方式写，可以写一个render函数去渲染组件

compilerScript

根据parsed的结果来解析脚本部分，compileScript接收2个参数，第一个就是之前parse的结果，然后再传入相应的option

let compileredScript = compileScript(parsed.descriptor, {
    id: '123'
})
console.log('parsed', compileredScript);

let compileredScript = compileScript(parsed.descriptor, {

id: '123'

})

console.log('parsed', compileredScript);

编译后的结果，content就是最终编译出的代码

{
  type: 'script',
  content: "import { defineComponent as _defineComponent } from 'vue'\n" +
    "import { ref } from 'vue'\n" +
    '\n' +
    '\n' +
    'export default /*#__PURE__*/_defineComponent({\n' +
    '  setup(__props, { expose }) {\n' +
    '  expose();\n' +
    '\n' +
    "const name = ref('jack');\n" +
    '\n' +
    'const __returned__ = { name }\n' +
    "Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n" +
    'return __returned__\n' +
    '}\n' +
    '\n' +
    '})',
  loc: {
    source: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",
    start: { column: 25, line: 4, offset: 86 },
    end: { column: 1, line: 8, offset: 140 }
  },
  attrs: { lang: 'ts', setup: true },
  lang: 'ts',
  setup: true,
  bindings: { ref: 'setup-const', name: 'setup-ref' },
  imports: [Object: null prototype] {
    ref: {
      isType: false,
      imported: 'ref',
      source: 'vue',
      isFromSetup: true,
      isUsedInTemplate: false
    }
  },
  map: SourceMap {
    version: 3,
    file: null,
    sources: [ 'foo.vue' ],
    sourcesContent: [
      '<template>\n' +
        '    <input type="text" v-model="name">\n' +
        '</template>\n' +
        "<script lang='ts' setup>\n" +
        "import { ref } from 'vue'\n" +
        '\n' +
        "const name = ref('jack');\n" +
        '</script>\n' +
        '<style lang="scss">\n' +
        'input {\n' +
        '    color: #333;\n' +
        '}\n' +
        '</style>\n'
    ],
    names: [],
    mappings: ';AAIA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB;;;;;AAFwB;AAGxB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;'
  },
  scriptAst: undefined,
  scriptSetupAst: [
    Node {
      type: 'ImportDeclaration',
      start: 1,
      end: 26,
      loc: [SourceLocation],
      importKind: 'value',
      specifiers: [Array],
      source: [Node]
    },
    Node {
      type: 'VariableDeclaration',
      start: 28,
      end: 53,
      loc: [SourceLocation],
      declarations: [Array],
      kind: 'const'
    }
  ]
}

{

type: 'script',

content: "import { defineComponent as _defineComponent } from 'vue'\n" +

"import { ref } from 'vue'\n" +

'\n' +

'export default /*#__PURE__*/_defineComponent({\n' +

' setup(__props, { expose }) {\n' +

' expose();\n' +

'\n' +

"const name = ref('jack');\n" +

'\n' +

'const __returned__ = { name }\n' +

"Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n" +

'return __returned__\n' +

'}\n' +

'\n' +

'})',

loc: {

source: "\nimport { ref } from 'vue'\n\nconst name = ref('jack');\n",

start: { column: 25, line: 4, offset: 86 },

end: { column: 1, line: 8, offset: 140 }

attrs: { lang: 'ts', setup: true },

lang: 'ts',

setup: true,

bindings: { ref: 'setup-const', name: 'setup-ref' },

imports: [Object: null prototype] {

ref: {

isType: false,

imported: 'ref',

source: 'vue',

isFromSetup: true,

isUsedInTemplate: false

}

map: SourceMap {

version: 3,

file: null,

sources: [ 'foo.vue' ],

sourcesContent: [

'<template>\n' +

' <input type="text" v-model="name">\n' +

'</template>\n' +

"<script lang='ts' setup>\n" +

"import { ref } from 'vue'\n" +

'\n' +

"const name = ref('jack');\n" +

'</script>\n' +

'<style lang="scss">\n' +

'input {\n' +

' color: #333;\n' +

'}\n' +

'</style>\n'

names: [],

mappings: ';AAIA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB;;;;;AAFwB;AAGxB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;'

scriptAst: undefined,

scriptSetupAst: [

Node {

type: 'ImportDeclaration',

start: 1,

end: 26,

loc: [SourceLocation],

importKind: 'value',

specifiers: [Array],

source: [Node]

Node {

type: 'VariableDeclaration',

start: 28,

end: 53,

loc: [SourceLocation],

declarations: [Array],

kind: 'const'

}

]

}

content格式化之后的结果，所以说setup只是语法糖，最终还是以defineComponent去包裹一个对象进行返回的形式

import { defineComponent as _defineComponent } from 'vue'
import { ref } from 'vue'


export default /*#__PURE__*/_defineComponent({
    setup(__props, { expose }) {
        expose();

        const name = ref('jack');

        const __returned__ = { name }
        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
        return __returned__
    }

})

import { defineComponent as _defineComponent } from 'vue'

import { ref } from 'vue'

export default /*#__PURE__*/_defineComponent({

setup(__props, { expose }) {

expose();

const name = ref('jack');

const __returned__ = { name }

Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })

return __returned__

}

})

compileStyle

compileStyle 即解析SFC style模块的入口函数

由于sfc中style块是可以写多个的，所以parse最终的结果styles其实是个数组

由变量签名也可以看出

export interface SFCDescriptor {
  // ....
  styles: SFCStyleBlock[]
  
}

export interface SFCDescriptor {

// ....

styles: SFCStyleBlock[]

}

这里我们取第一个块打印出来看一下，实际情况下应该是去循环的

let compileredStyle = compileStyle({
    source: parsed.descriptor.styles[0].content,
    scoped: true,
    id: 'data-v-123'
})
console.log('parsed', compileredStyle);

let compileredStyle = compileStyle({

source: parsed.descriptor.styles[0].content,

scoped: true,

id: 'data-v-123'

})

console.log('parsed', compileredStyle);

编译结果

其中code即是最终的css结果

{
  code: '\ninput[data-v-123] {\n    color: #333;\n}\n',
  map: undefined,
  errors: [],
  rawResult: LazyResult {
    stringified: true,
    processed: true,
    result: Result {
      processor: [Processor],
      messages: [],
      root: [Root],
      opts: [Object],
      css: '\ninput[data-v-123] {\n    color: #333;\n}\n',
      map: undefined,
      lastPlugin: [Object]
    },
    helpers: {
      plugin: [Function: plugin],
      stringify: [Function],
      parse: [Function],
      fromJSON: [Function],
      list: [Object],
      comment: [Function (anonymous)],
      atRule: [Function (anonymous)],
      decl: [Function (anonymous)],
      rule: [Function (anonymous)],
      root: [Function (anonymous)],
      document: [Function (anonymous)],
      CssSyntaxError: [Function],
      Declaration: [Function],
      Container: [Function],
      Processor: [Function],
      Document: [Function],
      Comment: [Function],
      Warning: [Function],
      AtRule: [Function],
      Result: [Function],
      Input: [Function],
      Rule: [Function],
      Root: [Function],
      Node: [Function],
      default: [Function],
      result: [Result],
      postcss: [Function]
    },
    plugins: [ [Object], [Object], [Object] ],
    listeners: {
      Declaration: [Array],
      Rule: [Array],
      AtRule: [Array],
      OnceExit: [Array]
    },
    hasListener: true
  },
  dependencies: Set(0) {}
}

{

code: '\ninput[data-v-123] {\n color: #333;\n}\n',

map: undefined,

errors: [],

rawResult: LazyResult {

stringified: true,

processed: true,

result: Result {

processor: [Processor],

messages: [],

root: [Root],

opts: [Object],

css: '\ninput[data-v-123] {\n color: #333;\n}\n',

map: undefined,

lastPlugin: [Object]

helpers: {

plugin: [Function: plugin],

stringify: [Function],

parse: [Function],

fromJSON: [Function],

list: [Object],

comment: [Function (anonymous)],

atRule: [Function (anonymous)],

decl: [Function (anonymous)],

rule: [Function (anonymous)],

root: [Function (anonymous)],

document: [Function (anonymous)],

CssSyntaxError: [Function],

Declaration: [Function],

Container: [Function],

Processor: [Function],

Document: [Function],

Comment: [Function],

Warning: [Function],

AtRule: [Function],

Result: [Function],

Input: [Function],

Rule: [Function],

Root: [Function],

Node: [Function],

default: [Function],

result: [Result],

postcss: [Function]

plugins: [ [Object], [Object], [Object] ],

listeners: {

Declaration: [Array],

Rule: [Array],

AtRule: [Array],

OnceExit: [Array]

hasListener: true

dependencies: Set(0) {}

}

参考链接

vue3 -- @vue/compiler-sfc 单文件转换工具 -- 学习笔记

从Vue 2到Vue 3组织代码的思维转变

到了Vue 3，当我们看完组合式 API相关文档，蠢蠢欲动立马上手把业务代码挪到setup内时，竟发现无法在setup()内部通过 this 获取当前组件实例了(this 是 undefined)！

其实想要变相获取“this”可以用 getCurrentInstance ，比如像这样访问全局属性：

import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const user = ref('aizawasayo')
    const internalInstance = getCurrentInstance()
    console.log(this) // undefined
    // 1. 访问 globalProperties
    console.log(internalInstance.appContext.config.globalProperties)
    // 2. 当前组件实例真正内容
    console.log(internalInstance.ctx, internalInstance.proxy)
    return {
      user
    }
  }
}

import { getCurrentInstance } from 'vue'

const MyComponent = {

setup() {

const user = ref('aizawasayo')

const internalInstance = getCurrentInstance()

console.log(this) // undefined

// 1. 访问 globalProperties

console.log(internalInstance.appContext.config.globalProperties)

// 2. 当前组件实例真正内容

console.log(internalInstance.ctx, internalInstance.proxy)

return {

user

}

真正属于组件的内容是ctx和proxy，proxy就是对ctx包装了一层 Proxy。目前看来属实没用，就不展开来说了。

getCurrentInstance 只能在 setup 或生命周期钩子中调用。不仅使用起来麻烦，且只适用于开发环境。官方都告知我们日常开发中不要用：

貌似到头来this的问题还是无解。Vue 3 Composition API 的设计初衷也是为了减少对组件实例的依赖，避免this指向的困扰。包括一些全局方法也可以提取到 composables 组合函数中，无需再通过当前组件的原型链获得。我们动不动就通过this获取组件实例的思想该转变了。

怎么个直接使用法？我们先看一眼简易版 选项式 API 和 组合式 API 的对比。再用例子来捋：

API 对比

1. 读写数据

Vue 2的做法，或者说Option API更准确 (后面就简写成Vue 2)

data中定义，this.xxx获取
<template>模版中不需要用this

<script>
import { getUsers } from '@/api/user'
export default {
  name: 'User',
  data: {
    return {
      listLoading: false,
      list: [],
      total: 0,
      queryInfo: {
        query: '',
        page: 1,
        pageSize: 10
      },
      emptyText: '没有相关数据',
    }
  },
  mounted() {
    this.listLoading = true
    getUsers(this.queryInfo).then(response => {
      this.list = response.data.list
      this.total = response.data.total
      this.listLoading = false
    })
  }  
}
</script>

import { getUsers } from '@/api/user'

export default {

data: {

return {

listLoading: false,

list: [],

total: 0,

queryInfo: {

query: '',

page: 1,

pageSize: 10

emptyText: '没有相关数据',

}

mounted() {

this.listLoading = true

getUsers(this.queryInfo).then(response => {

this.list = response.data.list

this.total = response.data.total

this.listLoading = false

})

}

</script>

Vue 3 的 Composition API (后面就简写成 Vue 3)

用ref reactive定义。
通过ref方法定义的属性在 setup 函数内需要通过.value去访问它的值 (template 模版内不用)， reactive则不用。我们可以简单地把 ref(obj) 理解为 reactive({ value: obj })。
详细请看 ➡️ 【Vue 3 之：弄清 ref reactive toRef toRefs】

如何选择 ref 和 reactive？建议：

基础类型值(String、Number、Boolean等) 或单值对象(类似{ count: 3 }这样只有一个属性值的对象) 使用 ref
引用类型值(Object、Array)使用 reactive
对于 ref 对象可以使用 unref 语法糖来免去.value访问的困扰

<script>
import { ref, reactive, onMounted } from 'vue'
export default {
  name: 'User',
  setup() {
    const listLoading = ref(false)
    const list = ref([]),
    const total = ref(0),
    const queryInfo = reactive({
      query: '',
      page: 1,
      pageSize: 10
    })
    const emptyText = ref('没有相关数据')

    onMounted(() => {
      listLoading.value = true
      getUsers(queryInfo).then(response => {
        list.value = response.data.list
        total.value = response.data.total
        listLoading.value = false
      })  
    })

    return {
      listLoading, 
      list,
      total,
      queryInfo,
      emptyText
    }
  }
}
</script>

import { ref, reactive, onMounted } from 'vue'

export default {

setup() {

const listLoading = ref(false)

const list = ref([]),

const total = ref(0),

const queryInfo = reactive({

query: '',

page: 1,

pageSize: 10

})

const emptyText = ref('没有相关数据')

onMounted(() => {

listLoading.value = true

getUsers(queryInfo).then(response => {

list.value = response.data.list

total.value = response.data.total

listLoading.value = false

})

return {

listLoading,

list,

total,

queryInfo,

emptyText

}

</script>

2. 定义/调用方法

Vue 2：`methods`

继续上面的例子，我们把请求列表数据的操作提取成一个方法。(略去重复的代码)

<!--模版中调用 methods 方法-->
<template>
  <button @click="show('🐸')">触发 show</button>
</template>
<script>
export default {
  methods: {
    async getList(params) { // 1.定义
      this.listLoading = true
      const response = await getUsers(params)
      this.list = response.data.list
      this.total = response.data.total
      this.listLoading = false
    },
    show(msg){
      console.log('helo', msg)
    }
  },
  mounted() {
    this.getList(this.queryInfo) // 2. 使用
  }  
}
</script>

</template>

export default {

methods: {

async getList(params) { // 1.定义

this.listLoading = true

const response = await getUsers(params)

this.list = response.data.list

this.total = response.data.total

this.listLoading = false

show(msg){

console.log('helo', msg)

}

mounted() {

this.getList(this.queryInfo) // 2. 使用

}

</script>

Vue 3

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    const getList = async (params) => { // 1.定义
      listLoading.value = true
      const response = await getUsers(params)
      list.value = response.data.list
      total.value = response.data.total
      listLoading.value = false
    }

    onMounted(() => {
      getList(queryInfo) // 2. 使用
    })
  }
}
</script>

import { onMounted } from 'vue'

export default {

setup() {

const getList = async (params) => { // 1.定义

listLoading.value = true

const response = await getUsers(params)

list.value = response.data.list

total.value = response.data.total

listLoading.value = false

}

onMounted(() => {

getList(queryInfo) // 2. 使用

})

}

</script>

3. 获取模版DOM元素/或组件实例的引用

Vue 2

直接整上 element-plus Form 表单的的例子，<el-form>是我们写的DemoForm组件的一个子组件，通过为它添加一个refattribute，就能使用使用this.$refs[ref值]直接访问子组件以及它的所有属性/方法了。
这边只放相对实际的场景用例，给 DOM 元素添加 ref 引用的例子看这里：【模板引用】。

<template>
  <el-form :model="formData" ref="formRef">
    <el-form-item label="年龄" prop="age" :rules="formRules">
      <el-input type="age" v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'DemoForm',
  data() {
    return {
      formData: {
        age: '',
      },
      formRules: [
        { required: true, message: '年龄不能为空' },
        { type: 'number', message: '年龄必须为数字值' },
      ],
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.formRef.resetFields()
    },
  },
}
</script>

<el-form :model="formData" ref="formRef">

<el-form-item label="年龄" prop="age" :rules="formRules">

<el-input type="age" v-model.number="formData.age"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">提交</el-button>

<el-button @click="resetForm">重置</el-button>

</el-form-item>

</el-form>

</template>

export default {

data() {

return {

formData: {

age: '',

formRules: [

{ required: true, message: '年龄不能为空' },

{ type: 'number', message: '年龄必须为数字值' },

}

methods: {

submitForm() {

this.$refs.formRef.validate(valid => {

if (valid) {

alert('submit!')

} else {

console.log('error submit!!')

return false

}

})

resetForm() {

this.$refs.formRef.resetFields()

}

</script>

Vue 3

我们来修改成 Composition API 版本：
别忘了 ref 创建的变量要用.value获取值
详细文档请阅：【在组合式 API 中使用 template refs】

<template>
  <el-form :model="formData" ref="formRef">
    <el-form-item label="年龄" prop="age" :rules="formRules">
      <el-input type="age" v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
export default {
  setup() {
    const formRef = ref(null) // 1.用 ref 创建一个空引用
    const formData = reactive({
      age: '',
    })
    const formRules = [
      { required: true, message: '年龄不能为空' },
      { type: 'number', message: '年龄必须为数字值' },
    ]
    onMounted(() => {
      // 2.组件实例将在初始渲染后分配给 ref
      console.log(formRef.value)
    })
    const submitForm = () => {
      //  别忘了 ref 创建的变量要用`.value`获取值
      formRef.value.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    const resetForm = () => {
      formRef.value.resetFields()
    }
    return {
      formRef,
      formData,
      formRules,
      submitForm,
      resetForm,
    }
  },
}
</script>

<el-form :model="formData" ref="formRef">

<el-form-item label="年龄" prop="age" :rules="formRules">

<el-input type="age" v-model.number="formData.age"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">提交</el-button>

<el-button @click="resetForm">重置</el-button>

</el-form-item>

</el-form>

</template>

import { reactive, ref } from '@vue/reactivity'

export default {

setup() {

const formRef = ref(null) // 1.用 ref 创建一个空引用

const formData = reactive({

age: '',

})

const formRules = [

{ required: true, message: '年龄不能为空' },

{ type: 'number', message: '年龄必须为数字值' },

]

onMounted(() => {

// 2.组件实例将在初始渲染后分配给 ref

console.log(formRef.value)

})

const submitForm = () => {

// 别忘了 ref 创建的变量要用`.value`获取值

formRef.value.validate(valid => {

if (valid) {

alert('submit!')

} else {

console.log('error submit!!')

return false

}

})

}

const resetForm = () => {

formRef.value.resetFields()

}

return {

formRef,

formData,

formRules,

submitForm,

resetForm,

}

</script>

4. 父组件向子组件传值

文档：Props
使用 DOM 模板时，camelCase (驼峰命名法) 的 props 需要使用等价的 kebab-case (短横线分隔命名) 命名。

说明：第 4-8 点 都会结合同一个 Tabs 标签页的例子，循序渐进梳理这几个属性或方法。依然用了element-plus 的组件(Tabs和TabPane)。

Vue 2

父组件：📃src/views/design/indexV2.vue

// src/views/design/indexV2.vue
<template>
  <div style="padding: 15px">
    <!-- 可以动态赋予一个变量的值 -->
    <!-- 也可以不用`:`传入一个静态的值 -->
    <design-tabs
      :tab-options="tabOptions"
      :active-tab="activeName"
    ></design-tabs>
  </div>
</template>
<script>
import DesignTabs from './DesignTabsV2.vue'
export default {
  name: 'DesignV2',
  components: { DesignTabs },
  data() {
    return {
      tabOptions: [
        { label: '衣服', key: 'clothingDesign', icon: 'cherry' },
        { label: '帽子', key: 'hatDesign', icon: 'cold-drink' },
        { label: '图案', key: 'patternDesign', icon: 'lollipop' },
      ],
      activeName: 'clothingDesign',
    }
  },
}
</script>

// src/views/design/indexV2.vue

<design-tabs

:tab-options="tabOptions"

:active-tab="activeName"

></design-tabs>

</div>

</template>

import DesignTabs from './DesignTabsV2.vue'

export default {

components: { DesignTabs },

data() {

return {

tabOptions: [

{ label: '衣服', key: 'clothingDesign', icon: 'cherry' },

{ label: '帽子', key: 'hatDesign', icon: 'cold-drink' },

{ label: '图案', key: 'patternDesign', icon: 'lollipop' },

activeName: 'clothingDesign',

}

</script>

子组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
<template>
  <el-tabs v-model="activeName">
    <el-tab-pane
      v-for="item in tabOptions"
      :label="item.label"
      :name="item.key"
    >
      <template #label>
        <span>
          <i :class="`el-icon-${item.icon}`" />
          {{ item.label }}
        </span>
      </template>
      <template #default>
        假设这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong
        >列表的子组件
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  name: 'DesignTabsV2',
  // 表示接收的 props
  // 如果定义成对象而不是数组，可以设置 prop 类型、默认值、是否必须
  props: ['tabOptions', 'activeTab'],
  data() {
    return {
      // 如果 prop 用来传递一个初始值
      // 子组件希望将其作为一个本地的数据来使用：
      activeName: this.activeTab,
    }
  }
}
</script>

// src/views/design/components/DesignTabsV2.vue

<el-tabs v-model="activeName">

<el-tab-pane

v-for="item in tabOptions"

:label="item.label"

:name="item.key"

<span>

</span>

</template>

假设这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong

>列表的子组件

</template>

</el-tab-pane>

</el-tabs>

</template>

export default {

// 表示接收的 props

// 如果定义成对象而不是数组，可以设置 prop 类型、默认值、是否必须

props: ['tabOptions', 'activeTab'],

data() {

return {

// 如果 prop 用来传递一个初始值

// 子组件希望将其作为一个本地的数据来使用：

activeName: this.activeTab,

}

</script>

Vue 3

转化成 Composition API 后的子组件：(一贯省略重复代码)
📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
<script>
import { ref, toRefs } from 'vue'
export default {
  name: 'DesignTabsV3',
  props: ['tabOptions', 'activeTab'],
  setup(props) {
    const { tabOptions, activeTab } = toRefs(props)
    const activeName = ref(activeTab)
    const handleClick = (tab, event) => {
      console.log(tab, event)
    }
    return {
      tabOptions,
      activeTab,
      activeName,
      handleClick,
    }
  },
}
</script>

// src/views/design/components/DesignTabsV3.vue

import { ref, toRefs } from 'vue'

export default {

props: ['tabOptions', 'activeTab'],

setup(props) {

const { tabOptions, activeTab } = toRefs(props)

const activeName = ref(activeTab)

const handleClick = (tab, event) => {

console.log(tab, event)

}

return {

tabOptions,

activeTab,

activeName,

handleClick,

}

</script>

5. 计算属性`computed`

比如我们现在希望在点击 tab 标签的时候能获得 tab 的序号(index)：

Vue 2

组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export default {
  name: 'DesignTabsV2',
  computed: {
    tabIndex() {
      return this.tabOptions.findIndex(item => item.key === this.activeName)
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(this.tabIndex) // tab 对应的 index
      console.log(tab.index, tab.props) 
      // 这样获得的`index`是字符串，props 可以获得传入`tab-pane`的属性
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export default {

computed: {

tabIndex() {

return this.tabOptions.findIndex(item => item.key === this.activeName)

methods: {

handleClick(tab, event) {

console.log(this.tabIndex) // tab 对应的 index

console.log(tab.index, tab.props)

// 这样获得的`index`是字符串，props 可以获得传入`tab-pane`的属性

}

Vue 3

这里就比较不一样了，props 的值是不允许在子组件直接修改的。子组件的activeName状态初始值为传入的activeTab，如果activeTab和tabOptions一样通过 toRefs 或 toRef 包装，那么activeName的修改是和activeTab深度响应的，这样会报错；
如果要同步修改父组件的值，可以通过emit事件(后面会说)

组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
import { ref, toRefs, computed } from 'vue'
export default {
  name: 'DesignTabsV3',
  setup(props) {
    const { tabOptions } = toRefs(props) // 切记 props 只读，不允许在子组件直接修改
    const activeName = ref(props.activeTab) // 将其赋为组件状态的初始值，直接 props.xx
    // const { tabOptions, activeTab } = toRefs(props)
    // const activeName = ref(activeTab) // 这样达咩

    const tabIndex = computed(() =>
      tabOptions.value.findIndex(item => {
        return item.key === activeName.value
      })
    )

    const handleClick = (tab, event) => {
      console.log(tabIndex.value)
    }
    return {
      tabOptions,
      activeName,
      handleClick,
    }
  }
}

// src/views/design/components/DesignTabsV3.vue

import { ref, toRefs, computed } from 'vue'

export default {

setup(props) {

const { tabOptions } = toRefs(props) // 切记 props 只读，不允许在子组件直接修改

const activeName = ref(props.activeTab) // 将其赋为组件状态的初始值，直接 props.xx

// const { tabOptions, activeTab } = toRefs(props)

// const activeName = ref(activeTab) // 这样达咩

const tabIndex = computed(() =>

tabOptions.value.findIndex(item => {

return item.key === activeName.value

})

)

const handleClick = (tab, event) => {

console.log(tabIndex.value)

}

return {

tabOptions,

activeName,

handleClick,

}

这里想额外提一嘴computed可以包在reactive内使用，在组件数据比较简单的情况下甚至可以直接用reactive包起组件全部数据，就好像 Option Api 的 data 选项那样。这样做的目的是在setup()访问不用再带上.value。
但这同时会带来一个问题，在模版需要使用state.xx去渲染，而且如果我们 return 的时候把state解构，包含的状态会失去响应性，那就得不偿失了。需要用toRefs包裹再传递，即可维持其响应性。

 // src/views/design/components/DesignTabsV3.vue
import { reactive, computed, toRefs } from 'vue'
export default {
  name: 'DesignTabsV3',
  setup(props) {
    const state = reactive({
      tabOps: props.tabOptions
      activeName: props.activeTab
      tabIndex: computed(() =>
        tabOptions.findIndex(item => {
        return item.key === state.activeName
      })
    })
    return { 
      // ...state //  这样会失去属性的响应式
      ...toRefs(state)
    } 
    // 甚至可以直接这样：
    return toRefs(state)
  }
}

// src/views/design/components/DesignTabsV3.vue

import { reactive, computed, toRefs } from 'vue'

export default {

setup(props) {

const state = reactive({

tabOps: props.tabOptions

activeName: props.activeTab

tabIndex: computed(() =>

tabOptions.findIndex(item => {

return item.key === state.activeName

})

return {

// ...state // 这样会失去属性的响应式

...toRefs(state)

}

// 甚至可以直接这样：

return toRefs(state)

}

6. 侦听器`watch`

获取这个tabIndex有什么用呢，目的是在当前标签变化时根据index刷新对应TabPane的子组件的数据。但是如果在标签点击事件触发数据刷新也不合适，因为我们不希望重复点击相同tab时也去刷新。那么这个时候watch或者watchEffect就登场了。

Vue 2

组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
<template>
  <!--省略部分 ...-->
      <template #default>
        这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong
        >列表的子组件
        <!--现在我们加上了 DesignList 组件-->
        <design-list :ref="'designList' + i" :type="item.key" />
      </template>
  <!--省略部分...-->
</template>
<script lang="jsx">
import { defineComponent, toRef } from 'vue'

// DesignList 组件，这里图方便混合组合式和选项式 API 写了
const DesignList = defineComponent({
  name: 'DesignList',
  props: ['type'],
  setup(props) {
    const key = toRef(props, 'type')
    return () => <div>{key.value}</div>
  },
  methods: {
    fetchData() {
      console.log(`重新请求${this.type}数据`)
    },  
  },
})

export default {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      console.log(`${val}`)
      // 触发子组件DesignList的数据请求
      this.$refs[`designList${this.tabIndex}`].fetchData() 
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong

>列表的子组件

<design-list :ref="'designList' + i" :type="item.key" />

</template>

</template>

import { defineComponent, toRef } from 'vue'

// DesignList 组件，这里图方便混合组合式和选项式 API 写了

const DesignList = defineComponent({

props: ['type'],

setup(props) {

const key = toRef(props, 'type')

return () => <div>{key.value}</div>

methods: {

fetchData() {

console.log(`重新请求${this.type}数据`)

})

export default {

watch: {

activeName(val) {

console.log(`${val}`)

// 触发子组件DesignList的数据请求

this.$refs[`designList${this.tabIndex}`].fetchData()

}

Vue 3

这个写法可能不是很直观，可以看下 ➡️ 组合式 API 模板引用在 v-for 中的用法
组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
<template>
  <!--省略部分 ...-->
  <!--别忘了这是v-for遍历生成的组件-->
    <design-list
      :ref="el => { if (el) designList[i] = el }"
      :type="item.key" :key="item.key + i" 
    />
  <!--省略部分 ...-->
</template>
<script>
import { ref, toRefs, computed, watch, defineComponent, toRef, onBeforeUpdate } from 'vue'

// DesignList 组件同上面代码👆

export default {
  name: 'DesignTabsV3',
  components: { DesignList },
  setup(props) {
    const designList = ref([])
    // 确保在每次更新之前重置ref
    onBeforeUpdate(() => {
      designList.value = []
    })
    watch(activeName, val => {
      console.log(`${val}`)
      designList.value[tabIndex.value].fetchData()
    })
  },
}
</script>

// src/views/design/components/DesignTabsV3.vue

<design-list

:ref="el => { if (el) designList[i] = el }"

:type="item.key" :key="item.key + i"

</template>

import { ref, toRefs, computed, watch, defineComponent, toRef, onBeforeUpdate } from 'vue'

// DesignList 组件同上面代码👆

export default {

components: { DesignList },

setup(props) {

const designList = ref([])

// 确保在每次更新之前重置ref

onBeforeUpdate(() => {

designList.value = []

})

watch(activeName, val => {

console.log(`${val}`)

designList.value[tabIndex.value].fetchData()

})

}

</script>

watch 和 watchEffect 的功能是等效的，都是侦听其依赖，并在依赖值变更时重新运行定义的函数。两者区别：

watch：

必须在第一个参数明确指定跟踪的依赖；
侦听器数据源只能是getter/effect函数、ref、reactive对象，或者包含这些类型(的数据)的数组。
换句话说，只要侦听数据不是ref、reactive对象，就必须传入一个箭头函数。
打个比方，若要侦听reactive对象的某个属性(例：const state = reactive({ count: 0 })的 count)，便不能像侦听单个ref或整个reactive对象那样直接传一个变量，而是必须在第一个参数传入一个回调函数，如() => state.count；
第二个参数是依赖值变更时执行的回调，函数内能访问被侦听状态的当前值和前一个值；
组件初始化时不会执行回调。如果需要可在第三个参数(Object)中设置immediate: true；
如果要对多层嵌套状态深度侦听，在第三个参数中设置deep: true

watchEffect：

无需手动传入依赖项；
只有一个参数，即侦听数据变更的回调函数，会自动跟踪所有函数中用到的变量；
组件初始化时即会执行一次。

7. 子组件向父组件通信(触发父组件方法)

Vue 2

父组件：📃src/views/design/indexV2.vue

// src/views/design/indexV2.vue
<template>
  <div style="padding: 15px">
    <design-tabs
      :tab-options="tabOptions"
      :active-tab="activeName"
      :tab-change="handleTabChange"
    ></design-tabs>
  </div>
</template>
<script>
export default {
  name: 'DesignV2',
  methods: {
    handleTabChange(tab) {
      this.activeName = tab
    },
  } 
}
</script>

// src/views/design/indexV2.vue

<design-tabs

:tab-options="tabOptions"

:active-tab="activeName"

:tab-change="handleTabChange"

></design-tabs>

</div>

</template>

export default {

methods: {

handleTabChange(tab) {

this.activeName = tab

}

</script>

子组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export defalut {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      this.$emit('tabChange', val)
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export defalut {

watch: {

activeName(val) {

this.$emit('tabChange', val)

}

Vue 3

子组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
export default {
  name: 'DesignTabsV3',
  emits: ['tabChange'],
  setup(props, context) {
    watch(activeName, val => {
      context.emit('tabChange', val)
    })
  }
}

// src/views/design/components/DesignTabsV3.vue

export default {

emits: ['tabChange'],

setup(props, context) {

watch(activeName, val => {

context.emit('tabChange', val)

})

}

8. 使用 Vue Router

Vue 2

📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export defalut {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export defalut {

watch: {

activeName(val) {

this.$router.push(`${this.$route.path}?tab=${val}`)

}

Vue 3

📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'DesignTabsV3',
  setup() {
    const router = useRouter()
    const route = useRoute()

    watch(activeName, val => {
      router.push(`${route.path}?tab=${val}`)
    })
  },
}

// src/views/design/components/DesignTabsV3.vue

import { useRouter, useRoute } from 'vue-router'

export default {

setup() {

const router = useRouter()

const route = useRoute()

watch(activeName, val => {

router.push(`${route.path}?tab=${val}`)

})

}

9. 获取 Vuex 对象

Vue 2

export default {
  mounted() {
    console.log(this.$store.state.name)
    this.$store.commit('show')
  } 
}

export default {

mounted() {

console.log(this.$store.state.name)

this.$store.commit('show')

}

Vue 3

<script>
import { onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
  setup(props) {
    const store = useStore()

    onMounted(() => {
      console.log(store.name)
      store.commit('show')
    })
  }
}
</script>

import { onMounted } from 'vue'

import { useStore } from 'vuex'

export default {

setup(props) {

const store = useStore()

onMounted(() => {

console.log(store.name)

store.commit('show')

})

}

</script>

参考链接

从 Vue 2 到 Vue 3 组织代码的思维转变（一）- 获取组件实例

ubuntu 16.04/macOS Big Sur(11.4)编译Quasar

$ cd ~

# 安装配置 Node Version Manager，用来管理安装使用特定版本
$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm 

$ bash install.sh

# 刷新环境变量，使得设置生效
$ source ~/.bashrc

$ nvm install 16.0.0

$ nvm use 16.0.0

$ cd ~

$ git clone https://github.com/quasarframework/quasar.git

$ cd quasar

$ git checkout quasar-v1.15.23

# git checkout quasar-v2.0.3

$ cd ui

# 清除缓存的node模块
$ rm -rf node_modules 

$ npm install nan -g 

$ npm install yarn -g

# 自动根据 package-lock.json 安装依赖
$ npm install

$ yarn build

# 在当前目录下的dist目录下生成quasar.umd.js

$ cd ~

# 安装配置 Node Version Manager，用来管理安装使用特定版本

$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm

$ bash install.sh

# 刷新环境变量，使得设置生效

$ source ~/.bashrc

$ nvm install 16.0.0

$ nvm use 16.0.0

$ cd ~

$ git clone https://github.com/quasarframework/quasar.git

$ cd quasar

$ git checkout quasar-v1.15.23

# git checkout quasar-v2.0.3

$ cd ui

# 清除缓存的node模块

$ rm -rf node_modules

$ npm install nan -g

$ npm install yarn -g

# 自动根据 package-lock.json 安装依赖

$ npm install

$ yarn build

# 在当前目录下的dist目录下生成quasar.umd.js

注意，目前（2020/07/05）发现，在macOS Big Sur(11.4)版本上，dev 分支没办法编译通过。

目前（2020/07/20）发现，在macOS Big Sur(11.4)系统，quasar 2.0.3/1.15.23 版本已经可以编译通过，开发分支经常编译不通过，这部分经常发生较大变动。

参考链接

macOS Big Sur(11.4)安装指定版本Node

# 安装配置 Node Version Manager，用来管理安装使用特定版本
$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm 

$ bash install.sh

# 刷新环境变量，使得设置生效
$ source ~/.bashrc

$ nvm install 12.16.2

$ nvm use 12.16.2

# 安装配置 Node Version Manager，用来管理安装使用特定版本

$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm

$ bash install.sh

# 刷新环境变量，使得设置生效

$ source ~/.bashrc

$ nvm install 12.16.2

$ nvm use 12.16.2

参考链接

macOS Big Sur(11.4)编译vuelidate 2.x适配Vue 3.x

目前，vuelidate 2.x暂时还没发布正式版本，而如果需要适配Vue 3.x，则需要自己编译，编译过程如下：

$ brew install npm

$ brew install yarn

$ npm install bili -g

$ git clone https://github.com/vuelidate/vuelidate.git
# 如果需要编译umd版本，目前需要使用下面的仓库
# git clone https://github.com/wangqiang1588/vuelidate.git

$ cd vuelidate

$ cd packages

$ cd vuelidate

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ cd ..

$ cd validators

$ npm run build


# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ brew install npm

$ brew install yarn

$ npm install bili -g

$ git clone https://github.com/vuelidate/vuelidate.git

# 如果需要编译umd版本，目前需要使用下面的仓库

# git clone https://github.com/wangqiang1588/vuelidate.git

$ cd vuelidate

$ cd packages

$ cd vuelidate

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ cd ..

$ cd validators

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

移动端 JS 引擎哪家强

在一般的移动端开发场景中，每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的。但是市场瞬息万变，Native 语言在开发效率上存在一定不足，并且从APP版本更新到应用市场审核发布再到用户下载更新，总会存在一定的时间差，这样就导致新的功能无法及时覆盖全量用户。

为了解决这个问题，开发者们一般会在项目里引入一门脚本语言，提速APP的研发流程。在移动端应用比较广泛的脚本语言有 Lua和JavaScript，前者在游戏领域用的比较多，后者在应用领域用的比较多。本篇文章主要是想探讨一下移动双端（iOS & Android）的JavaScript引擎选型。由于个人水平有限，文章总会有遗漏和不足的地方，还请各位大佬多多指教。

JS 引擎选型要点

JavaScript作为世界上最热门的脚本语言，有着非常多的引擎实现：有Apple御用的 JavaScriptCore，有性能最强劲的V8，还有最近热度很高的QuickJS......如何从这些JS引擎里选出最适合的？我个人认为要有几个考量：

性能：这个没话说，肯定是越快越好
体积：JS引擎会增加一定的包体积
内存占用：内存占用越少越好
JavaScript 语法支持程度：支持的新语法越多越好
调试的便捷性：是否直接支持debug？还是需要自己编译实现调试工具链
应用市场平台规范：主要是iOS平台，平台禁止应用集成带JIT功能的虚拟机

比较麻烦的是，上面的几个点都不是互相独立的，比如说开启JIT的V8引擎，性能肯定是最好的，但它引擎体积就很大，内存占用也很高；在包体积上很占优势的QuickJS，由于没有JIT加持，和有JIT的引擎比起来平均会有5-10倍的性能差距。

下面我会综合刚刚提到的几个点，并选择了JavaScriptCore，V8，Hermes 和 QuickJS这4个JSVM，说说它们的优点和特点，再谈谈他们的不足。

继续阅读移动端 JS 引擎哪家强

Qussar QScrollArea动态适配View高度

我们在使用Qussar QScrollArea等控件的时候，很多情况下，必须给出一个固定的高度，否则控件的高度会变成 0，导致无法显示出来。如何动态适配View高度呢？参考如下：

<template>
  <q-page>
    . . .
    <q-scroll-area>
      <q-resize-obeserver @resize="updateHeights" />
    <q-scroll-area>
  </q-page>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      //重新计算整个区域的高度，使得滚动区域占满整个父控件的高度
      const sz = this.measureElWrapSize(this.$el);
      this.$el.style.height = sz.height + 'px';
    },
    /**
     * 字符串对象是否不为空
     */
    isNotEmpty: function (s) {
        return (!this.isEmpty(s));
    },
    /**
     * 字符串对象是否为空
     */
    isEmpty: function (s) {
        return (this.isNull(s) || ('' === s));
    },
    /**
     * 对象是否为空
     */
    isNull: function (o) {
        return ((undefined === o) || (null === o));
    },
    /**
     * 对象是否不为空
     */
    isNotNull: function (o) {
        return (!this.isNull(o));
    },
    // 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高
    measureElWrapSize: function (el) {
        const hls = []; //到第一次出现高度限制的父窗口的数组
        const wls = []; //到第一次出现宽度限制的父窗口的数组

        // 向上搜索，直到父控件出现高度限制，否则继续向上搜索
        let p = el.offsetParent;
        let maxH = window.innerHeight;
        while (this.isNotNull(p)) {
            const h = p.style.height;
            if (this.isNotEmpty(h)) {
                maxH = Math.min(parseInt(h), maxH);
                break;
            }
            hls[hls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余高度
        let i = 0;
        for (; i < hls.length; i++) {
            const e = hls[i];
            maxH = maxH - e.offsetTop;
        }

        //需要计算自身的顶部偏移
        maxH = maxH - el.offsetTop;

        if (maxH < 0) {
            maxH = 0;
        }

        // 向上搜索，直到父控件出现宽度限制，否则继续向上搜索
        let maxW = window.innerWidth;
        p = el.offsetParent;
        while (this.isNotNull(p)) {
            const w = p.style.width;
            if (this.isNotEmpty(w)) {
                maxW = Math.min(parseInt(w), maxW);
                break;
            }
            wls[wls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余宽度
        i = 0;
        for (; i < wls.length; i++) {
            const e = wls[i];
            maxW = maxW - e.offsetLeft;
        }

        //需要计算自身的左侧偏移
        maxW = maxW - el.offsetLeft;
        
        if (maxW < 0) {
            maxW = 0;
        }

        return {width: maxW, height: maxH};
    },
  },
}

100

101

102

103

104

105

106

107

108

109

110

111

<q-page>

. . .

<q-scroll-area>

<q-resize-obeserver @resize="updateHeights" />

<q-scroll-area>

</q-page>

</template>

. . .

export default {

. . .

methods: {

. . .

updateHeights(size) {

// {

// width: 20 // width of container (in px)

// height: 50 // height of container (in px)

// }

//重新计算整个区域的高度，使得滚动区域占满整个父控件的高度

const sz = this.measureElWrapSize(this.$el);

this.$el.style.height = sz.height + 'px';

/**

* 字符串对象是否不为空

isNotEmpty: function (s) {

return (!this.isEmpty(s));

/**

* 字符串对象是否为空

isEmpty: function (s) {

return (this.isNull(s) || ('' === s));

/**

* 对象是否为空

isNull: function (o) {

return ((undefined === o) || (null === o));

/**

* 对象是否不为空

isNotNull: function (o) {

return (!this.isNull(o));

// 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高

measureElWrapSize: function (el) {

const hls = []; //到第一次出现高度限制的父窗口的数组

const wls = []; //到第一次出现宽度限制的父窗口的数组

// 向上搜索，直到父控件出现高度限制，否则继续向上搜索

let p = el.offsetParent;

let maxH = window.innerHeight;

while (this.isNotNull(p)) {

const h = p.style.height;

if (this.isNotEmpty(h)) {

maxH = Math.min(parseInt(h), maxH);

break;

}

hls[hls.length] = p;

p = p.offsetParent;

}

// 逐层遍历父亲控件，计算剩余高度

let i = 0;

for (; i < hls.length; i++) {

const e = hls[i];

maxH = maxH - e.offsetTop;

}

//需要计算自身的顶部偏移

maxH = maxH - el.offsetTop;

if (maxH < 0) {

maxH = 0;

}

// 向上搜索，直到父控件出现宽度限制，否则继续向上搜索

let maxW = window.innerWidth;

p = el.offsetParent;

while (this.isNotNull(p)) {

const w = p.style.width;

if (this.isNotEmpty(w)) {

maxW = Math.min(parseInt(w), maxW);

break;

}

wls[wls.length] = p;

p = p.offsetParent;

}

// 逐层遍历父亲控件，计算剩余宽度

i = 0;

for (; i < wls.length; i++) {

const e = wls[i];

maxW = maxW - e.offsetLeft;

}

//需要计算自身的左侧偏移

maxW = maxW - el.offsetLeft;

if (maxW < 0) {

maxW = 0;

}

return {width: maxW, height: maxH};

}

或者类似下面的情况：

<div id="q-app">
    <div class="q-pa-md">
        <q-layout class="shadow-2 rounded-borders" container ref="mainView"
                  view="hHh Lpr lff">
            . . . 
            <q-resize-obeserver @resize="updateHeights" />
        </q-layout>
    </div>
</div>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      const offset = this.$refs.mainView.$el.offsetTop;
      this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px';
    }
  },
}

<q-layout class="shadow-2 rounded-borders" container ref="mainView"

view="hHh Lpr lff">

. . .

<q-resize-obeserver @resize="updateHeights" />

</q-layout>

</div>

</template>

. . .

export default {

. . .

methods: {

. . .

updateHeights(size) {

// {

// width: 20 // width of container (in px)

// height: 50 // height of container (in px)

// }

const offset = this.$refs.mainView.$el.offsetTop;

this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px';

}

参考链接

clientHeight、offsetHeight、scrollHeight

我们开发WEB代码的时候,经常回遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别。

继续阅读clientHeight、offsetHeight、scrollHeight

Thymeleaf公共css,js提取及自有css,js导入

之前参考网上的各种方法，均为达到期望的效果，于是到Thymeleaf 官网逛了下，找到官网的例子来实现了：

以fragment方式分离公有css和js，
以replace+参数的方式传入每个页面单独的css和js.

1 2	以fragment方式分离公有css和js，以replace+参数的方式传入每个页面单独的css和js.

直接上栗子：

公有css(存放在templates/common/htmlHead.html中):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
    <!-- Common styles and scripts -->
    <title th:replace="${title}">The awesome application</title>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta name="description" content=""></meta>
    <meta name="author" content=""></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
    <link rel="icon" href="/img/icon.ico" type="image/x-icon" />

    <link rel="shortcut icon" href="/favicon.ico" />
    <link th:href="@{/webjars/bootstrap/3.3.7/dist/css/bootstrap.css}" rel="stylesheet">
    <link href="css/common/top_header.css" rel="stylesheet">
    <link href="css/common/bottom_footer.css" rel="stylesheet">
    <!--<link th:href="${myCss}" rel="stylesheet">-->
    <link th:href="@{/webjars/cropper/2.3.4/dist/cropper.css}" rel="stylesheet">
    <link href="css/common/rspMsg.css" rel="stylesheet">
    <link href="css/common/common.css" rel="stylesheet">

    <!--/* Per-page placeholder for additional links */-->
    <th:block th:replace="${links}" />
</head>

公有css(存放在templates/common/htmlHead.html中):

<!DOCTYPE html>

<title th:replace="${title}">The awesome application</title>

<th:block th:replace="${links}" />

</head>

一般页面调用公有CSS，并使用自己的CSS:

<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="common/htmlHead :: common_header(~{::title},~{::link})">
    <title>设置</title>
    <link rel="stylesheet" href="css/index.css">
</head>
</html>

<!DOCTYPE html>

</head>

</html>

公有js的提取方式是一样的：

<!DOCTYPE html>
<html lang="zh-CN">
<div th:fragment="common_js(scripts)">
    <script th:src="@{/webjars/vue/2.3.4/dist/vue.js}"></script>
    <script th:src="@{/webjars/vue-resource/1.3.1/dist/vue-resource.js}"></script>
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.js}"></script>
    <script th:src="@{/webjars/tether/1.4.0/js/tether.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/dist/js/bootstrap.js}"></script>
    <script th:src="@{/webjars/cropper/2.3.4/dist/cropper.js}"></script>
    <script src="js/common/top_header.js"></script>
    <script src="js/common/common.js"></script>

    <!--/* Per-page placeholder for additional js */-->
    <th:block th:replace="${scripts}" />
</div>
</html>

<!DOCTYPE html>

<th:block th:replace="${scripts}" />

</div>

</html>

公有JS的使用包一层DIV即可：

......
<body>
......

<!--使用公有js-->
<div th:replace="common/htmlJS::common_js(~{::script})">
    <!--每个页面自己的js-->
    <script src="js/index.js"></script>
</div>
</body>
</html>

......

<body>

......

</div>

</body>

</html>

测试结果可用，具体解释请参考Thymeleaf官方文档

注意，上述的配置在引入的是，会多出来一个DIV标签，如果想去掉这个标签，可以使用如下方式声明以及引用

<!DOCTYPE html>
<html lang="zh-CN">
<th:block th:fragment="common_js(scripts)">
    <script th:src="@{/webjars/vue/2.3.4/dist/vue.js}"></script>
    <script th:src="@{/webjars/vue-resource/1.3.1/dist/vue-resource.js}"></script>
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.js}"></script>
    <script th:src="@{/webjars/tether/1.4.0/js/tether.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/dist/js/bootstrap.js}"></script>
    <script th:src="@{/webjars/cropper/2.3.4/dist/cropper.js}"></script>
    <script src="js/common/top_header.js"></script>
    <script src="js/common/common.js"></script>

    <!--/* Per-page placeholder for additional js */-->
    <th:block th:replace="${scripts}" />
</th:block>
</html>

<!DOCTYPE html>

<th:block th:fragment="common_js(scripts)">

<th:block th:replace="${scripts}" />

</th:block>

</html>

公有JS的使用包一层th:block即可：

......
<body>
......

<!--使用公有js-->
<th:block th:replace="common/htmlJS::common_js(~{::script})">
    <!--每个页面自己的js-->
    <script src="js/index.js"></script>
</th:block>
</body>
</html>

......

<body>

......

<th:block th:replace="common/htmlJS::common_js(~{::script})">

</th:block>

</body>

</html>

另外如果使用的SpringBoot版本是1.5.4，默认的thymeleaf不是3.0版本，上面的测试需要thymeleaf 3.0版本才可以，需要修改下pom.xml文件，添加以下配置即可：

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <!-- set thymeleaf version -->
        <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    </properties>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

<java.version>1.8</java.version>

<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>

<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>

</properties>

另外如果使用的SpringBoot版本是2.5.0，则不需要任何修改，直接可以生效。

2023年 9月
一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

浅析

在组合式API中的用法

一级组件修改数据，孙子组件监听变更

孙子组件修改数据，一级组件监听变更

禁止孙子组件修改一级组件的数据

在配置项式API中的用法

provide

inject

参考链接

@vue/compiler-sfc

parse

compileTemplate

compilerScript

compileStyle

参考链接

1. 读写数据

Vue 2的做法，或者说Option API更准确 (后面就简写成Vue 2)

Vue 3 的 Composition API (后面就简写成 Vue 3)

2. 定义/调用方法

Vue 2：methods

Vue 3

3. 获取模版DOM元素/或组件实例的引用

Vue 2

Vue 3

4. 父组件向子组件传值

Vue 2

Vue 3

5. 计算属性computed

Vue 2

Vue 3

6. 侦听器watch

Vue 2

Vue 3

7. 子组件向父组件通信(触发父组件方法)

Vue 2

Vue 3

8. 使用 Vue Router

Vue 2

Vue 3

9. 获取 Vuex 对象

Vue 2

Vue 3

参考链接

参考链接

参考链接

JS 引擎选型要点

参考链接

参考链接

Vue 2：`methods`

5. 计算属性`computed`

6. 侦听器`watch`