随手笔记【一】

事件名不存在任何自动化的大小写转换

• v-on 事件监听器在 DOM 模板中会被自动转换为全小写
• v-on:myEvent 将会变成 v-on:myevent，导致 myEvent 不可能被监听到。
• 推荐始终使用 kebab-case 的事件名。

.sync 修饰符

• 父组件监听事件并根据需要更新一个本地的数据property

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

可以缩写成：
<text-document v-bind:title.sync="doc.title"></text-document>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=" doc.title + '!' " 是无效的)

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync="{ title: doc.title }"，是无法正常工作的 因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

插槽

• 默认插槽的缩写语法不能和具名插槽混用

处理边界情况

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

依赖注入provide和inject还是有负面影响的。它将应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的property是非响应式的。

防抖和节流

节流：n秒内只运行一次，若在n 秒内重复触发，只有一次生效

1. 懒加载、滚动加载、加载更多或监听滚动条位置
2. 防止高频点击提交，防止表单重复提交

function _throttle(fn, interval) {
        var last;
        var timer;
        var interval = interval || 200;
        return function() {
            var th = this;
            var args = arguments;
            var now = +new Date();
            if (last && now - last < interval) {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    last = now;
                    fn.apply(th, args);
                }, interval);
            } else {
                last = now;
                fn.apply(th, args);
            }
        }
}

防抖：n秒后在执行该事件，若在n秒内被重复触发，则重新计时。用户高频事件完了，再进行事件操作

1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求
2. 手机号、邮箱验证输入检测onchange /oninput事件
3. 窗口大小计算。只需窗口调整完成后，计算窗口大小。防止重复渲染

function _debounce(fn, delay) {
        var delay = delay || 200;
        var timer;
        return function() {
            var th = this;
            var args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                timer = null;
                fn.apply(th, args);
            }, delay);
        };
}

匿名函数和具名函数

匿名函数不会创建变量，所以说在内存上就不会造成不必要的浪费，还有就是代码看上去会更加简洁，但是匿名函数不能重复调

let box = document.querySelector('#box')
box.addEventListener('mousemove',function () {
  console.log('我是匿名函数')
})
box.removeEventListener('mousemove',function () {
  console.log('我是匿名函数')
})
//移除失败

在使用DOM2事件绑定的时候，如果我们有要移除事件的逻辑，请不要使用匿名函数，因为匿名函数我们是无法用代码找到该函数的

JS预解析机制（变量提升（Hoisting））：JS在读取到一个script标签（或者一个函数作用域）时，会先进行一个预解析的过程，在这个过程中，会把除函数中的var声明的变量和function声明的函数体，提升到整个scriptt标签（或者一个函数作用域）最前边去。而函数中var声明的变量会提升到函数内部的最前面，如果与外部的变量命名冲突，不会影响外部变量的声明以及赋值。函数内部使用一个变量时，首先会在函数内部寻找，如果没有，会一层一层向外查找。在预解析完之后，JS才会从上到下一行一行解析代码并执行。

1. var在预解析时，会把声明提升到最前边（赋值前打印返回undefined）。只提升声明，不会把赋值过程进行提升
2. function的函数体在预解析时，会把整个函数体提升至最前边
3. 函数表达式（函数表达式：var fn = function(){};）只会提升函数表达式的声明，不会执行（真正执行函数表达式前调用会返回undefined）
4. 在预解析时，会先预解析var（包括变量声明和函数表达式的变量声明），先把var放在最前面，然后再预解析function，所以当var和function重名时，function会覆盖var

var foo=function(x,y){
    return x-y;
}
function foo(x,y){
    return x+y;
}
var num=foo(1,2);
console.log(num) //-1

声明 foo、函数体foo、num
执行foo=x-y的函数体
执行num=foo(x,y)的语句