Vue 之 组件深入

作者: _1633_ | 来源:发表于2020-07-01 21:57 被阅读0次

组件生命周期

生命周期

        单个组件的生命周期分为三个大阶段:1 初始化阶段 create;2 挂载阶段 mount ;3 更新阶段 update ;4 销毁阶段 destory

        在 create 阶段 初始化了一个实例 ,但是并没有渲染成 DOM 结构,而 mounted 是 完成渲染。

        父子组件的生命周期

           初始化阶段,由父组件开始 created ,然后子组件初始化 created,渲染的时候 由子组件先渲染完成 mounted, 再由 父子间 完成渲染 mounted;

           更新阶段,先由父组件 beforeUpdate, 然后子组件 beforeUpdate,子组件 updated 之后, 父组件也就 updated 了;

           销毁阶段,父组件先 beforeDestroy, 子组件再 beforeDestroy, 然后子组件 destroyed,最后父组件 destroyed。


$nextTick

    Vue 是异步渲染,更新 DOM 时是异步执行的;data 改变之后,DOM 不会立刻渲染; $nextTick 会在 DOM 渲染之后被触发,以获取最新 DOM 节点。

    用法 :this.$nextTick(function)   函数会在在 DOM 渲染之后 再回调。

$nextTick

 混入 mixin

        mixin的作用是将 多个组件有相同的逻辑,抽离出来

mixin

        minx 并不是完美的解决方案,会有一些问题

            1. 变量来源不明确,不利于阅读(比如上面组件中的 age , 只看这个组件,完全不知道 age 这个变量的来源);

            2. 多 mixin 会造成命名冲突(生命周期可以融合,但是方法 和 data 里的 同名 变量会造成冲突);

            3. mixin 和组件可能出现多对多的关系,复杂度较高(一个组件可以引用多个 mixin,多个组件可以引用一个mixin)。

            Vue3 提出的 Composition API 旨在解决这些问题。


自定义指令

    在 Vue2.0 中,代码复用和抽象的主要形式是 组件。然而,有的情况下,我们仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

    比如官网的例子 

自定义指令

    钩子函数

            一个指令定义对象可以提供如下几个钩子函数 (均为可选):

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

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

            update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

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

            unbind:只调用一次,指令与元素解绑时调用。

            接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

        指令钩子函数会被传入以下参数 (除了 el 之外,其它参数都应该是只读的,切勿进行修改)

            el:指令所绑定的元素,可以用来直接操作 DOM。

            binding:一个对象,包含以下 property:

                    name:指令名,不包括 v- 前缀。

                    value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。

                    oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

                    expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。

                    arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。

                    指令的参数可以是动态的。例如,在 v-mydirective:[argument]="value" 中,argument 参数可以根据组件实例数据进行更新!

                    modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。

                    注意如果指令需要多个值,可以传入一个 JavaScript 对象字面量

binding

            vnode:Vue 编译生成的虚拟节点。

            oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

示例

    函数简写

    函数简写

过滤器

    Vue.js 允许你自定义过滤器,可被用于一些常见的 文本格式化

    过滤器可以用在两个地方:双花括号插值 和 v-bind 表达式。

运用 过滤器

插件

    开发 Vue 插件

        Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:    

    开发 Vue 插件

    使用 Vue 插件

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

使用插件

相关文章

网友评论

    本文标题:Vue 之 组件深入

    本文链接:https://www.haomeiwen.com/subject/kawpxktx.html