In the past is translated to everyone, this time in a different form for everyone to introduce.

This article was written and edited by QC-L and KnowsCount.

VueConf 2021 will be held in Hangzhou on May 22, 2021, both online and offline, with You Yuxi as the keynote speaker. Address: vue.w3ctech.com

This beta brings some interesting new features and bug fixes.

New features

  • onServerPrefetch: Composition-API version of serverPrefetch
  • component-levelcompilerOptions
  • @vue/compiler-coreWhitespace handling policies are supported
  • Supported byapp.config.compilerOptionsConfigure the compiler at run time
  • Devtools has improved support for KeepAlive
  • Supported byis="vue:xxx"Convert ordinary elements into components

onServerPrefetch

For details, see PR 3070 and PR 2902

This feature addresses the problem of not providing serverPrefetch lifecycle hook functions in the comaction-API case.

This hook function is called onServerPrefetch.

If you have this need, try upgrading to version 3.0-beta

Related discussions:

  • vue-apollo
  • app-extension-apollo

@vue/complier-coreWhitespace handling policies are supported

For details, see PR 1600 and V2 Original Effects.

application

Let’s test this strategy:

Install a beta version of @vue/ Compiler-core

yarn add @vue/compiler-core@beta
Copy the code

Create a new index.js file

const core = require('@vue/compiler-core')

const { baseCompile: complie } = core

const { ast } = complie(` foo \n bar baz `, {
  whitespace: 'preserve' // condense
})

console.log(ast.children[0])
console.log(ast.children[0].content)
Copy the code

The general effect is as shown in the example:

<! -- Source code -->
      foo \n bar baz     

<! -- whitespace: 'preserve' -->
      foo \n bar baz     

<! -- whitespace: 'condense' -->
 foo bar baz 
Copy the code

The source code

DefaultParserOptions originally provided default condense only in the compiler-core parse file

whitespace: 'condense'
Copy the code

Added whitespace to compiler-core options file:

whitespace? :'preserve' | 'condense'
Copy the code

Related links:

  • PR 1600
  • stackoverflow
  • Vue / 2.0 compiler
  • Vue 2.0whitespace
  • Vue 2.0 PR

throughis="vue:xxx"Supports conversion of common elements

This update, from the source code, is compatible with both types.

  1. The deprecatedv-isinstruction
  2. is="vue:xxx"The properties of the

The source code


let { tag } = node

// 1. Dynamic components
const isExplicitDynamic = isComponentTag(tag)
const isProp =
  findProp(node, 'is') | | (! isExplicitDynamic && findDir(node,'is'))
if (isProp) {
  if(! isExplicitDynamic && isProp.type === NodeTypes.ATTRIBUTE) {// <button is="vue:xxx">
    // If not < Component >, just start with "vue:"
    // It is treated as a component in the parsing phase and takes place here
    // Tag is reassigned to the content after "vue:"tag = isProp.value! .content.slice(4)}else {
    const exp =
      isProp.type === NodeTypes.ATTRIBUTE
        ? isProp.value && createSimpleExpression(isProp.value.content, true)
        : isProp.exp
    if (exp) {
      return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
        exp
      ])
    }
  }
}
Copy the code
// If the tag is < Component >, or is="vue: XXX ", skip subsequent processing
if (
  name === 'is' &&
  (isComponentTag(tag) || (value && value.content.startsWith('vue:')))) {continue
}
// ...
Copy the code

There are several points in the above code:

  1. First of all,isComponentTag, to determine whether it is a dynamic component:
// This method is used to determine whether it is a dynamic component
function isComponentTag(tag: string) {
  return tag[0].toLowerCase() + tag.slice(1) = = ='component'
}
Copy the code
  1. Find if there areisattribute
// Check the attributes first
findProp(node, 'is')
// If not, determine whether it is a directive! isExplicitDynamic && findDir(node,'is')
Copy the code

The main reason is that the AST structure of the two is different.

Related links:

  • Support casting plain element
  • Custom Elements Interop

Bug fix

  • Compatible: processing and config. OptionMergeStrategies realize alarm e69fd (94)
  • Compiler-core: Comments are retained in production when the comment option is enabled (E486254)
  • HMR: Disallows removing __file key from component types (9db3cbb)
  • Tells: Update before fix ASNYC component thirsty (#3563) (C8D9683), watches #3560
  • Watches #3602 reactivity: Fixed readonly + Reactive Map traceability (#3604) (5036C51), watches #3602
  • Watch-core: ensures that the key of the props statement always exists (4fe4de0), watches #3288
  • Watch-core: Monitors multiple sources: computed (#3066) (e7300EB), watches #3068
  • Watches #3641 Teleport: Does not change reference to vnode.dynamicchildren (43f7815), watches #3641
  • Watch: Avoid traversing non-plain objects (62b8f4A)
  • Watch: this.$watch should support listening key path (870f2a7)

features

  • onServerPrefetch (#3070) (349eb0f)
  • The runtime compiler supports the component levelcompilerOptions (ce0bbe0)
  • Compiler-core: Whitespace Processing strategy (Dee3D6A)
  • config:usingapp.config.compilerOptionsSupport for configuring runtime compilers (091e6d6)
  • Devtools: Update support for KeepAlive (03AE300)
  • Support for casting plain elements into components with IS =”vue: XXX “(AF9E699)

Performance improvement

  • $attrs will only trigger an update if it actually changes (5566d39)
  • Compiler: Skipping unnecessary checks when parsing end tags (048AC29)