小编推荐:Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控,Node.j错误监控s和Java错误监控。真的是一个很好用的错误监控费服务,众多大佬公司都在使用。
MVVM分为Model、View、ViewModel三者。
Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。
这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 dom。
v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;
而v-if会控制这个 DOM 节点的存在与否。当只需要一次显示或隐藏时,使用v-if更加合理。
当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty
将它们转为 getter
/setter
并且在内部追踪相关依赖,在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher
程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter
被调用时,会通知 watcher
重新计算,从而致使它关联的组件得以更新。
image.png
父组件通过 props 传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值
在父组件中做了两件事,一是给子组件传入props,二是监听input事件并同步自己的value属性。v-model 实际上会帮我们完成上面的两步操作。
Vue中监控对象属性的变化你可以这样:
watch: {
obj: {
handler (newValue, oldValue) {
console.log('obj changed')
},
deep: true // deep属性表示深层遍历
}
}
// 监控data中,obj.a 的变化
watch: {
'obj.a': {
handler (newName, oldName) {
console.log('obj.a changed')
}
}
}
也可以通过computed 来实现:
// 利用计算属性的特性来实现
// 当依赖改变时,便会重新计算一个新值
computed: {
a1 () {
return this.obj.a
}
}
会发生属性添加成功,但是视图并未刷新的现象
原因:在Vue实例创建时,新添加的变量并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api $set()
this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)
$set()
方法相当于手动的去把新添加的对象处理成一个响应式的属性,此时视图也会跟着改变
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a)
this.$delete(b,1)
console.log(b)
// [1, empty, 3, 4]
// [1, 3, 4]
减少 HTTP 请求数量
在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。
浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。
而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许的并发数不同),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态
解决方法
控制资源文件加载优先级
浏览器在加载 HTML 内容时,是将 HTML 内容从上至下依次解析,解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容,为了第一时间展示页面给用户,就需要将 CSS 提前加载,不要受 JS 加载影响。
一般情况下都是 CSS 在头部,JS 在底部。
解决方法:
js原生获取的dom是一个对象
jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合
原生DOM对象转jQuery对象:
var box = document.getElementById('box');
var $box = $(box);
jQuery对象转原生DOM对象
var $box = $('#box');
var box = $box[0];
(jQuery.fn.myMethod=function () {
alert('myMethod');
})
或者
(function ($) {
$.fn.extend({
myMethod : function () {
alert('myMethod');
}
})
})(jQuery)
使用方式:
$("#div").myMethod();
参考原文: 2019前端面试题汇总(主要为Vue)