简述全局作用域
编写在script标签或者一个js文件中的变量和函数的作用域都叫全局作用域；
全局作用域在页面打开时就会被创建，在页面关闭时销毁；
在全局作用域中声明的变量是全局变量，在任何地方都可以访问，全局作用域中无法访问到局部作用域中的变量；
全局作用域中有全局对象window，由浏览器创建，可以直接调用；
全局作用域中声明的变量和函数会作为window对象的属性和方法保存
简述函数作用域
在js的函数中存在函数作用域，在函数作用域中声明的变量是局部变量；
在调用函数之后，就会生成一个函数作用域，函数执行完毕之后，就会销毁函数作用域；
每次调用函数都会生成一个函数作用域；
在函数作用域中可以访问全局作用域中的变量，在函数作用域中访问变量的时候，会先查找当前作用域中是否存在该变量，如果没有，就去上级作用域中找该变量，如果直到全局作用域中依然没有找到该变量，那么会报引用（referenceError）错误。
简述块级作用域
块级作用域是es6新提供的，在{}中都是块级作用域，比如if判断、for循环和对象；
在块级作用域中用let声明的变量和const声明的常量，在块的外部是访问不到的；
var和非严格模式下的函数声明是不具有块级作用域，在外部依然可以访问
webpack有哪些常用的plugin(插件)、loader和配置项
plugin(插件)
html-webpack-plugin 自动引入打包后的js文件
webpack-dev-server 自动打包；--open：配置自动打开页面；--host：配置服务器主机地址或ip地址；--port：配置服务器启动端口
mini-css-extract-plugin html文件自动使用link标签引入css文件实现css文件抽离
css-minimizer-plugin 压缩css文件
loader
style-loader 与css-loader搭配可以打包处理css文件
css-loader 可以打包处理.css相关文件
less-loader 可以打包处理.less相关文件
sass-loader 可以打包处理.sass或者.scss相关文件
url-loader 可以打包处理css文件中与url路径相关的文件
file-loader 可以打包处理文件
postcss-loader 处理css浏览器兼容问题，自动给css标签加前缀
babel-loader 兼容高版本js
配置项
webpack.config.js 基础配置文件
entry 入口文件
output 出口文件
mode 编译模式，取值为development（开发环境）或production（生产环境）
devtool:“inline-source-map” 调试代码，可以精准找到报错文件以及行数
plugins 插件
module 配置rules使用对应loader处理各种类型的文件
.eslintrc.js 规范代码书写
.gitignore 在使用git时需要忽略的文件写在.gitignore配置文件里
browserslist 根据浏览器的环境，自动添加css前缀来兼容旧版本浏览器
什么是MVVM
MVVM把前端的视图层分为了三部分：M→model 数据层（后端传递过来的数据） ； V→view 视图层（能看见的页面） ； VM→view-model 视图模型-模拟DOM（是MVVM模式的核心，是连接model和view的桥梁）
VM还提供了数据的双向绑定：一是将模型（Model）转化成视图 (View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图 (View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
Vue数据双向绑定的原理
数据的双向绑定的核心是Object.defineProperty()
Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
通过get方法获取值，通过set方法设置值，再监听input框的输入事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<input type="text" id="inp">
<p id="keywords"></p>
<script>
let obj = {}
Object.defineProperty(obj, 'zzz', {
// set 设置p标签的值是输入的值
set(val) {
this._zzz = val
keywords.innerText = val
},
// get 获取p标签的值
get() {
return this._zzz
}
})
// 将输入框输入的值赋给obj.zzz
inp.oninput = function() {
obj.zzz = this.value
}
</script>
</body>
</html>
v-if和v-show的区别
v-if的本质是直接操作DOM，直接添加或者删除DOM元素。v-if切换是不断销毁和编译DOM元素，特别消耗性能，适用于第一次渲染页面并且运行时条件很少改变。
v-show的本质是操作标签display属性，操作display:none和display:block，控制元素的隐藏与显示，DOM元素一直存在。v-show只编译一次，后面直接控制css，适用于频繁切换的场景。
为什么v-if和v-for不建议在同一个元素同时使用?
因为v-for比v-if的优先级更高，所以当每次渲染页面的时候，会先进行v-for遍历再进行v-if的条件判断，然后v-if又会根据渲染的条件进行数据是否渲染，所以如果两者一起使用会特别消耗性能，不推荐使用。
网友评论