vue method

The beginning will be the focus

1. Basic use of Vue

Instruction, interpolation

• Interpolation, expression
• Directives, dynamic attributes
• v-html: This will have XSS risk and will overwrite sub-components (all code blocks written internally will be overwritten and invalidated after use)

computed and watch

Vue calculated attributes

• Computed has a cache, and the data is unchanged and will not be recalculated (caching means no repeated loading). When dom is bound by v-model, get() and set() are required, otherwise an error will be reported

watch deep monitoring

• The watch itself is a shallow monitor, how to monitor deeply?
  You need to use handler and deep: true to deeply monitor the reference data type and you cannot get oldVal because it is a pointer type

class 和 style

• You can use class with: class="{ }" or: class="[ ]"
• style can also be: style="custom style object" Note that the wording should use camel case

Conditional rendering

• The usage of v-if v-else, you can use variables or === expressions
• What is the difference between v-if and v-show? What are the usage scenarios of v-if and v-show?
  v-if is to determine the loading/destroy of dom. v-show is to show/hide. If the condition is only used once, use v-if and use c-show multiple times.

Loop (list) rendering

• How to traverse objects?
  The loop array parameters have item and index (there is id in the array as a unique identifier) ​​the
  loop object parameters have val key index (key must have uniqueness similar to id)
• The importance of the key key can not be scribbled (such as random or index)
  key represents uniqueness and enhances performance
• v-for and v-if cannot be used together!
  It is not recommended to use for together. The priority will be higher. Every time it will be judged to affect performance.

event

• event parameter, custom parameter
  $event can be passed as a parameter. Vue's event is a primitive prototype object without any decoration
• Event modifier, key modifier
• [Observation] Where are the events bound?
  Event modifier

Form

• v-model
• Common form items textarea checkbox radio select
• The modifier laze number trim
  trim removes the leading and trailing spaces.
  laze is similar to the anti-shake input. When the driver input is completed, the driver two-way data binding
  number is converted to a number

prototype

The prototype has a property in each object. This is the prototype
chain of the total object : when this object looks for a total of properties that do not exist in itself, it will look for it in the property. There is a __prop__ property in the property. Look for it here, and the relationship you look for at this level is called the prototype chain.
The prototype conversion instantiated object can use the new method new fn() The
prototype conversion constructor method is object.property,
while the instantiation object and the constructor conversion prototype are both a method. Use
var obj=new Object();
obj.constructor=== Object
obj. proto ===Object.prototype

Vue two-way data binding details:

There are set and individual properties in the two-way data binding object because it is implemented with object.defineProperty

Vue two-way data binding is also achieved through the object.defineProperty method

The object.defineProperty method will define a new property on an object, or modify an existing property of an object, and return the object

What do the three parameters of object.defineProperty (obj, prop, descriptor) mean

obj: can be understood as the target object.
prop: The property name of the target object.
descriptor: The description of the attribute.

object.defineProperty is generally used to perform some operations on the properties of the object

The idea of ​​two-way binding is to use data to change and update the view, and the view to change and update the data

The implementation process is divided into three steps:
1. Implement a total of listeners, which are used to hijack and monitor all attributes. If there is a change, notify the subscriber.
2. Implement a subscriber, which can receive the notification of the attribute change and execute the corresponding function , And then update the view
3. Implement a parser. Can scan the relevant instructions of each node, and initialize the corresponding subscriber according to the initialization template data