191. What is the versioning behavior in preset plugins?
You can explicitly specify versions of the plugins being used.
```javascript
{
"plugins": {
"@vue/cli-plugin-eslint": {
"version": "^3.0.0",
// ... other options for this plugin
}
}
}
```
For official plugins, the CLI will automatically use the latest version available in the registry
192. How do you allow plugin prompts?
Each plugin can inject its own prompts during the project creation process irrespective of preset declarations using **prompts: true** setting
For example, user can pick their own ESLint config using the below configuration
```javascript
{
"plugins": {
"@vue/cli-plugin-eslint": {
// let the users pick their own ESLint config
"prompts": true
}
}
}
```
193. What are remote presets?
You can share a preset with other developers by publishing it in a git repo. The repo can be published in either github, GitLab or BitBucket.
The repo will contain below files,
1. **preset.json:** The main file containing the preset data and it is required.
2. **generator.js:** A generator that can inject or modify files in the project.
3. **prompts.js:** A prompts file that can collect options for the generator.
You can apply `--preset` option to use remote presets while creating the project
```javascript
# use preset from GitHub repo
vue create --preset username/repo my-project
```
194. Can I use local presets?
Yes, Vue CLI will load local presets if the value for the --preset option is a relative or absolute file path, or ends with .json. i.e, You can work with local presets directly. These local presets avoids repeatedly pushing the preset to a remote repo to test.
```javascript
// Directory contains preset.json file
vue create --preset ./my-preset my-project
(OR)
vue create --preset my-preset.json my-project
```
195. What is the purpose of browserslist option?
The 'browserslist' option is available in package.json file in order to specify a range of browsers the project is supported. This value is going to be used by babel and autoprefixer to transpile javascript features and applying vendor prefixes.
For example, you can declare it as follows,
```javascript
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
```
196. How do you find VueJS version using API?
The community plugins and components might need different strategies for different versions. In this case, you can use **Vue.version** which provides installed version of Vue as a string.
For example, you can implement different logic based on different versions
```javascript
let version = Number(Vue.version.split('.')[0])
if (version === 2) {
// Vue v2.x.x
} else if (version === 1) {
// Vue v1.x.x
} else {
// Unsupported versions of Vue
}
```
197. How do you create reactive objects?
From 2.6 version onwards, you can create reactive objects with Vue.observable() global API.
```javascript
const reactiveState = Vue.observable({
count: 0
})
```
These observable objects can be used directly in computed properties and render functions.
```javascript
const Demo = {
render(h) {
return h('button', {
on: { click: () => { reactiveState.count++ }}
}, `count is: ${state.count}`)
}
}
```
198. What is the purpose new slot directive?
In Vue 2.6 version, the new slot syntax is provided using v-slot directive which aligns syntax with Vue 3.0. This is going to be replacement for old slot syntax.
The comparison for old and new slot syntax:
```javascript
<!-- old -->
<user>
<template slot="header" slot-scope="{ msg }">
text slot: {{ msg }}
</template>
</user>
<!-- new -->
<user>
<template v-slot:header="{ msg }">
text slot: {{ msg }}
</template>
</user>
```
199. What is the use of compile method?
VueJS provides compile method which is used to compile a template string into a render function. This method is only available in the full build.
For example, you can compile template message:
```javascript
var result = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'Welcome to Vue world'
},
render: result.render,
staticRenderFns: result.staticRenderFns
})
```
200. What does nextTick do in VueJS?
The nextTick method is just a comfortable way to execute a function after the data has been set, and the DOM has been updated. As an example, the usage is going to be similar to setTimeout:
```javascript
// modify data
vm.msg = 'Welcome to Vue'
// DOM not updated yet
Vue.nextTick(function () {
// DOM updated
})
// usage as a promise (2.1.0+)
Vue.nextTick()
.then(function () {
// DOM updated
})
```
201. What is async error handling?
From 2.6 version onwards, Vue's built-in error handling mechanism can capture errors inside v-on handlers. Also,if any of your lifecycle hooks or event handlers performs asynchronous operations, you can now return a Promise from the function so that any uncaught errors from that Promise chain are also sent to your error handlers.
Let's take an example of mounted lifecycle hook,
```javascript
export default {
async mounted() {
// if an async error is thrown here, it now will get
// caught by errorCaptured and Vue.config.errorHandler
this.todos = await api.getTodos()
}
}
```
202. What are Dynamic Directive Arguments?
In Vue 2.6 release onwards, Directive arguments can now accept dynamic JavaScript expressions. i.e, the specific argument that we want to use is only known at runtime.
Let's assign dynamic key and event directives for a div element,
```javascript
<div v-bind:[key]="value"></div>
<div v-on:[event]="handler"></div>
```
203. What are the drawbacks of dynamic directive arguments?
Apart from the benefits of dynamic directives arguments, it brings two drawbacks or considerations on the usage
1. **Constraints on expressions:** When you perform complex JavaScript expressions, make sure that html attribute names cannot contain spaces and quotes.
The below expression doesn't work as expected
```javascript
<div :[key + 'unique']="value"></div>
```
Instead you may need to use string template syntax
```javascript
<div :[`${key}unique`]="value"></div>
```
2. ** Custom Directives:** The custom directive implementations need to have potential argument changes in addition to value changes.
204. What is the special handling for null values in dynamic directive arguments?
Dynamic argument values are expected to be strings but it allows `null` as a special value that explicitly indicates that the binding should be removed. Other types will be treated as mistakes and will trigger a warning. So null value can be applied for v-bind and v-on.
Comments
Post a Comment
please do not enter any spam link in the comment box