How to understand Vue

Vue is a set of progressive frameworks for building user interfaces. The core functionality of “progressive” Vue is a view template engine that can build a complete framework by adding component systems, client routing, and large-scale state management. These functions are independent of each other, and you can choose any other component based on the core function. Incremental is how Vue is used.

How do you build the user interface

Almost any type of application interface can be abstracted into a component tree. A Vue application consists of a root Vue instance created through the new Vue() function, and an optional nested, reusable tree of components.

Vue instance

Create a Vue instance

  1. Specified directlyelattribute
  var vm = new Vue({
    'el':"#root",
    'template':"<div>hello world</div>"
  });
Copy the code
  1. through$mountMethod to mount
  var vm = new Vue({
    'template':"<div>hello world</div>"
  })
  vm.$mount('#root');
Copy the code

Create a configuration object for the Vue instance

When a Vue instance is created, a configuration object can be passed in. This configuration object is divided into several categories: data, DOM, lifecycle hooks, resources, etc.

data

Data => Data object of the Vue instance

  1. Root instance/component data attribute difference, arrow function problem.
  • When a component is defined, data must be declared as a function that returns a data object (a function whose return value is an object). Because components can be used to create multiple instances, if data remains a pure object, all instances will share references to the same data object.
  • The data function can be called each time a new instance is created, returning a new copy of the original data as a data object.
  • If the value of data is an arrow function, this does not point to an instance of the component, but you can still access the instance as the first argument to the function
data: (vm) = >{{a: vm.MyProp }}
Copy the code
  1. The relationship between the data attribute and $data

– After the instance is created, the original data object can be accessed using vm.$data

  • Vue instances also proxy all properties of data objects, so accessing vm.a is equivalent to accessing vM. $data.a
  • Properties that start with _ or are not proxied by Vue instances (i.e. cannot be accessed through vM. a) because they may conflict with Vue built-in property and API methods, such as VM. The properties of the initial property are not proxied by the Vue instance (i.e. cannot be accessed through vM. a) because they may conflict with the built-in property and API methods of Vue, such as VM. Properties of the initial property are not proppable by Vue instances (i.e. cannot be accessed via vM. a), as they may conflict with the built-in Vue property API methods, which can be accessed using methods such as vM.data._property.
  1. Special point
  • Objects must be pure objects with zero or more key/value pairs. Data should only be data, and it is not recommended to observe objects with stateful behavior. (How to understand?)

props=> Receive data from the parent component

Props can be arrays or objects.

  1. whenpropsWhen is an array, the usage is as follows
Vue.component('test', {
  props: ['prop1'.'prop2']}Copy the code
  1. whenpropsIs used to configure advanced options, such as type detection, default values, and custom validation.
  • Type can be one of the following constructors:String.Number.Boolean.Array.Object.Date.Function.Symbol, any custom constructor or array of the above. Will check onepropIs of a given type, otherwise a warning is thrown.
  • Default: anyFor thepropSpecify a default value. If thepropIf it is not passed in, use this value instead. The default value of an object or array must be returned from a factory function.
  • The require: BooleanDefine thepropIn a non-production environment, if the value istruthyAnd that thepropIf not passed, the console warning will be thrown. (Non-production environment? Is there a warning in the development environment?
  • validator: FunctionCustom validation functions willpropAs the only argument. In a non-production environment, if the function returns onefalsyThat is, validation failed. A console warning will be thrown.

Note: When setting a default value, the default value of an object or array must be returned from a factory function.

Methods => Custom methods on instances

Methods will be mixed into the Vue instance and can be accessed directly from the instance or used in the instruction expression sheet, where this is custom bound to the Vue instance. Arrow functions should not be used to define methods functions (the arrow function this missing problem).

Computed properties

  • It is equivalent to mounting an additional attribute on the Vue instance, except that this attribute is calculated from one or more attributes in the data object
  • That is, the calculation properties are mixed into the Vue instance, and the This context of all getters and setters is automatically bound to the Vue instance
  • The result of the evaluated property is cached, except for recalculation of dependent responsive property changes.
  • Usage: both = functions or objects (get /set)
var vm = new Vue({
	data: {a:1},
	computed: {aDouble:function() {
			return this.a * 2
		},
		// Read and set
		aPlus: {
			get:function(){
				return this.a + 1
			},
			set: function(){
				this.a = v - 1}}}})Copy the code

watch=> Listener object

  • An object whose key name is the expression to observe and whose value is the corresponding callback function. The value can also be a method name, or an object that contains options. (Key name: expression; Key values: functions, objects, arrays)
  • When to add listener:VueCalled when instantiated$watchTo traverse thewatchObjectproperty.
  var vm = new Vue({
    data: {
        a:1.b:2.c:3.d:4.e: {f: {g:5}}},watch: {
        a:function(newValue,oldValue){
            console.log('newValue',newValue);
            console.log('oldValue',oldValue);
        },
        // Method name:
        b:'someMethod'.c: {// This callback is called when the property of any listening object changes, no matter how deeply nested it is
            handler:function(newValue,oldValue){}deep:true
        },
        d: {handler:'someMethod'.immediate:true // This callback will be invoked immediately after the listening starts
    	},
        e: [// We can pass in an array of handlers that will be called one by one when the value of e changes
            'handle1'.function handle2(newValue,oldValue){}, {handler:function handler3(newValue,oldValue){}}]}})Copy the code
  • Note: Configure the object’simmediateProperties,deepThe meaning of the attribute.