备忘录

height:100%和height:100vh的区别

vh代指当前屏幕高度的1%，所以100vh == 100%
height:100vh == height:100%;
当元素没有内容时，height:100%不会撑开，高度为0

vue中ref用法

可以用来获取DOM元素

Vue渲染机制的先后顺序

1. 默认会先找render方法
2. 没有传入render方法会去找template模板
3. 如果1、2都没有，那么会找当前el指定的元素来渲染

备注：

1. el: ‘#app’，$mount是要有的， 这是挂载的目标，他们指定的元素来做模板的，如果有render方法，就会直接把render的结果作为替换app元素的内容。
2. 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文件。