前端中常见概念对比

目录

1. export与export default区别

区别：

混合用法

 使用

2. let与var区别

3. computed和methods的区别

4. display几种区别

5. onshow 和onload

1. export与export default区别

export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。

import就是在一个模块中加载另一个含有export接口的模块， import就是导入。

区别：

1. export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。这样就可以使用它们了。但是，在一个文件或模块中，export,import可以有多个，export default却只能有一个。

2. 通过export方式导出，在导入的时候需要加{}大括号，export default 就不需要{}.

var name = 'zhangsan'
export { name }

import { name } from "/.test.js"
//或者
import {name as aa} from 'demo.js'
########################################

var name = 'zhangsan'
export default name 

//错误写法
export default var name = 'zhangsan';
//因为export default name 的意思是把变量name 的值赋值给变量default;
//所以不能写成export default var num = 123;

import name from "/.test.js"

混合用法

//demo.js
var num = 123;
export var age = 18;
export var name = 'tom';
export default num;

//index.js
import AA, {age,name} from './demo.js';
console.log(AA,age,name);
// AA就是demo.js中默认导出的num
//在一个模块中export default 只能使用一次，export可以多次

 使用

//demo.js
var num = 123;
export var age = 18;
export var name = 'tom';
export default num;

//index.js
import * as some from './demo.js';
console.log(some);
//{
//age: 18
//default: 123
//name: "tom"
//}

2. let与var区别

let是在当前作用域下声明变量，var是全局，外层可以调用。

3. computed和methods的区别

在代码量比较少的时候体现不出来，但是当我们在建设一个很大的项目的时候，这样问题就暴露出来了。

computed在vue中是一种计算属性，在使用中有以下特点：

 1.在书写时computed有个很明显的特点--必有返回值，
2.在系统刚运行的时候会调用一次，在数值发生变化的时候会一直执行，而不是调用的时候执行，所以在持续输入时会很消耗性能
3.在调用时直接将返回值 视为一个变量值就可使用，无需进行函数调用。
4.当计算结果不变时，该函数仅会调用一次，这是computed的缓存功能，合理使用会大大提高代码的运行速度

methods在vue中是一种方法，特点如下：

 1.页面刚加载时调用一次，后期只有被调用时才会执行。
 2.调用的时候需要加括号，这样与computed的不同点
 3.methods中返回值是可写可不写的，在这里不强制

参考：computed和methods的区别 - seekHelp - 博客园

4. display几种区别

每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

1. 块级元素：
   1. 概念：块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形。
   2. 特征：
      1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
      2. 元素的高度、宽度、行高以及顶和底边距都可设置。
      3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
2. 行内元素：
   1. 概念：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
   2. 特征：
      1. 和其他元素都在一行上；
      2. 元素的高度、宽度及顶部和底部边距不可设置；
      3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。
3. display:flex：
   1. 布局也就是常说的弹性布局。当一个元素的父容器设置display:flex的时候，这个容器就会变成一个弹性盒子，默认情况下这个盒子里的子元素都会左右排列（宽度有内容决定，高度由父容器决定），当你给子元素设置高度并且高度超过父容器的高度的时候，他也不会溢出（会自动收缩），因为弹性的优先级大于自身固定大小。
   2. 特点：
       

例子：链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

5. onshow 和onload、onReady

1. onLoad页面加载时调用，可以获取参数，通过options。小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。
2. onShow页面显示时调用。页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。
3. onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；
4. onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
5. onHide: 页面隐藏
   当navigateTo或底部tab切换时调用。
6. onUnload: 页面卸载
   当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack的时候调用。
   基本上可以说执行顺序为onLaunch–onLoad–onShow–onReady–onHide.
   虽然说onLaunch在onLoad之前执行，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。

主要区别：

1. 从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。还有从后台切换回来也会触发onshow，而不会触发onload
2. 所以加载顺序是先加载onLoad，再是onShow，最后onReady。