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