vue学习中的问题

登陆切换input复用问题

<div id="app">
        <span v-if="isUser">
            <label for="userName">用户账号</label>
            <input type="text" id="userName" placeholder="用户账号" key="name">
        </span>
        <span v-else>
            <label for="email">用户账号</label>
            <input type="text" id="email" placeholder="用户邮箱" key="email">
        </span>
        <button @click="isUser = !isUser">切换</button>
    </div>

如果我们在输入内容的情况下切换了类型，我们会发现文字依然显示之前的输入内容。按道理来讲，我们应该切换到另外一个input元素中，在另外这个元素中，我们并没有输入内容，所以应该是空的才对？

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

解决：

给对应的input添加不同的key，当进行DOM渲染时，就会识别为不同的元素。

vue管道机制部署

// 即前一个函数的输出是后一个函数的输入
const pipeline = (...func) => val => func.reduce((a,b) => b(a),val);

尾调用解决递归

函数调用自身称为递归。若尾调用自己就称为尾递归。

递归非常耗内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误，但对于尾调用则不会。

// 递归
function factorial(n){
	if(n === 1)  return 1;
	return n*factorial(n - 1);
}

// 尾调用
function factorial(n,total){
	if(n === 1)  return total;
	return factorial(n - 1, n * total);
}

递归复杂度为O(n),尾递归的复杂度为O(1)。