0

I'm reading the Vue.js guide, and I've come across the statement.

Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date. You should not attempt to access user defined globals in template expressions.

What are all the globals available in templates? That is, what is the content of the whitelist, exhaustively?

  • For reference, the source file & line where this can be found is: github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9 – Tyblitz Aug 13 at 15:01
1

Vue.js defines the whitelist of globals in the core/instance/proxy.js file:

//...

  const allowedGlobals = makeMap(
    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
    'require' // for Webpack/Browserify
  )

// ...

When Vue compiles the template, the string interpolations are processed, and if you reference a global that is not whitelisted, you will have a warning on Development.

If you are curious about how templates are compiled to render functions, look through the template explorer.

1

From what I understood from source code globals are declared in a variable and make it available via a proxy between vm instance and template :

  const allowedGlobals = makeMap(
    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
    'require' // for Webpack/Browserify
  )

So gobals available in template are :

  • Infinity
  • undefined
  • NaN
  • isFinite
  • isNaN
  • parseFloat
  • parseInt
  • decodeURI
  • decodeURIComponent
  • encodeURI
  • encodeURIComponent
  • Math
  • Number
  • Date
  • Array
  • Object
  • Boolean
  • String
  • RegExp
  • Map
  • Set
  • JSON
  • Intl
  • require

If you try to put in your template a reference that is not whitelisted or not in your vm instance then you will have this warning :

  Property or method "${key}" is not defined on the instance but
  referenced during render. Make sure that this property is reactive
  either in the data option, or for class-based components, by
  initializing the property. 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.