文章目录
height:100%和height:100vh的区别
vh代指当前屏幕高度的1%,所以100vh == 100%
height:100vh == height:100%;
当元素没有内容时,height:100%不会撑开,高度为0
vue中ref用法
可以用来获取DOM元素
Vue渲染机制的先后顺序
- 默认会先找render方法
- 没有传入render方法会去找template模板
- 如果1、2都没有,那么会找当前el指定的元素来渲染
备注:
- el: ‘#app’,$mount是要有的, 这是挂载的目标,他们指定的元素来做模板的,如果有render方法,就会直接把render的结果作为替换app元素的内容。
- outerHTML拿到的是元素下的内容,包当前元素自身标签的内容。比如:
3. 虚拟DOM概念:是用对象来描述真实DOM节点
在Vue中,为什么要把整个页面拆分成一个个组件
1.实现组件的复用:有可能一个页面有多处地方的代码结构相同,我们可以把他们抽离成组件,用来复用,不用重复写代码,只需要传入不同的数据即可。
2.方便维护:如果把所有的功能放到一个页面中,那么页面看起来会非常臃肿,那么我们改的时候不容易找到要改的位置,那么我们把页面分割成不同的模块,就可以根据功能和特点进行维护,这样维护起来比较简单。
3.性能优化:Vue是每个组件有一个watcher,那么当dep通知更新的时候,如果页面分得越细,组件分割得越细,那么到时候更新页面,只需比对那一个组件的数据,diff这个组件,减少比对,提高性能。
有关类原型上构造函数的理解
每个类的原型prototype上都有一个属性(构造函数)constructor,我们创建的类实例,可以直接访问类的原型prototype的属性。
function Sub(options){
console.log('Sub');
}
Sub.prototype.constructor = function Constructor(options){
console.log('prototype.constructor');
}
new Sub().constructor();
//Sub
//prototype.constructor
再来看一个例子:
function Sub(){
console.log('sub');
}
function Sub(){
console.log('sub');
}
Sub.prototype = {
name: 'subName',
method: function(){
console.log('called method');
}
}
Sub.newProps = function(){
console.log('sub newProps');
}
let sub = new Sub(); //sub
console.log(sub.name); //subName
sub.method(); //called method
console.log(Sub.prototype.newProps); //undefined
sub.newProps(); //TypeError: sub.newProps is not a function
我们可以看到构造函数的原型有一个属性,一个方法,构造函数的实例都可以直接访问这两个属性,然后给构造函数直接赋予一个新方法newProps 。
我们发现实例能直接访问prototype的属性,并且直接在构造函数上添加的属性,实例是无法访问的,并且也不会自动添加进prototype对象里。
如何找到一个项目的入口
如何看一个项目的源码:
1.可以先看package.json文件,里面可以看build属性,例如:
"build": "node scripts/build.js"
这代表文件的打包入口是scripts文件夹下的build.js文件。