Vue之mixins与 shim 名词解释以及列表渲染key的作用

一、mixins

概念：

• 混合 将根实例或是组件中的配置项 抽离出来，单独管理
• mixins分为两种混入方式 局部混入和全局混入

1. 局部混入

<script>
var mixin = {   //这种mixins使用方式是属于局部混入，直接创建一个对象
        methods: {  //这个method指的就是new Vue里面的methods
                 sum(){
                      alert( 10*10 )
                    }
            },
     }

new Vue({
	el: '#app',
	data: {},
	watch: {},
	mixins: [mixin],
	methods: {
             redecer(){
                    alert( 90 )
                   },
             sum(){
                    alert('lxl')
                }
         },
  })
</script>

2. 全局混入（这种方法不推荐，只要设置了全局混入，就会影响所有的new Vue () 组件）

<script>
     Vue.mixin({  //这种方式是属于全局混入，会影响到所有的new Vue组件，相当于每一个new Vue都有这个方法
	methods: {
	   changeName(){
	          alert('lxl')
	            }
	      }
   })

new Vue({
	el: '#app',
	data: {},
	watch: {},
	methods: {
	       redecer(){
	            alert( 90 )
	      },
               sum(){
                 alert('liu')
           }
     },
})
</script>

注意：

• 即使分离出去， 我们的配置项中也可以继续写分离出去的配置

• 如果说分离出去中的内容有冲突， 以组件中的配置项为准

  1. 关于全局混入
     • 注意： 全局混入慎用（不建议你使用）
     • 理由：全局混入会影响所有的组件（实例）

二、shim名词解释

这个名词出现在：Vue.js官网中关于响应式原理的介绍中 Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

shim 指的是在一个旧的环境中模拟出一个新 API ，而且仅靠旧环境中已有的手段实现，以便所有的浏览器具有相同的行为。主要特征：

• 该 API 存在于现代浏览器中;
• 浏览器有各自的 API 或 可通过别的 API 实现;
• API 的所有方法都被重新实现；
• 拦截 API 调用，并提供自己的实现；
• 是一个优雅降级。

三、列表渲染key的作用

1. 如果没有key会产生的问题：

VDOM是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了

解决： 使用key属性

使用：

    <li v-for = " (item,index) in list " :key = "item.id">

注意：
1. 优先使用数据中能够识别的， 比如 ： id
2. 最差再用 index

一定要注意：每一次的循环都要添加key
假如是涉及到循环子项有删除增加则一定要保证每个key都不同否则一定会出现问题