這次帶給大家vue mixin節省程式碼量，vue mixin節省程式碼量的注意事項有哪些，以下就是實戰案例，一起來看一下。
mixin概念：元件級可重複使用邏輯，包括資料變數/生命週期鉤子/公共方法，因此在混入的元件中可以直接使用，不用重複寫冗餘邏輯(類似繼承)
使用方法:
在某一公用資料夾pub下建立mixin資料夾，其下建立mixinTest.js
const mixinTest = {
created() {
console.log(`components ${this.name} created`)
},
methods: {
hello() {
console.log('mixin method hello')
}
}
}
export default mixinTest在元件中引用剛才的公用混入檔案並使用
import mixinTest from '../pub/mixin/mixinTest.js'
export default {
data() {
return {
name: 'hello'
}
},
mixins: [mixinTest],
methods: {
useMixin() {
this.hello()
}
}
}ps: 若是使用Vue.mixin()這個方法，則會影響之後所建立的所有Vue範例，慎用！
注意mixin的幾個特性:
混入的資料變數是淺合併，衝突時以元件內的資料優先(物件裡面的自訂變數)
混入的生命週期函數內的邏輯會與元件內定義的生命週期函數邏輯合併，並且先執行(created/mounted/destroy)
混入的值為物件的選項，會混合成一個對象，衝突後也是以元件內鍵名優先(data/method/components/directives)
自訂的子元件裡面有巢狀的HTML或其他自訂的標籤元件
這個自訂的子元件是寫在父元件裡面，巢狀的東西也放在父元件裡面
透過在子組件的模板裡面使用
<template>
<p id="app">
<self-component> <!--self-component表示自定义的组件-->
<span>12345</span> <!--父组件里的嵌套标签-->
</self-component>
</p>
</template>
<script>
export default {
components: [selfComponent]
}
</script>
<!--self-component的组件模板-->
<template>
<p>
<button><slot></slot></button>
</p>
</template>
<script>
export default {
// 只有子组件的模板里面有slot标签，才能取到写在自定义组件里面的标签的渲染引用
}
</script><!-- 父组件模板 -->
<child :items="items">
<!-- 作用域插槽也可以是具名的 -->
<li slot="item" slot-scope="props" class="my-fancy-item">{{ props.text }}</li>
</child>
<!-- 子组件模板 -->
<ul>
<slot name="item" v-for="item in items" :text="item.text">
<!-- 这里写当父组件引用子组件但没写内部内容时展示的东东 -->
</slot>
</ul>在子元件的範本裡面寫的slot有個name屬性(
123
)#動態元件
<keep-alive> <component v-bind:is="currentView"> <!-- 组件在 vm.currentview (对应组件名称)变化时改变！ --> <!-- 非活动组件将被缓存！可以保留它的状态或避免重新渲染 --> </component> </keep-alive>
另一种避免重新渲染的方法是为标签增加属性v-once，用于缓存大量的静态内容，避免重复渲染。
ps:
动画与过渡
其实很多前端工程师第一次用Vue的动画和过渡都是通过库组件来做到的，所以对这块没怎么深挖，各种过渡特效和按钮动画就跑起来了，现在就看下文档，补补课
前端实现动画的基本方法分为三种种：css3的过渡和keyframe/javascript操纵dom/使用webgl或者canvas来独立实现，其中第三种是作为展示动画，与交互结合较少，而Vue作为一个框架，其支持动画基是从前两种入手的，从官方文档提到的四种支持就可以看出这一点。不过官方文档是从DOM过渡和状态过渡两个方面来讲解，前者是DOM的消失和出现的动画等属性的变化，后者是页面上某些值的变化。
DOM属性的改变
若是单个元素/组件的显隐，在组件外面包裹一层
CSS过渡：
vue提供了六个样式后缀，本质是在dom过渡的过程中动态地添加和删除对应的className。(-[enter|leave]-?[active|to]?)
如果用css库来辅助开发，可以在transiton这个标签上定义自定义过渡类名，也是六个属性。([enter|leave]-?[active|to]?-class)
常见的一种效果是元素首次渲染的动画，如懒加载图片飞入，这个时候要在transiton标签上加上appear，另有三个属性可指定(appear-?[to|active]?-class)
<!-- 每种CSS动画库对应的class命名规则可能不同，所以根据不同库要自己写，以animate.css为例 -->
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
:duration="{ enter: 500, leave: 800 }"
>...</transition>
<!-- duration属性可以传一个对象，定制进入和移出的持续时间-->JS过渡：
因为现在很多动画库需要工程师调用库提供的函数，把dom元素传入进行处理，这个时候需要这种方式
通过在transiton这个标签上添加监听事件，共8个([before|after]?-?[enter|leave]-?[cancelled]?)
监听事件的回调函数的第一个参数都是el，为过渡的dom元素，在enter和leave这两个还会传入done作为第二个参数
元素首次渲染的动画，可以指定的监听事件有4个([before|after]?-?appear和appear-cancelled)
<template>
<transition v-bind:css="false"
v-on:before-enter="beforeEnter" v-on:enter="enter"
v-on:leave="leave" v-on:leave-cancelled="leaveCancelled">
<!-- 对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测 -->
</transition>
</template>
<script>
methods: { // 以Velocity库为例
beforeEnter: function (el) {/*...*/},
// 此回调函数是可选项的设置
enter: function (el, done) {
// Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
done() //回调函数 done 是必须的。否则，它们会被同步调用。
},
leave: function (el, done) {
// Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
done()
},
leaveCancelled: function (el) {/*...*/}
}
</script>多元素过渡其实就是一句话：照常使用v-if/v-else的同时对同一种标签加上key来标识
Vue对于这种多元素动画有队列上的处理，这就是transiton这个标签上的mode属性，通过指定(in-out|out-in)模式，实现消失和出现动画的队列效果，让动画更加自然。
<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
多组件过渡也是一句话：用上一节提到的动态组件，即可完成。
针对列表过渡，其本质仍是多个元素的同时过渡，不过列表大部分是通过数组动态渲染的，因此有独特的地方，不过整体的动画思路不变。具体有以下几点
使用transitoin-group这个组件，其需要渲染为一个真实元素，可以通过tag这个属性来指定。
列表的每个元素需要提供key属性
使用CSS过渡的话，要考虑到列表内容变化过程中，存在相关元素的定位改变，如果要让定位是平滑过渡的动画，要另外一个v-move属性。 这个属性是通过设置一个css类的样式，来将创建元素在定位变化时的过渡，Vue内部是通过FLIP实现了一个动画队列，只要注意一点就是过渡元素不能设置为display:inline,这里需要文档上的代码做一个简短的demo：(其实通过在li上设置过渡transition属性也可以实现v-move的效果)
<template>
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">{{ item }}</li>
</transition-group>
</template>
<script>
import _ from 'lodash';
export default {
data() {
return {
items: [1,2,3,4,5,6,7,8,9]
}
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
}
</script>
<style lang="css">
.flip-list-move {
transition: transform 1s;
}
</style>数值和属性动态变化
這一部分的動畫主要是針對資料元素本身的特效，例如數字的增減，顏色的過渡過程控制，svg動畫的實現等，其本質都是數字/文字的變化。我自己總結就是：利用Vue的響應式系統，把數字的變化透過外部庫把DOM上對應數值的變化做出連續的效果，如1->100是個數字遞增的連續過程，黑色->紅色的過程。官方文檔主要是用幾個範例程式碼來說明，其本質步驟如下：
在頁面上透過input的雙向綁定修改某一變數a，還有一個處理dom上的過渡效果的變數b
這個資料被watcher綁定(watch物件中某個屬性是這個變數a)，觸發邏輯
以上是vue+mixin節省代碼量的詳細內容。更多資訊請關注PHP中文網其他相關文章！
