1. Priority of v-for and v-if
- Obviously v-for is parsed prior to vi (the source code is clearly stated)
- If it occurs at the same time, each rendering will execute the loop first and then judge the condition. In any case, the loop is inevitable, which wastes performance
- To avoid this situation, nest the template in the outer layer, perform the v-if judgment at this layer, and then perform the v-for loop inside
2. Passing values between components
Three ways of passing values of components
2.1.1 The parent component passes values to the child component
- 1. Binding dynamic properties when the parent component calls the child component
<v-header :title="title"></v-header> - 2. There are props in the child component to receive the data passed by the parent component
- 3. You can pass attributes, methods, instances, and use them directly in sub-components
2.1.2 The child component actively obtains the properties and methods of the parent component
Sub-components pass directlythis.$parent.数据``this.$parent.方法
2. 2 child components pass values to the parent component
2.2.1 The parent component actively obtains the data and methods of the child component
- Define a ref when calling child components
<v-header ref="header"></v-header> - Pass in the parent component
this.$refs.header.属性 this.$refs.header.方法
2.2.2 The custom event of the child component passes the value to the parent component
Subassembly:
this. $emit("自定义事件名称" ,要传的数据) ;
Parent component:
<Header @childInput= ' getVal '></Header>
methods:{
getVal(msg){
/ /msg就是，
子组件传递的数据
}
}
Subassembly
<template>
<div>
父组件传递过来的: {
{
this.$parent.msg}}
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
export default {
props:{
msg:String
},
data () {
return {
childValue:"我是一个子组件的值"
}
},
methods: {
childClick () {
this.$emit('childClick',this.childValue)
}
}
}
</script>
Parent component
<template>
<div>
我的名字是
<!-- 子组件 -->
<!-- <child :msg="name"></child> -->
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<!-- 点击子组件按钮,将子组件的数据显示在父组件上 -->
<!-- 自定义事件的名称要与子组件$emit的一致 -->
<child @childClick="childByValue"></child>
{
{
name}}
</div>
</template>
<script>
import Child from './Child'
export default {
data() {
return {
name:"pz",
msg:"父组件数据"
}
},
components: {
child:Child
},
methods: {
childByValue(childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
</script>
2.3 Value passing between sibling components
(To transfer values between non-parent and child components, you need to define a public public instance file bus.js, which serves as an intermediate warehouse to transfer values, otherwise the effect of transferring values between routing components will not be achieved.)
Public bus.js
import Vue from 'vue'
export default new Vue()
Component A:
<template>
<div>
A组件:
<span>{
{
elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
Component B:
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{
{
name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
3. The role of key
Function: As long as it is to update the virtual dom
diff algorithm more efficiently.
If the node type is different, the virtual dom will directly kill all the previous nodes, then create and insert a new node, and will not compare the nodes after this node.
If the node type is the same, it will Reset the attributes of the node to achieve the update of the node.
Using the key will give each node as an identification, and the diff algorithm can correctly identify the node and find a new position to insert the node.
4. The difference between v-if v-show
- v-if is "real" conditional rendering, because it will ensure that event listeners and subcomponents in the conditional block are properly destroyed and rebuilt during the switching process.
- v-if is also lazy: if the condition is false in the initial rendering, nothing will be done until the condition becomes true for the first time, and then the conditional block will be rendered.
- In contrast, v-show is much simpler-no matter what the initial condition is, the element will always be rendered, and it is simply switched based on CSS.
- Generally speaking, v-if has a higher switching overhead, while v-show has a higher initial rendering overhead. Therefore, if you need to switch very frequently, v-show is better; if the conditions are unlikely to change during runtime, v-if is better.
5. How to make css only work in the current component
<style scope> </style>
Extension: How to change the style of introducing third-party components? For example, when swiper is introduced, the style of paging dots needs to be changed. Demonstration of using sass style penetration: parent element/deep/ child element
<style lang="sass" scope>
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
background:red;
}
</style>
6. Solve the problem of 300ms delay in mobile terminal time processing
- Download
npm install fastclick - 引入
import FastClick from ’ fastclick’
FastClick。attach ( document. body);
7. Purpose of vue-loader
vue-loader is a file loader, which is replaced with template/js/style into a js module
Purpose: js can write es6 css can use less sass
8. What does NextTick do
Description:
$nextTick is to execute a delayed callback after the next DOM update cycle ends. After modifying the function, use $nextTick to get the updated DOM
scene in the callback : operate based on the new view after the view is updated
9. Why does data in scaffolding return a function
Because of the characteristics of JS itself, if data is an object, then because the object itself is a reference type, when we modify one of its attributes, it will affect the data of all Vue instances. If data is returned as a function to an object, then the data attributes of each instance are independent and will not affect each other.
10. Understanding of keep-alive
Definition: It is a built-in component. It can save the transition state in the memory during the component switching process to prevent repeated rendering of the dom. The
description will not be rendered in the dom tree.
11. The difference between watch and computed
- The computed attribute is the known value in the data to get a new value, the performance is not good, and the changes of others affect you (passive)
- Watch monitors the data in the data, monitors routing changes, my changes affect others (actively), you can get the new value and the old value