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

時間  2019-11-29
標籤 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

建立階段：
beforeCreate
created
beforeMount
render
mounted

更新階段
beforeUpdate
render
updated

銷燬階段
beforeDestory
destoryed

file

建立階段：
beforeCreate
created
beforeMount
render
mounted

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

file

更新階段屢次更新的階段

更新階段

beforeUpdate
render
updated

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

file

銷燬階段：
beforedestory
destoryed

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

自定義指令：
bind
inserted
update
componentUpdated
unbind

生命週期鉤子

經常使用的高級特性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

file
vue 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 DevTools
file

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教程