svelte响应式原理

svelte文件编译为js后的结构

源代码：

  <script lang="ts">
    let firstName = '张'
    let lastName = '三'
    let age = 18

    function handleChangeName() {
      firstName = '王'
      lastName = '二'
    }

    function handleChangeAge() {
      age = 28
    }
  </script>

  <div>
    <p>fullName is {firstName} {lastName}</p>
    <p>age is {age}</p>
    <div>
      <button on:click={handleChangeName}>change name</button>
      <button on:click={handleChangeAge}>change age</button>
    </div>
  </div>

编译后的js代码结构

  function create_fragment(ctx) {
  	const block = {
  		c: function create() {
  			// ...
  		},
  		m: function mount(target, anchor) {
  			// ...
  		},
  		p: function update(ctx, [dirty]) {
  			// ...
  		},
  		d: function destroy(detaching) {
  			// ...
  		}
  	};
  	return block;
  }

  function instance($$self, $$props, $$invalidate) {
  	let firstName = '张';
  	let lastName = '三';
  	let age = 18;

  	function handleChangeName() {
  		$$invalidate(0, firstName = '王');
  		$$invalidate(1, lastName = '二');
  	}

  	function handleChangeAge() {
  		$$invalidate(2, age = 28);
  	}

  	return [firstName, lastName, age, handleChangeName, handleChangeAge];
  }

  class Name extends SvelteComponentDev {
  	constructor(options) {
  		init(this, options, instance, create_fragment, safe_not_equal, {});
  	}
  }

初始化调用init方法

  function init(component, options, instance, create_fragment, ...,dirty = [-1]) {
  	// $$属性为组件的实例
  	const $$ = component.$$ = {
      	...
          // dirty的作用是标记哪些变量需要更新，
          // 在update生命周期的时候将那些标记的变量和对应的dom找出来，更新成最新的值。
          dirty,
          // fragment字段为一个对象，对象里面有create、mount、update等方法
          fragment： null,
          // 实例的ctx属性是个数组，存的是组件内的顶层变量、方法等。按照定义的顺序存储
          ctx: [],
          ...
      }

      // ctx属性的值为instance方法的返回值。
      // instance方法就是svelte文件编译script标签代码生成的。
      // instance方法的第三个参数为名字叫$$invalidate的箭头函数，
      // 在js中修改变量的时候就会自动调用这个方法
      $$.ctx = instance
  		? instance(component, options.props || {}, (i, ret, ...rest) => {
  			const value = rest.length ? rest[0] : ret;
  			if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
  				make_dirty(component, i);
  			}
  			return ret;
  		})
  		: [];

      // 调用create_fragment方法
      // 并且在后续对应的生命周期里面调用create_fragment方法返回的create、mount、update等方法
      $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
  }

点击change name按钮，修改firstName和lastName的值

  let firstName = '张'
  let lastName = '三'
  let age = 18

  function handleChangeName() {
  	// firstName变量第一个定义，所以这里是0，并且将新的firstName的值传入$$invalidate方法
  	$$invalidate(0, firstName = '王');
      // lastName变量第二个定义，所以这里是1，并且将新的firstName的值传入$$invalidate方法
  	$$invalidate(1, lastName = '二');
  }

  // ...

再来看看invalidate函数的定义，invalidate函数就是在init时调用instance的时候传入的第三个参数

  (i, ret, ...rest) => {
  	// 拿到更新后的值
  	const value = rest.length ? rest[0] : ret;
      // 判断更新前和更新后的值是否相等，不等就调用make_dirty方法
  	if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
      	// 第一个参数为组件对象，第二个参数为变量的index。
          // 当更新的是firstName变量，firstName是第一个定义的，所以这里的i等于0
          // 当更新的是lastName变量，lastName是第二个定义的，所以这里的i等于1
  		make_dirty(component, i);
  	}
  	return ret;
  }

make_dirty方法的定义

  function make_dirty(component, i) {
  	// dirty初始化的时候是由-1组成的数组，dirty[0] === -1说明是第一次调用make_dirty方法。
  	if (component.$$.dirty[0] === -1) {
  		dirty_components.push(component);
          // 在下一个微任务中调用create_fragment方法生成对象中的update方法。
  		schedule_update();
          // 将dirty数组的值全部fill为0
  		component.$$.dirty.fill(0);
  	}
  	component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
  }

二进制运算 demo

  // 有采购商权限
  purchaser= 1 << 2 => 100
  // 有供应商商权限
  supplier = 1 << 1 => 010
  // 有运营权限
  admin =    1 << 0 => 001

  user1 = purchaser | supplier | admin => 111
  user2 = purchaser | supplier => 110

  // 用户是否有admin的权限
  user1 & admin = 111 & 001 = true
  user2 & admin = 110 & 001 = false

再来看看component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));。dirty数组中每一位能够标记31个变量是否为dirty。

(i / 31) | 0就是i/31然后取整。

• 比如i=0,计算结果为0。
• i=1，计算结果为0。
• i=32，计算结果为1。

