1. Data
API：/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
1. data
Type: Object | Function
Restriction: Component definition only accepts functions
Details: Data object of Vue instance. Vue will recursively convert the data attribute to getter/setter, so that the data attribute can respond to data changes. Objects must be pure objects (with zero or more key/value pairs). When a component is defined, data must be declared as a function that returns an initial data object, because the component may be used to create multiple instances. If data is still a pure object, all instances will share references to the same data object! By providing the data function, we can call the data function every time we create a new instance, thus returning a completely new copy of the data object of the initial data.
var data = { a: 1 }
// Create an instance directlyvar vm = new Vue({
data: data
})
// => 1
vm.$data === data // => true
// In () data must be a functionvar Component = ({
data: function () {
return { a: 1 }
}
})
2. computed
Type: { [key: string]: Function | { get: Function, set: Function } }
Details: Computed properties will be mixed into the Vue instance. All getters and setters' this context is automatically bound to Vue instances. The result of computed attributes is cached and will not be recalculated unless the dependent responsive attribute changes. Note that if a dependency (such as a non-responsive attribute) is outside the instance category, the computed attribute will not be updated.
var vm = new Vue({
data: { a: 1 },
computed: {
// Read only aDouble: function () {
return * 2
},
// Read and set aPlus: {
get: function () {
return + 1
},
set: function (v) {
= v - 1
}
}
}
})
// => 2
= 3
// => 2
// => 4
3. methods
Type: { [key: string]: Function }
Details: methods will be mixed into the Vue instance. These methods can be accessed directly through VM instances, or used in directive expressions. This in the method is automatically bound to a Vue instance.
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
++
}
}
})
()
// 2
4. watch
Type: { [key: string]: string | Function | Object | Array }
Details: An object, the key is the expression that needs to be observed, and the value is the corresponding callback function. The value can also be a method name, or an object containing options. The Vue instance will call $watch() when instantiated, traversing every property of the watch object.
5. props
Type: Array<string> | Object
Details: props can be an array or object that receives data from the parent component. props can be simple arrays, or use objects as an alternative, which allow configuration of advanced options such as type detection, custom validation, and setting default values.
You can use the following options based on object's syntax:
1 type: It can be one of the following native constructors: String, Number, Boolean, Array, Object, Date, Function, Symbol, any custom constructor, or an array composed of the above content. Will check if a prop is of the given type, otherwise a warning will be thrown. More information about Prop types is here.
2 default: any Specify a default value for the prop. If the prop is not passed in, use this value instead. The default value of an object or array must be returned from a factory function.
3 required: Boolean Defines whether the prop is a required item. In a non-production environment, if this value is truthy and the prop is not passed in, a console warning will be thrown.
4 validator: Function The custom verification function will substitute the value of the prop as a unique parameter. In a non-production environment, if the function returns a value of falsy (that is, verification failed), a console warning will be thrown. You can check more information about prop verification here.
2. DOM
API：/v2/api/#%E9%80%89%E9%A1%B9-DOM
Type: string | Element
Restrictions: Only effective when creating instances with new.
detailed:
(1) Provide a DOM element that already exists on the page as the mount target of the Vue instance. It can be a CSS selector or an HTMLElement instance.
(2) After the instance is mounted, the element can be accessed with vm.$el.
(3) If this option exists during instantiation, the instance will immediately enter the compilation process. Otherwise, explicit call vm.$mount() is required to start compilation manually.
The elements provided can only be used as mount points. Unlike Vue, all mounted elements will be replaced by the DOM generated by Vue. Therefore, it is not recommended to mount root instances to <html> or <body>.
If the render function and template property do not exist, the HTML that mounts the DOM element will be extracted and used as a template. At this time, the Vue library built with Runtime + Compiler must be used.
Type: string
Details: A string template is used as the identifier of a Vue instance. The template will replace the mounted element. The contents of the mounted element will be ignored unless the contents of the template have distribution slots.
If the value starts with #, it will be used as a selector and the innerHTML of the matching element is used as the template. A common trick is to include templates using <script type="x-template">.
For security reasons, you should only use Vue templates you trust. Avoid using other human-generated content as your template.
If the rendering function is included in the Vue option, the template will be ignored.
Type: (createElement: () => VNode) => VNode
Details: A replacement solution for string templates, allowing you to use JavaScript's maximum programming capabilities. The rendering function takes a createElement method as the first parameter to create the VNode.
If the component is a function component, the rendering function will also receive an additional context parameter to provide context information for function components without instances.
If the render function in the Vue option exists, the Vue constructor will not compile the render function from the template option or the HTML template extracted from the mount element specified by the el option.
2.2.0 New
Type: (createElement: () => VNode, error: Error) => VNode
Details: Work only in a developer environment.
When the render function encounters an error, another rendering output is provided. The error will be passed as a second parameter to renderError. This function is very practical with hot-reload.
Example:
new Vue({
render (h) {
throw new Error('oops')
},
renderError (h, err) {
return h('pre', { style: { color: 'red' }}, )
}
}).$mount('#app')
The above is the detailed content of the options summary of the vue instance. For more information about the options for VUE instance, please follow my other related articles!