key attributes
why should we increase
key - api explanation
Special attribute key is mainly used in the virtual dom algorithm vue, if not applicable key, vue will be the use of a dynamic element to minimize as much as possible and try to repair / re-use the same algorithm type elements. Key use, it will change based Key rearrange the order of elements, the elements will be removed and the Key does not exist.
Why v-for to add Key
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list">
<input type="checkbox">
{{item.name}}
</li>
</ul>
<script>
// 创建vue实例，得到viewmodel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{id:1,name''}
]
},
methods: {
add() {
this.list.unshift({
id: ++this.newId,
name: this.name })
this.name=""
}
}
});
</script>
</div>There are key
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list" :key="item.id">
<input type="checkbox"> {{item.name}}
</li>
</ul>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '' },
{ id: 2, name: '' },
{ id: 3, name: '' }
]
},
methods: {
add() {
//注意这里是unshift
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
}
});
</script>
</div>
You must add a unique key Why use v-for?
const list = [
{
id: 1,
name: 'test1',
},
{
id: 2,
name: 'test2',
},
{
id: 3,
name: 'test3',
},
]<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>const list = [
{
id: 1,
name: 'test1',
},
{
id: 2,
name: 'test2',
},
{
id: 3,
name: 'test3',
},
{
id: 4,
name: '我是在最后添加的一条数据',
},
]const list = [
{
id: 1,
name: 'test1',
},
{
id: 4,
name: '我是插队的那条数据',
}
{
id: 2,
name: 'test2',
},
{
id: 3,
name: 'test3',
},
]Two identical components dom produce similar structures, different components have different structures dom.
The same level of a set of nodes
Special characteristics of the
key
Expected: number | string
Special attribute key is mainly used in the virtual dom algorithm vue, when the old and new nodes to identify vnodes contrast.
<ul>
<li v-for="item in items" :key="item.id"></li>
</ul>Alternatively it can be used to force elements, components, rather than use it repeatedly.
Complete life cycle of the trigger assembly of the hook
trigger transition
<transition>
<span :key="text">{{text}}</span>
</transition>ref is used to reference the element or sub-component registration information, reference information will be registered on the $ refs object's parent component. If used on ordinary dom element, a reference point is dom element, if used in the subassembly, reference to a component instance to:
<p ref="p"> hello </p>
<child-component ref="child"></child-component>When a v-for elements or components, including an array reference information component instance or node dom
It is
used to limit the dynamic components and is based on a template to work within dom
<component v-bind:is="currentView"></compoent>
<table>
<tr is="my-row"></tr>
</table>data: function () {
return {
todos: [
{
id: 1,
text: '学习使用 v-for'
},
{
id: 2,
text: '学习使用 key'
}
]
}
}<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul><ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>Never put v-if and v-for simultaneous use on the same element.
To filter a list of items
v-for="user in users" v-if="user.isActive"v-for="user in users"
v-if="shouldShowUsers"<ul>
<li v-for="user in users"
v-if="user.isActive"
:key="user.id">
{{ user.name }}
</li>
</ul>this.users.map(function (user) {
if (user.isActive) {
return user.name
}
})computed: {
activeUsers: function() {
return this.user.filter(function (user) {
return user.isActive
})
}
}<ul>
<li v-for="user in activeUsers"
:key="user.id">
{{user.name}}
</li>
</ul><ul>
<li v-for="user in users" v-if="shouldShowUsers" :key="use.id">
{{user.name}}
</li>
</ul><ul>
<li v-for = "user in users"
v-if="user.isActive"
:key="user.id">
{{user.name}}
</li>
</ul>
<ul>
<li v-for="user in users"
v-if="shouldShowUsers"
:key="user.id">
{{user.name}}
</li>
</ul><ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul><ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul><template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color: red;
}
</style><template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>
<template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<!-- 使用 CSS Modules -->
<style module>
.button {
border: none;
border-radius: 2px;
}
.buttonClose {
background-color: red;
}
</style><template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<!-- 使用 CSS Modules -->
<style module>
.button {
border: none;
border-radius: 2px;
}
.buttonClose {
background-color: red;
}
</style><template>
<button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style>The role of virtual Dom and Key attributes
<template>
<div id="app">
<input v-model="message" >
<input :value="message" @input="handleChange">
{{message}} {{message * message}}
<div :id="message"></div>
<todo-list>
<todo-item @delete="handleDelete" v-for="(item, index) in list" :key="index" :title="item.title" :del="">
<template v-slot:pre-icon="{value}">
<span>{{value}}</span>
</template>
</todo-item>
</todo-list>vue If the trigger is updated components
<script>
export default{
name: " ",
props: {
info: Object,
name: String,
list: Array
},
data(){
return {
a: ' ',
b: ' '
};
},
updated() {
console.log(' ');
},
methods: {
handleBChange() {
this.b = "vue" +Date.now();
}
}
};
And rational use of computed attribute listeners
Reduce computation logic template
data cache
data type (data responsive) fixed-dependent
Calculation of property: computed
<p>{{ reversedMessage1 }}</p>
<p>{{ reversedMessage2() }}</p>
<p> {{ now }} </p>
<button @click="() => $forceUpdate()">forceUpdate</button>
<br/>
<input v-model="message"/>
export default {
data() {
return {
message: 'hello'
};
},
computed: {
// 计算属性的getter
reversedMessage1: function() {
return this.message
.split("")
.reverse()
.join("");
},
now: function() {
return Date.now();
}
},
methods: {
reversedMessage2: function() {
return this.message
.split("")
.reverse()
.join("");
}Watch listener
is more flexible, versatile
watch can perform any logic, functions as a throttle, Ajax asynchronous data acquisition
<div>
{{$data}}
<br/>
<button @click="() => (a += 1)"><button>
</div>
wxport default {
data: function() {
return {
a: 1,
b: {c:2,d:3},
e: {
f: {
g: 4
}
},
h: []
};
},
watch: {
a: function(val, oldVal) {
this.b.c += 1;
},
"b.c": function(val, oldVal) {
this.b.d += 1;
},
"b.d": function(val, oldVal) {
this.e.f.g += 1;
}computed vs watch
computed can do, watch can do, not vice versa
can be computed using computed as much as possible
<div>
{{ fullName }}
<div> firstName: <input v-model="firstName"/></div>
<div> lastName: <input v-model="lastName"/></div>
</div>
export default {
data: function() {
return {
firstName: 'foo',
lastName: 'bar'
};
},
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
}
},
watch: {
fullName: function(val, oldVal) {
console.log("new",val,oldVal);
}
}vue life cycle of application scenarios and functional components
The life cycle:
Creation phase, updating stage, the destruction stage
创建阶段：
beforeCreate
created
beforeMount
render
mounted
Update phase
beforeUpdate
the render
Updated
Destruction stage
beforeDestory
destoryed
创建阶段：
beforeCreate
created
beforeMount
render
mounted
Init event and life cycle
beforeCreate
observed data, attributes, listener configuration
created
templates compiled into the render
beforeMount
the render
Mounted
asynchronous request, operating dom, timers, etc.
Update update multiple stage stage
Update phase
beforeUpdate
render
updated
$ ForceUpdate rely on data change or force a refresh
beforeUpdate
event listener is removed and so absolutely do not change the already added
the render
Updated
operating dom add an event listener, and so absolutely do not rely on data changes
Destruction Stage:
beforedestory
destoryed
watch: {
start() {
this.startClock();
}
},
Functional assembly:
Functional: to true
no state, no examples, without this context, no life cycle
Functional components:
Nature vue instructions
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-onceCustom command:
the bind
inserted The
Update
componentUpdated
the unbind
Lifecycle hook
Commonly used advanced features provide / inject
Problem is communication problems assemblies
Attribute, communication
incident, communication
How to get gracefully across hierarchical component instance:
refuse recursive
Reference information
<p ref="p">hello</p>
<child-component ref="child"></child-component>
Automatic notification setXXXref
initiative to obtain getxxxref
<button @click="getEH3Ref"></button
export default {
components: {
ChildrenB,
ChildrenC,
ChildrenD
},
provide() {
return {
setChildrenRef: (name, ref) => {
this[name] = ref;
},
getChildrenRef: name => {
return this[name];
},
getRef: () => {
return this;
}
};
},<ChildrenH v-ant-ref="c => setChildrenRef("childrenH", c)"/>
export default {
components: {
ChildrenG,
ChildrenH,
ChildrenI
},
inject: {
setChildRef: {
default: () = {}
}
}
};The difference between the template and jsx
How to use vuex in the vue
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)
Vue.config.productionTip = false
const store = Vue.Store({
state: {
count: 0,
}
})
new Vue({
store,
render: h => h(App),
}).$mount('#app')increment({commit}) {
setTimeout(()=>{
commit('increment')
}, 3000)
}<template>
<div id="app">
{{count}}
</div>
</template>
<script>
export default {
name: 'app',
computed: {
count() {
return this.$store.state.count
}
}
}
</script><button @click="$store.commit('increment', 2)">count++</button>mutations: {
increment(state, n) {
state.count += n
}
}
vuex core concepts and underlying principles
The core concept of
state-> this. $ Store.state.xxx value
getter-> this. $ Store.getters.xxx Value
mutation->this.$store.commit("xxx")赋值
action->this.$store.dispatch("xxx")赋值
module
The underlying principle:
State: providing a responsive data
Getter: computing means to achieve computed Vue attribute cache
mutation: Method state change
action: Method mutaion trigger
module: Vue.set added dynamically responsive to the data state
vuex Best Practices
Use constant substitution mutation event type
// mutation-type.js
export const SOME_MUTATION="SOME_MUTATION“
// store.js
import Vuex from 'vues'
import { SOME_MUTATION } from ''
const store = new Vuex.Store({
state: { ... },
mutations {
[SOME_MUTATION] (state) {
}
}
})Traditional development mode
www.xxx.com - index.html
www.xxx.com/about -about.html
vue touter usage scenarios
Change Listener url and performs the appropriate logic in the changes before and after
Different url different components corresponding to different
It offers a variety of ways to change the Url api
Use:
a routing table configuration, corresponding to different url configure different components
initialization-routing instance new VueRouter ()
Vue instance to mount
a placeholder routing, to mount the assembly to match Url
Routing and the underlying principles of what mode of choice
hash mode: ugly, you can not use the Anchor Position
Nuxt which problems?
Nuxt core principles, SSR core principles
Ui assembly Comparative
Element UI, ANT design vue, iview
Enhance the development efficiency
Vetur, ESLint, Pret animal, overlooking DevTools
Vuex is to provide responsive data by what means?
Min-vuex extended simplified version, implemented getters, and achieve injection $ Store manner Vuex
Calculation cache attribute computed achieve getters
beforeCreate mixed $ store in acquisition mode
If this number of local contents do not get bits (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.
Please thumbs up! Because you agree / encouragement is the greatest power of my writing!
Welcome concern Dada Jane book!
This is a quality, attitude blog
