九、可复用技术

1.混入mixin：混入是非常灵活的技术。

介绍：用来分发Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。mixin常用于插件开发，例如：vue-router，vuex就是用到了mixin。

混入规则：

1）数据模型中的数据，会进行递归合并，出现同名属性，以组件中的数据为准。

2）同名的构造函数会合并成数组，其中的函数都会调用，混入的钩子执行在前，组件的钩子执行在后。

3）内部对象的合并，类似于components、methods回合并为一个对象，发生冲突时，以组件中的为准。

全局混入：

一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。推荐将其作为插件发布，以避免重复应用混入。

Vue.mixin({

created: function () {}

})

局部混入：

mixins: [mixin]

2.自定义指令directive

指令内部有5个钩子函数，可以在指令的生命周期内的关键时刻加入代码。

（1）bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

bind(el,binding,vnode,oldNode){}

（2）inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

（3）update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。

（4）componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

（5）unbind：只调用一次，指令与元素解绑时调用。每个钩子函数内部都有4个形参。

参数：

el 当前指令绑定的dom对象

binding 当值绑定指令的详细信息

vNode Vue编译生成的虚拟dom节点

oldNode 上一个虚拟dom节点，只有在update和componentUpdated这两个钩子触发时，该参数才有实参

3.过滤器filter

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

全局注册：

Vue.filter('fmtDate', function(date){return date?moment(date).format('YYYY-MM-DD HH:mm'):'';
})
{{ birthday | fmtDate }}

局部注册：

filters: {fmtDate: function(date){return date?moment(date).format('YYYY-MM-DD HH:mm'):'';}
}
{{ birthday | fmtDate }}

4.render函数：渲染函数，比模板更接近编译器

render(createElement) {return createElement(nodeName,props,childVnode)
}

解释：createElement函数内部参数说明, 该函数用于创建虚拟节点即vnode。

nodeName: 标签名

props: 该元素的配置信息

childVnode: 子虚拟节点，一般为数组，表示其子元素有多个

注意：在 Vue 中使用 JSX 语法，可以让我们回到更接近于模板的语法上。

new Vue({ el: '#demo', render: function (h) {  return ( <div> <span>Hello</span> world! </div> ) }
})

注意：jsx的测试需要放到脚手架中进行！

5.plugin插件：插件通常用来为 Vue 添加全局功能。

plugin插件需要提供一个install方法，在vue实例构建之前去调用该插件。

第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

new Vue({
MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { //.... }  // 1. 添加全局方法或 property Vue.directive('my-directive', {})      // 2. 添加全局资源
Vue.mixin({ created: function () { //... } ... })    // 3. 注入组件选项Vue.prototype.$myMethod = function (methodOptions) { //... }

组件使用的时候，通过在new Vue之前调用Vue.use()方法：

Vue.use(MyPlugin)

let vm = new Vue({})

ggggxc学习笔记----Vue学习笔记VI----可复用技术相关推荐

前端入门学习：Vue学习笔记（二）
一. 数据请求 1. fetch why XMLHttpRequest 是一个设计粗糙的 API,配置和调用方式非常混乱, 而且基于事件的异步模型写起来不友好. 兼容性不好 polyfill //ht ...
Vue学习（组件的定义及调用、路由）-学习笔记
文章目录 Vue学习(组件的定义及调用.路由)-学习笔记 Vue学习(组件的定义及调用.路由)-学习笔记可见代码参考学习:https://gitee.com/monkeyhlj/vue-learni ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue 学习第六天学习笔记
Vue 学习第六天学习笔记 1.webpack 使用复习第一步:先建立文件夹. 第二步,用webpack将其初始化,建立管理.npm 的包管理工具管理起来, npm init -y .注意{查 ...
Vue 学习之 7.01 学习笔记
Vue 学习之 7.01 学习笔记 1.还是复习前面的那个"品牌案例管理",但是数据不是静态写死哦,而是动态的管理,向数据库发送相关请求实现,因此,小节和昨天所学就是掌握Vu ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习（vuex）-学习笔记
文章目录 Vue学习(vuex)-学习笔记含义理解具体代码辅助函数 mapGetters mapActions Vue学习(vuex)-学习笔记含义理解 State Vuex 使用单一状态树- ...
Vue学习（watch、computed、生命周期、filter）- 学习笔记
文章目录 Vue学习(watch.computed.生命周期)- 学习笔记 watch 监听 computed 计算属性 set---动态添加属性 delete---删除生命周期 filter 过滤 ...

ggggxc学习笔记----Vue学习笔记VI----可复用技术