Vue2高级用法

1、mixin复用【vue不会用了，了解一下】
- 1.1 基础使用
- 1.2 选项合并
- 1.3 全局混入
- 1.4 细数 mixin 存在的问题
2、vue.js 动画特效＆常见组件库介绍
- 2.1 进入/离开基础使用示例
- 2.2 进入/离开自定义过度类名
- 2.3 进入/离开动画钩子
- 2.4 多组件过渡与列表过渡
- 2.5 状态过渡
- 2.6 常用动画相关库
3、插槽
- 3.1 插槽的三种使用方法
4、插件
- 4.1 定义插件
- 4.2 使用插件
- 4.3 插件化机制原理
- 4.4 具体实践
5、过滤器
- 5.1 使用过滤器
- 5.2 定义过滤器
- 5.3 串联过滤器

1、mixin复用【vue不会用了，了解一下】

mixin实现复用的同时带来了很多问题，例如：命名污染、依赖不透明
Vue3 用 Composition API替代

1.1 基础使用

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
例子：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

1.2 选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

值为对象的选项：合并成一个对象，同名的话，组件的值会覆盖混入对象
钩子函数：合并成一个数组，都执行，混入对象的钩子先执行，组件后执行（组件的函数覆盖混入的）

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

注意：Vue.extend() 也使用同样的策略进行合并。

1.3 全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

1.4 细数 mixin 存在的问题

命名冲突：vue组件的值会覆盖mixin选项，相同类型的生命周期钩子添加到同一个数组里依次执行
依赖不透明：mixin 和使用它的组件之间没有层次关系。组件可以用mixin的数据，mixin可以用设定在vue里的数据（如上文的this.$options.myOption）。这样要是修改mixin，就比较复杂。

2、vue.js 动画特效＆常见组件库介绍

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js；

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

2.1 进入/离开基础使用示例

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

export default {
  data() {
    show: true
  }
}

在这里插入图片描述

2.2 进入/离开自定义过度类名

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

2.3 进入/离开动画钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

2.4 多组件过渡与列表过渡

<div id="list-demo" class="demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>

{
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
}

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

2.5 状态过渡

通过状态去驱动视图更新从而实现动画过渡

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>

{
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
      //gsap js动画库， gsap.to（'要变化的对象，数据对象或者dom对象',{对象里变化的参数},）
    }
  }
}

2.6 常用动画相关库

gsap
animated.css
tween.js

3、插槽

插槽 slot 是写在子组件的代码中，供父组件使用的占位符

3.1 插槽的三种使用方法

默认插槽：没有名字，普通的
具名插槽：带名字，父组件可以根据名字插入子组件的对应的位置（多个，区分占位符位置）<slot name='‘header’>（区分位置）
作用域插槽：父组件可以使用子组件插槽传过来的games数据（传值）

ps： vue 2.6.0版本之后的slot插槽：用v-slot:default=‘ctx’ 替代slot=‘’。

默认和具名案例：

<template>
  <div class="parent">
   我是父组件
    <Child></Child>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  name: 'app',
  components: {
    Child
  }
}
</script>

<style>
.parent {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  padding:10px;
  background-color:#eee;
}
</style>

<template>
  <div class="hello">
     我是子组件
   
<!-- 如果父组件没有填充内容，就显示slot里的默认内容，
	 如果父组件填充内容，显示父组件的内容 -->
   <div>
	   <!-- 具名插槽 -->
     <slot name="header">把头放这里</slot> 
   </div>
   <div>
	 <!-- 默认插槽 -->
     <slot>这里是默认插槽</slot> 
   </div>
   <div>
	 <!-- 具名插槽 -->
     <slot name="footer">把尾巴放这里</slot>
   </div>

  </div>
</template>

<script>
export default {
  name: 'Child',
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.hello{
	background-color: #097493;
	color: #fff;
	padding:20px;
}
.hello>div{
	padding:10px;
	border: 1px solid red;
	margin: 5px;
}
</style>

当父组件什么都没传时，子组件按自己默认的显示
在这里插入图片描述
当父组件填入对应内容，将会替换子组件的默认占位（子组件也可以不设置默认内容）
父组件改为

<template>
  <div class="parent">
   我是父组件
    <Child>
		<div slot="header"> 
		  替换头部内容
		</div>
		<div slot="header">
		  替换头部内容2
		</div>
		<div slot="footer">
		  替换底部内容
		</div>
		<div>
		  没有定义slot='',默认放默认插槽
		</div>
		<div>
		  如果再来一个默认插槽呢，都会进入默认插槽里
		</div>
	</Child>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  name: 'app',
  components: {
    Child
  }
}
</script>

<style>
.parent {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  padding:10px;
  background-color:#eee;
}
</style>

显示：
在这里插入图片描述
作用域插槽：子组件定义数据，传出去，在父组件用slot-scope接收并使用，就是作用域插槽的功能

<template>
  <div class="parent">
   我是父组件
    <Child>
		<div slot="header" > 
		  替换头部内容
		  
		</div>
	
		<div slot="footer" slot-scope="user">
		  替换底部内容
		    {{user.games}}
		</div>
		<div slot-scope="{games}">
		  没有定义slot='',默认放默认插槽
		  {{games}}
		</div>

	</Child>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  name: 'app',
  components: {
    Child
  }
}
</script>

<style>
.parent {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  padding:10px;
  background-color:#eee;
}
</style>

