冒泡 阻止冒泡
找到元素,ul > 无数个li标签,都有点击事件,如何处理 => 给 ul一个点击事件,会自动冒泡道外层 => jq中常有
捕获阶段: 从外到内 从内到外
function bubbles(e){
var ev = e || window.event;
if(ev && ev.stopPropagation) {
//非IE浏览器
ev.stopPropagation();
} else {
//IE浏览器(IE11以下)
ev.cancelBubble = true;
}
}
let m = {
call:"Hello...",
invoke:function(){
console.log(this.call);
}
}
let n = m.invoke;
n(); // undefined
n.call(m) // "hello..."
n.apply(m) // "hello..."
n.bind(m) // "hello..."
call和apply的区别就是,call后面可以写道多个参数,apply后面第二个参数只能是数组形式
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组
1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组
2、该类数组对象的属性名必须为数值型或字符串型
3、 如果内容小于(《 )length;则使用underfined进行填充
在进行绑定的时候,有的时候操纵原数组,增删改查会改变index,有些错误信息会保留下来
computed 应用场景
computed和methods区别
1- computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当msg属性值没有发生改变时, 多次访问 reversedMsg 计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的。数据改变后,computed只进行一次计算,缓存,而methods方法,每次调用都会重新执行
2- computed中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set变成可读写属性, 但是methods中的成员没有这样的
watch的使用场景是:当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。
watch 和 computed的区别是:
相同点:他们两者都是观察页面数据变化的。
不同点:
computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作
受JS的限制, Vue不能检测到对象属性的添加或删除的。它只能监听到obj这个对象的变化,比如说对obj赋值操作会被监听到。比如在mounted事件钩子函数中对我们的obj进行重新赋值操作, 如下代码:
解决办法
watch中有一个 deep
深度监听,就是可以从对象属性一层一层监听改变,比较耗性能一般直接用 obj.key来直接监听
data () {
return {
student: {
name: '',
sex: ''
}
}
}
如果这时候我们希望给 student 添加一个 age 属性
mounted() {
this.student.age = 18
}
我们会发现这个视图没有改变,受JS的限制, Vue不能检测到对象属性的添加或删除的。它只能监听到obj这个对象的变化
因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的
我们可以使用$set()方法,既可以新增属性,又可以触发视图更新
// $set 用法 (obj,"key",value)
this.$set(this.student,"age",18)
防止 组件调用的时候,两个 data 之间互相影响,采用函数式,这样 就是 两个 data 对象 ,就不会互相影响
父子,兄弟,非父子传值
$emit ,props ,vuex, eventbus
说说eventbus,就是 bus总线
this.bus.$emit()
this.bus.$on()
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。