备忘录

最新推荐文章于 2025-03-10 10:22:37 发布

原创最新推荐文章于 2025-03-10 10:22:37 发布

· 228 阅读

0 ·

版权

前端专栏收录该内容

6 篇文章

订阅专栏

文章目录

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