(1 << (i % 31))，1左移的位数为i和31求余的值。

• 比如i=0，计算结果为1<<0 => 01。
• i=1，计算结果为1 << 1 => 10。
• i=32，计算结果为1<<1 => 10。

当i=0时这行代码就变成了component.$$.dirty[0] |= 01,由于dirty数组在前面已经被fill为0了，所以代码就变成了component.$$.dirty[0] = 0 | 01 => component.$$.dirty[0] = 01。说明从右边数第一个变量被标记为dirty。

同理当i=1时这行代码就变成了component.$$.dirty[0] |= 10 =>component.$$.dirty[0] = 0 | 10 => component.$$.dirty[0] = 10。说明从右边数第二个变量被标记为dirty。

create_fragment函数

function create_fragment(ctx) {
  let div1;
  let p0;
  let t0;
  let t1;
  let t2;
  let t3;
  let t4;
  let p1;
  let t5;
  let t6;
  let t7;
  let div0;
  let button0;
  let t9;
  let button1;
  let mounted;
  let dispose;

  const block = {
    // create生命周期时调用，调用浏览器的dom方法生成对应的dom。
    // element、text这些方法就是浏览器的
    // document.createElement、document.createTextNode这些原生方法
    c: function create() {
      div1 = element("div");
      p0 = element("p");
      t0 = text("fullName is ");
      t1 = text(/*firstName*/ ctx[0]);
      t2 = space();
      t3 = text(/*lastName*/ ctx[1]);
      t4 = space();
      p1 = element("p");
      t5 = text("age is ");
      t6 = text(/*age*/ ctx[2]);
      t7 = space();
      div0 = element("div");
      button0 = element("button");
      button0.textContent = "change name";
      t9 = space();
      button1 = element("button");
      button1.textContent = "change age";
    },
    l: function claim(nodes) {
      // ...
    },
    // 将create生命周期生成的dom节点挂载到target上面去
    m: function mount(target, anchor) {
      insert_dev(target, div1, anchor);
      append_dev(div1, p0);
      append_dev(p0, t0);
      append_dev(p0, t1);
      append_dev(p0, t2);
      append_dev(p0, t3);
      append_dev(div1, t4);
      append_dev(div1, p1);
      append_dev(p1, t5);
      append_dev(p1, t6);
      append_dev(div1, t7);
      append_dev(div1, div0);
      append_dev(div0, button0);
      append_dev(div0, t9);
      append_dev(div0, button1);

      if (!mounted) {
        dispose = [
          // 添加click事件监听
          listen_dev(button0, "click", /*handleChangeName*/ ctx[3], false, false, false),
          listen_dev(button1, "click", /*handleChangeAge*/ ctx[4], false, false, false)
        ];

        mounted = true;
      }
    },
    // 修改变量makedirty后，下一次微任务时会调用update方法
    p: function update(ctx, [dirty]) {
      if (dirty & /*firstName*/ 1) set_data_dev(t1, /*firstName*/ ctx[0]);
      if (dirty & /*lastName*/ 2) set_data_dev(t3, /*lastName*/ ctx[1]);
      if (dirty & /*age*/ 4) set_data_dev(t6, /*age*/ ctx[2]);
    },
    i: noop,
    o: noop,
    d: function destroy(detaching) {
      // ...
            mounted = false;
      // 移除事件监听
      run_all(dispose);
    }
  };

  return block;
}

再来看看update方法里面的 if (dirty & /*firstName*/ 1) set_data_dev(t1, /*firstName*/ ctx[0]);。

当firstName的值被修改时，firstName是第一个定义的变量，i=0。按照上面的二进制计算component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));，此时dirty[0]= 0 ｜(1<<0)=01。

if (dirty & /*firstName*/ 1) set_data_dev(t1, /*firstName*/ ctx[0]);就变成了if (01 & /*firstName*/ 1) set_data_dev(t1, /*firstName*/ ctx[0]);。此时if条件满足，执行set_data_dev(t1, /*firstName*/ ctx[0]);。这里的t1就是t1 = text(/*firstName*/ ctx[0]);，使用firstName变量的dom。

同理当lastName的值被修改时，lastName是第二个定义的变量，i=1。按照上面的二进制计算component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));，此时dirty[0]= 0 ｜(1<<1)=10。

if (dirty & /*lastName*/ 2) set_data_dev(t3, /*lastName*/ ctx[1]);就变成了if (10 & /*lastName*/ 2) set_data_dev(t3, /*lastName*/ ctx[1]);。此时if条件满足，执行set_data_dev(t3, /*lastName*/ ctx[1]);。这里的t3就是t3 = text(/*lastName*/ ctx[1]);，使用lastName变量的dom。

set_data_dev方法

	  function set_data_dev(text2, data) {
	    data = "" + data;
	    if (text2.wholeText === data)
	      return;
	    text2.data = data;
	  }

这个方法很简单，判断dom里面的值和新的值是否相等，如果不等直接修改dom的data属性，将最新值更新到dom里面去。