vue扩充知识点$nextTick和Mixins的使用

$nextTick的使用

需求： 点击button时显示输入框，并且让输入框获取焦点，此时获取焦点会报错，当判断做完后，页面还处于旧页面，input还在隐藏状态找不到， 所以使用nextTick 先渲染后再查找元素

 

 

Vue Mixins混入

1.mixin是什么

Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

当一段代码非常相似的时候就可以抽离成一个mixin

mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

2.使用场景

当存在多个组件中的数据或者功能很相近时，就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

3.mixins和vuex的区别。

vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都z是同一份vuex数据。（在js中，有点类似于浅拷贝） vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都属于vue组件自身。（在js中，有点类似于深度拷贝）

4.mixins和组件的区别：

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

5.使用案例

1.在项目中（src）创建一个mixins目录，再创建一个index.js文件

// 创建一个对象并导出  对象中可以是组件中的数据模板
export const showMixin = {
    data () {
      return {
           num: 1
       }
    },
    methods: {
       mymixin () {
           console.log(this.num)
       },
       fn () {
           console.log('test')
       }
    }
 }

​

2.在组件中局部使用

// 组件中可以直接使用mixins中的变量与方法
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="mymixin">测试mixin</button>
    <button @click="fn">测试mixin</button>
  </div>
</template>
<script>
import { showMixin } from '../mixins/index'
export default {
  mixins: [showMixin]
}
</script>

3.在全局中使用mixin

// vue2中使用
Vue.mixin(showMixin)
​
​
​
​
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { showMixin } from './mixins/index'
// import VueCompositionApi from '@vue/composition-api'
// createApp(App).config.productionTip = false
// createApp(App).use(store).use(router).use(VueCompositionApi).mount('#app')
createApp(App).mixin(showMixin).use(store).use(router).mount('#app')
​