Vue

  • 前言

    #93 之后,我们来探索如何实现Vue的父子组件通信。
    在问如何实现之前,我习惯性地思考为什么
    为什么Vue、React这些MVVM框架会出现组件通信这个概念?犹记得我去年初刚刚学前端的时候,学的还是jquery,那时候还没接触组件的概念,所有的DOM都写到一块,A处的DOM和B处的DOM并没有明确的边界。如果A处的DOM想修改B处的DOM,那么一定是A处的DOM触发某个js方法,然后该js方法直接修改B处的DOM。就这样,非常原始,也非常符合js这门脚本语言的风格。
    然而,前端早已非“当年吴下阿蒙”。在不断吸收传统软件开发优良思想的过程中,前端已经越来越系统化,js也逐渐成为一门


  • 前言

    vue可以自定义指令,通过它可以做很多有趣的东西。比如vue-touch。官方的说明文档在这儿。
    下面假设我要重写一个vue的绑定点击事件的指令,也就是说我要自己实现v-on:click。

    源码

    vue指令跟插件一样,是一个带有install方法的模块。

    // index.js 
    module.exports = {
        install: function (Vue) {
            Vue.directive('tap', {
    
                // 存储回调函数
                fn: null,
    
                bind () {
            

  • 前言

    在上一篇 #87 中,我们最后谈到,有一个问题还没有解决,我们来看看是什么问题。如下图所示。
    bug

    我们可以看到,在函数test中,前后两次更改了user.name的值,对应的DOM元素的更新也执行了两次。(注意,这里的DOM元素更新指的是内存中DOM元素的更新,而非浏览器渲染的更新。因为你从视觉上应该也看得出来,虽然DOM元素更新了两次,但是网页上展示的效果却是只修改了一次。此处更多的资料可以参考这里。)

    《高性能js》教导我们:“频繁操作DOM是低效率的”,所以,我们是否能做到说,不管user.name变化了多少次,对DOM的更新只进行一次呢?
    答案是可以的,方法是批处理

    批处理这个词


  • 前言

    在上一篇 #92 中,我们已经实现了通过静态props传递数据,今天我们来看看,如何实现动态props传递数据。

    问题具象

    考虑下面的情况

    <div id="app">
        <my-component :name="user.name1" message="近况如何?"></my-component>
        <my-component :name="user.name2" message="How are you?"></my-component>
    </div>
    import Bue from 'Bue'
    va
  • 总览

    近日,开(抄)发(袭)了一个移动web UI组件库,仓库在这儿,目前仍属于半成品,组件的数量和质量都有待提高。在这个过程中我学到了很多东西,特开系列篇记录下来。目前规划的篇章包括:

    1. 架构篇(本篇)
    2. 适配篇
    3. vue篇

    缘起

    为什么想到要开发这样一个东西呢?
    因为这个东西是标配啊,没折腾过这个都不好意思说自己做过移动web开发呢!
    其实这个东西老早就有人开始做了,比如mint-ui、vux。追寻着大牛们的脚步,让我们来一探究竟。

    十万个怎么办

    当我开始构思这个东西的时候,有数不清的问题冒进我的脑海,包括但不限于以下:

    1. 需要抽象常用组件(按钮、输入框、单选、复选)靠,好多啊。。。
    2. 这东西