Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "Vue instructions v-show and v-if how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue instructions v-show and v-if how to use" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

I. the difference between v-show and v-if

In vue, both v-show and v-if can control whether the element is realistic on the page.

The display hiding of v-show is the display attribute of the operation element css, so when you use v-show to hide the element, the dom node of the element is still on the page; the display hiding of v-if is to add or remove the whole dom element. [related recommendation: vuejs video tutorial]

The switching of v-if has a process of partial compilation / unloading, during which the internal event listeners and subcomponents are destroyed and rebuilt appropriately; v-show simply manipulates the display property of css.

V-if is a true conditional rendering that ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during switching. No action is done only when the rendering condition is false and does not render until it is true.

The life cycle of the component is not triggered when v-show is changed from false to true. When v-if is changed from false to true, the beforeCreate, create, beforeMount and mounted life cycle hooks of the component are triggered, and the beforeDestory and destoryed methods of the component are triggered when true is changed into false.

V-if has higher switching consumption in terms of performance consumption; v-show has higher initial rendering consumption.

II. V-show and v-if usage scenarios

Both v-if and v-show can control the display and hiding of dom elements on the page.

V-if is more expensive than v-show (directly manipulating the addition and deletion of dom nodes), if you need to switch very frequently, it is better to use v-show, and if the conditions rarely change at run time, v-if is better.

Third, the principle analysis of v-show and v-if.

V-show whether it is true or false, the element will always be rendered. In the source code, if there is a layer of transition in the outer layer of the element bound with the v-show instruction, execute transition. If there is no nested transition in the outer layer of the el, set el.style.display directly.

Export const vShow: ObjectDirective = {beforeMount (el, {value}, {transition}) {el._vod = el.style.display = = 'none'?'': el.style.display if (transition & & value) {transition.beforeEnter (el)} else {setDisplay (el, value)}, mounted (el, {value}) {transition}) {if (transition & & value) {transition.enter (el)}}, updated (el, {value, oldValue}, {transition}) {/ /...}, beforeUnmount (el, {value}) {setDisplay (el, value)}}

V-if is obtained when the abstract syntax tree is converted into a code string. If v-if is false, the vnode generated by the render function will not contain the node to be rendered, but an annotated vnode node as a placeholder.

Export const transformIf = createStructuralDirectiveTransform (/ ^ (if | else | else-if) $/, (node, dir, context) = > {return processIf (node, dir, context, (ifNode, branch, isRoot) = > {/ /. Return () = > {if (isRoot) {ifNode.codegenNode = createCodegenNodeForBranch (branch, key, context) as IfConditionalExpression} else {/ / attach this branch's codegen node to the v-if root. Const parentCondition = getParentCondition (ifNode.codegenNode!) ParentCondition.alternate = createCodegenNodeForBranch (branch, key + ifNode.branches.length-1, context)}}) here, the article "how to use the Vue instruction v-show and v-if" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.