事件名不存在任何自动化的大小写转换
- 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 秒内重复触发,只有一次生效
- 懒加载、滚动加载、加载更多或监听滚动条位置
- 防止高频点击提交,防止表单重复提交
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秒内被重复触发,则重新计时。用户高频事件完了,再进行事件操作
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测onchange /oninput事件
- 窗口大小计算。只需窗口调整完成后,计算窗口大小。防止重复渲染
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才会从上到下一行一行解析代码并执行。
- var在预解析时,会把声明提升到最前边(赋值前打印返回undefined)。只提升声明,不会把赋值过程进行提升
- function的函数体在预解析时,会把整个函数体提升至最前边
- 函数表达式(函数表达式:var fn = function(){};)只会提升函数表达式的声明,不会执行(真正执行函数表达式前调用会返回undefined)
- 在预解析时,会先预解析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)的语句