<template>
  <div class="hello">
     我是子组件
   
<!-- 如果父组件没有填充内容，就显示slot里的默认内容，
	 如果父组件填充内容，显示父组件的内容 -->
   <div>
	   <!-- 具名插槽 -->
     <slot :games="games" name="header">把头放这里</slot> 
   </div>
   <div>
	 <!-- 默认插槽 -->
     <slot :games="games">这里是默认插槽</slot> 
   </div>
   <div>
	 <!-- 具名插槽 -->
     <slot :games="games" name="footer">把尾巴放这里</slot>
   </div>

  </div>
</template>

<script>
export default {
  name: 'Child',
  data() {
  	return {
  		games:['王者荣耀','吃鸡','斗地主']
  	}
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.hello{
	background-color: #097493;
	color: #fff;
	padding:20px;
}
.hello>div{
	padding:10px;
	border: 1px solid red;
	margin: 5px;
}
</style>

显示：
在这里插入图片描述

4、插件

插件可以是对象，或者是一个函数。如果是对象，那么对象中需要提供 install 函数，如果是函数，形态需要跟前面提到的 install 函数保持一致。
install 是组件安装的一个方法，跟 npm install 完全不一样，npm install 是一个命令

4.1 定义插件

const MyPlugin = {
    install(Vue, options) {
      // 1. 添加全局方法或 property
      Vue.myGlobalMethod = function () {
        // 逻辑...
      }
    
      // 2. 添加全局资源
      Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
          // 逻辑...
        }
        ...
      })
    
      // 3. 注入组件选项
      Vue.mixin({
        created: function () {
          // 逻辑...
        }
        ...
      })
    
      // 4. 添加实例方法
      Vue.prototype.$myMethod = function (methodOptions) {
        // 逻辑...
      }
    }
};

4.2 使用插件

Vue.use(MyPlugin);

{{ $myMethod }}

4.3 插件化机制原理

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // 获取已经安装的插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 看看插件是否已经安装，如果安装了直接返回
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // toArray(arguments, 1)实现的功能就是，获取Vue.use(plugin,xx,xx)中的其他参数。
    // 比如 Vue.use(plugin,{size:'mini', theme:'black'})，就会回去到plugin意外的参数
    const args = toArray(arguments, 1)
    // 在参数中第一位插入Vue，从而保证第一个参数是Vue实例
    args.unshift(this)
    // 插件要么是一个函数，要么是一个对象(对象包含install方法)
    if (typeof plugin.install === 'function') {
      // 调用插件的install方法，并传入Vue实例
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // 在已经安装的插件数组中，放进去
    installedPlugins.push(plugin)
    return this
  }
}

4.4 具体实践

Vue-Router
for Vue2

import View from './components/view'
import Link from './components/link'

export let _Vue

export function install (Vue) {
  if (install.installed && _Vue === Vue) return
  install.installed = true

  _Vue = Vue

  const isDef = v => v !== undefined

  const registerInstance = (vm, callVal) => {
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }

  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  const strats = Vue.config.optionMergeStrategies
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

for Vue3

 
    install(app: App) {
      const router = this
      app.component('RouterLink', RouterLink)
      app.component('RouterView', RouterView)

      app.config.globalProperties.$router = router
      Object.defineProperty(app.config.globalProperties, '$route', {
        enumerable: true,
        get: () => unref(currentRoute),
      })

      // this initial navigation is only necessary on client, on server it doesn't
      // make sense because it will create an extra unnecessary navigation and could
      // lead to problems
      if (
        isBrowser &&
        // used for the initial navigation client side to avoid pushing
        // multiple times when the router is used in multiple apps
        !started &&
        currentRoute.value === START_LOCATION_NORMALIZED
      ) {
        // see above
        started = true
        push(routerHistory.location).catch(err => {
          if (__DEV__) warn('Unexpected error when starting the router:', err)
        })
      }

      const reactiveRoute = {} as {
        [k in keyof RouteLocationNormalizedLoaded]: ComputedRef<
          RouteLocationNormalizedLoaded[k]
        >
      }
      for (const key in START_LOCATION_NORMALIZED) {
        // @ts-expect-error: the key matches
        reactiveRoute[key] = computed(() => currentRoute.value[key])
      }

      app.provide(routerKey, router)
      app.provide(routeLocationKey, reactive(reactiveRoute))
      app.provide(routerViewLocationKey, currentRoute)

      const unmountApp = app.unmount
      installedApps.add(app)
      app.unmount = function () {
        installedApps.delete(app)
        // the router is not attached to an app anymore
        if (installedApps.size < 1) {
          // invalidate the current navigation
          pendingLocation = START_LOCATION_NORMALIZED
          removeHistoryListener && removeHistoryListener()
          removeHistoryListener = null
          currentRoute.value = START_LOCATION_NORMALIZED
          started = false
          ready = false
        }
        unmountApp()
      }

      // TODO: this probably needs to be updated so it can be used by vue-termui
      if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && isBrowser) {
        addDevtools(app, router, matcher)
      }
    },
  }

5、过滤器

Vue.js允许我们自定义过滤器，对数据进行格式化。过滤器应该放在JS表达式的尾部，由管道符号连接。过滤器可以用在两个地方：双花括号差值和v-bind表达式。

5.1 使用过滤器

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | capitalize"></div>

5.2 定义过滤器

组件中定义过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

全局中定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})