Some questions about vue.js and thinking Learning Notes (2) _javascript tips

Objective

This article is not a Vue tutorial, only for learning the Vue process of personal understanding and notes, there are incorrect places to welcome the discussion

1, computed calculation property function can not use the VM variable

In a function that evaluates a property, you cannot use the VM variable returned by the Vue constructor, because the VM has not yet returned and is still in the Vue internal constructor, so you can use this to replace the VM.
To use typescript, you can use the following methods to implement code IntelliSense

VM = VM | | This

Another: Other can not use VM variables, only use this variable place, all through this method to get typescript IntelliSense and code syntax check, such as the mounted lifecycle series functions.
But the VM reference typescript in the template is powerless, only waiting for the TS support vue JSX syntax (╯_╰) ╭

2. Other calculated properties cannot be referenced in the calculation attribute?

The official tutorial did not find a description (which I did not find), from the perspective of the use of the general can be summed up the following conclusions:

• Computed properties must refer to (dependent) non-computed or fixed values. (See DEMO1)
• If a calculated property references (relies on) other computed properties, the referenced computed property must reference a non computed attribute or a fixed value (see DEMO2)
• The computed property can be cycled dependent, but the most upstream computed attribute on the chain is ultimately dependent, and must refer to a non-computed attribute or a fixed value.
  

DEMO1: Official standard usage, computed attribute reference non-computed properties:

var vm = new Vue ({
 el: "#app",
 data: {
 dataval: "Xxcanghai"
 },
 computed: {
 computedVal1: function () {
 //standard usage, computed property reference non computed property return
 This.dataval + "_1";//Output Xxcanghai_1
 }}
);

DEMO2: A dependent chain header must refer to a non-computed attribute or a fixed value if the calculated property chain relies on other computed properties

var vm = new Vue ({
 el: "#app",
 data: {
 dataval: "Xxcanghai"
 },
 computed: {
 computedVal1: function () {return
 this.dataval + "_1";
 },
 computedval2:function () {
 //legal, COMPUTE attribute ComputedVal2 reference Computedval1,computedval1 dataval return
 this.computedval1 + "_2";//Output xxcanghai_1_2
 }
 }
});

The reason is easy to understand, and if you end up not referencing or relying on any of the computed properties, the computed property will fall into a dead loop when it is evaluated.

3. If you use component nesting in vue2.0, the template \ $children is an empty array before the parent component executes \ $forceUpdate ()

There are several prerequisites for triggering this problem:

• Vue version 2.0, 1.0 no this problem.
• Accessing $children variables in the parent component's templates using component nesting
• This problem can be triggered when the render is finished without writing the $children variable to the parent component's data variable (or other VM information).
  

<!--parent component HTML Template-->
<div id= "app" >
 <div>{{$children .length}}</div> <!--show 0 here, Should be for 3-->
 <child></child>
 <child></child>
 <child></child>
</div>

//Sub-component code
vue.component ("child", {
 Template: "<div>child</div>",
} );

The parent component declares the
new Vue ({
 el: "#app",
});

The following figure:

Solution 1: use \ $forceUpdate ()

Registers the parent component's mounted method, executes the $forceUpdate ()

<div id= "App" >
 <div>{{$children .length}}</div>
 <child></child>
 < child></child>
 <child></child>
</div>

vue.component ("child", {
 Template: "<div>child</div>",
});

New Vue ({
 el: #app,
 mounted:function () {this
 . $forceUpdate ();//force Redraw
 }
});

The $children is correct:

Solution 2: use VM variables instead of \ $children

Registers the parent component's mounted method, assigning $children to the variables of the custom VM.
Also use custom variables in the template instead of the default $children

<div id= "App" >
 <div>{{child.length}}</div> <!--using custom child objects-->
 <child> </child>
 <child></child>
 <child></child>
</div>

Vue.component ("Child", {
 Template: "<div>child</div>",
});

var vm = new Vue ({
 el: "#app",
 data: {child
 : []
 },
 mounted:function () {
 This.child = this . $children;//Manually assign the $children object to the custom child variable
 }
});

The cause of this problem can only be understood by reading the vue2.0 version of the source code.

4, if the parent component of the template or render function does not reference slot elements, then \ $children constant equals empty array

This issue is associated with question 3rd above.
The prerequisite for triggering this problem:

• vue2.0 version
• Both parent and child components are written directly in the caller template
• Accessing $children variables in a template
• The issue of forced flushes in question 3 above has been resolved
  

<div id= "App" >
 <!--subcomponents are written directly in the caller's template-->
 <parent>
 <child></child>
 <child></child>
 <child></child>
 </parent>
</div>

//Parent components
vue.component ("parent", {
 Template: "<p>parent child:{{$children. Length}} </p>",//No slot element in template
 mounted () {This
 . $forceUpdate ();
 }
});
Vue.component ("Child", {
 Template: "<div>child</div>"
});

var vm = new Vue ({
 el: "#app"
});

Solution 1: The parent component template contains the slot element

Add the slot element to the parent component's template. or reference this. $slots. Default variable in the Render function

Vue.component ("parent", {
 Template: "<p>parent child:{{$children. Length}} <slot></slot>< /p> ",
 mounted () {This
 . $forceUpdate ();
 }
});

Solution 2: write the child component definition in the parent component template

This solution modifies the 2nd element of the recurrence of this problem, that is, the child component definition can also be resolved from the caller to the template that is written to the parent component.

<div id= "App" >
 <parent>
 </parent>
</div>

vue.component ("parent", {
 / /directly in the parent component the Call subcomponent label
 Template: "<p>parent child:{{$children. length}}\
 <child></child>\
 <child></child>\
 </p> ",
 mounted () {This
 . $forceUpdate ();
 }
});
Vue.component ("Child", {
 Template: "<div>child</div>",
});

var vm = new Vue ({
 el: "#app",
 data: {child
 : []
 }
});

Although this method solves the problem, sometimes it is easier and easier for us to write directly to the component on the caller, such as tab and TabPage components.
The following tab component code may be more in line with the general human mind:

<div id= "App" >
 <tab>
 <tab-page>Page1</tab-page>
 <tab-page>page2 </tab-page>
 <tab-page>Page3</tab-page>
 </tab>
</div>

Related notes

Vue Learning Notes-1 (http://www.jb51.net/article/98869.htm)

Vue Study Note -2 (http://www.jb51.net/article/98878.htm)

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.