Vue

  • 问题由来

    继上一篇 #80 ,本篇着重讨论vue插件在组件库中的作用。
    对于toast组件,如果我采取跟button这些普通UI组件一样的方式的话,会存在一些问题。
    假设这样一个调用场景:页面当中有一个按钮,点击按钮弹toast,toast的内容和回调函数均可自定义。
    调用toast组件的伪代码如下

    // example.html
    <div id='#app'>
        <button v-on:click='showToastA'></button>
        <toast :show.sync="toast.show">
        {{toast


  • // 占个坑,先写下一篇

  • 前言

    继上一篇 #90 实现了条件渲染之后,本篇我们来看看如何实现vue列表渲染功能。

    问题具象

    考虑以下的情况

    <div id="app">
        <ul>
            <li b-repeat="item:items">
                 {{item.title}}
                 {{user.name}}
            </li>
        </ul>
    </div>
    const app = new Bue({
        el: '#app',
        data: {
            user
  • 前言

    我们都知道,要想精通前端领域,研究分析成熟的框架是必不可少的一步。很多人可能都有这样的体会:“很努力地去阅读一些热门框架的源码,但是发现难度太高,花了很多时间却得不到什么,最终不得不放弃。”
    我也一直被这个问题困扰,直到我想到了这样的一个方法。
    从成熟框架的早期源码开始看起,从作者的第一个commit开始看起,然后逐个的往前翻。这样一开始的代码量不多,多看几遍还是可以理解的。而且在这个过程中,就像电影回放一样,我们可以看到作者先写什么,后写什么,在哪些地方进行了什么样的改良,其中又不小心引入了什么bug,等等。
    这真的是一个很好的办法。所以,我就用这个方法来研究vue的源码。

    目标

    我c



  • 前言

    vue中有一个非常好用的功能:计算属性(computed)

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
    你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a,因此当 vm.a 发生改变时,依赖于 vm.b 的绑定也会更新。

    来源:https://vuejs.org.cn/guide/computed.html

    问题

    我们先来具象化一下问题。

    // htm