Vue的Key屬性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次

時間  2019-11-08
標籤 vue key 屬性 pre 渲染 一次 简体版
原文   原文鏈接

key屬性爲何要加html

key -- api 解釋vue

key的特殊屬性主要用在vue的虛擬dom算法，若是不適用key，vue會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用Key，它會基於Key的變化從新排列元素順序，而且會移除Key不存在的元素。node

v-for爲何要加Keyajax

<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>複製代碼

有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>複製代碼

file

file

file

file

file

爲何使用v-for時必須添加惟一的key?vuex

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',
    },
]複製代碼

兩個相同的組件產生相似的dom結構，不一樣的組件產生不一樣的dom結構。api

同一層級的一組節點數組

特殊特性key緩存

預期：number | stringapp

key的特殊屬性主要用在vue的虛擬dom算法，在新舊nodes對比時辨識vnodes。

<ul>
<li v-for="item in items" :key="item.id"></li>
</ul>複製代碼

它能夠用於強制替換元素，組件而不是重複使用它。

完整地觸發組件的生命週期鉤子觸發過渡

<transition>
<span :key="text">{{text}}</span>
</transition>複製代碼

ref被用來給元素或子組件註冊引用信息，引用信息將會註冊在父組件的$refs對象上。若是在普通的dom元素上使用，引用指向就是dom元素，若是用在子組件上，引用就指向組件實例：

<p ref="p"> hello </p>

<child-component ref="child"></child-component>複製代碼

v-for用於元素或組件的時候，引用信息將包含dom節點或組件實例的數組

is用於動態組件且基於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>複製代碼

永遠不要把 v-if 和 v-for 同時用在同一個元素上。

爲了過濾一個列表中的項目

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>複製代碼

虛擬Dom以及Key屬性的做用

file

file

file

file

file

<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是若是觸發組件更新的

file

file

file

<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();
 }
}
};複製代碼

file

合理應用計算屬性和偵聽器

減小模板中計算邏輯數據緩存依賴固定的數據類型（響應式數據）

計算屬性：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更加靈活，通用watch中能夠執行任何邏輯，如函數節流，ajax異步獲取數據

<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能作的，watch都能作，反之不行能computed的儘可能用computed

<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的生命週期的應用場景和函數式組件

生命週期：

建立階段，更新階段，銷燬階段

file

建立階段：beforeCreatecreatedbeforeMountrendermounted

更新階段beforeUpdaterenderupdated

銷燬階段beforeDestorydestoryed

file

建立階段：beforeCreatecreatedbeforeMountrendermounted

初始化事件和生命週期beforeCreate數據觀測，屬性，偵聽器配置created模板編譯到renderbeforeMountrendermounted異步請求，操做dom，定時器等

file

更新階段屢次更新的階段

更新階段

beforeUpdaterenderupdated

依賴數據改變或$forceUpdate強制刷新beforeUpdate移除已經添加的事件監聽器等萬萬不可更改renderupdated操做dom添加事件監聽器等萬萬不更改依賴數據

file

銷燬階段：beforedestorydestoryed

file

watch: {
start() {
 this.startClock();
 }
},複製代碼

file

函數式組件：functional:true無狀態，無實例，沒有this上下文，無生命週期

函數式組件：file

vue指令的本質

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-once複製代碼

自定義指令：bindinsertedupdatecomponentUpdatedunbind

生命週期鉤子

經常使用的高級特性provide/inject

解決的問題爲組件的通訊問題file

屬性，通訊事件，通訊

如何優雅地獲取跨層級組件實例：拒絕遞歸

引用信息

<p ref="p">hello</p>

<child-component ref="child"></child-component>複製代碼

file

file

自動通知setXXXref主動獲取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: () = {}
}
}
};複製代碼

template和jsx之間的區別

file

file

file

如何在vue中使用vuex

file

file

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
 }
}複製代碼

file

vuex核心概念以及底層原理

核心概念state->this.$store.state.xxx取值getter->this.$store.getters.xxx取值

mutation->this.$store.commit("xxx")賦值action->this.$store.dispatch("xxx")賦值

module

底層原理：State:提供一個響應式數據Getter:藉助Vue的計算屬性computed來實現緩存

mutation:更改state方法action:觸發mutaion方法module:Vue.set動態添加state到響應式數據中

file

file

vuex最佳實戰

file

使用常量替代mutation事件類型

// 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) {
}
}
})複製代碼

傳統開發模式

www.xxx.com - index.html
www.xxx.com/about -about.html複製代碼

filevue touter的使用場景

監聽url的變化，並在變化先後執行相應的邏輯

不一樣的url對應不一樣的不一樣的組件

提供多種方式改變Url的api

使用方式：提供一個路由配置表，不一樣url對應不一樣組件的配置初始化路由實例new VueRouter()

掛載到vue實例上提供一個路由佔位，用來掛載Url匹配到的組件file

選擇何種模式的路由以及底層原理

hash模式：醜，沒法使用錨點定位

file

Nuxt解決了哪些問題？

file

file

Nuxt核心原理，SSR的核心原理

file

file

Ui組件對比Element UI,ANT design vue,iview

file

提高開發效率

Vetur，ESLint，Prettier,Vue DevToolsfile

file

Vuex是經過什麼方式提供響應式數據的？

file

擴展簡化版的min-vuex，實現getters，並實現Vuex的方式注入$store

計算屬性computed實現getters緩存

beforeCreate中混入$store的獲取方式

file

file

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的簡書！

這是一個有質量，有態度的博客

博客

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程