vue接口Vue.use( plugin )/myMixin、computed、watch

86 阅读 0 评论 57 点赞

我是靠谱客的博主知性御姐，最近开发中收集的这篇文章主要介绍vue接口Vue.use( plugin )/myMixin、computed、watch，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vue.use( plugin )

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})
----------------------------
const MyPlugin = {};
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

**myMixin **

新建mixin.js
export const mixin = {
created(){//钩子
},
methods:{//方法
	first(){
	},
	sec(){
	}
}
//页面引用；
import {mixin} from src;
export default {
	mixins:[mixin],
	data(){
		return{
			a:''
		}
	}
}
这样mixin中的方法将和页面中的方法合并，以当前页面为主，方法名称冲突则会保留页面内的方法；钩子会合并；
mixin只适用于js区域，不适用于html，重写css就相当于重写页面了；

哪里不够详细，欢迎指正提出

computed

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>
如果当你想要在模板中多次引用此处的翻转字符串时；因为每次都要计算；
如果加上计算属性
export default {
	data(){
		return{
			message:'Healthy'
		}
	}
	computed:{
		revvMes(){
			this.message.split('').reverse().join('') 
		}
	}
}
<div id="example">
  {{ revvMes }}
</div>
计算属性是基于Vue响应式依赖进行缓存的,message不变，就不会再重新进行计算；多次访问这个值直接拿来就可用

watch
官方文档有列举这两个的区别，那个例子我也写一下

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
//因为fullname是根据firstName和lastName拼接起来的，任何一个改动都会导致fullname的变化，所以两个都需要监听到；
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
//好得多了，不是吗？- -。还真是~

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
异步执行，请求接口类的行为computed是不合适的，这个时候就用到了watch

<input type="text" placehoder="请输入要查询的内容" v-modle="inputValue"/>
var vm = new Vue({
  el: '#demo',
  data: {
    inputValue: null
  },
  watch: {
    inputValue(nV,oV){
		axios.get("/get").then(()=>{
			//渲染待搜索的列表；可以实现查询备选的功能了；
		})
	}
  }
})