前端实习生面经/深圳，day：3.10

3.10面经

v-if和v-show有什么区别

v-if的原理是根据判断条件来动态的进行增删DOM元素，v-show是根据判断条件来动态的进行显示和隐藏元素，频繁的进行增删DOM操作会影响页面加载速度和性能，由此我们可以得出结论：

当您的项目程序比较大的时候，不推荐使用v-if来进行判断展示和隐藏，推荐使用v-show；

实际上浏览器只是根据判断条件在更改内联样式，条件为真的时候内联样式display:block；条件为假的时候内联样式更改为display:none; v-show实际上比v-if的性能更高，因为v-show只是动态的更改样式而不需要增删DOM元素，但是遇到多种情况分支判断的时候v-show是不能和v-else连用的，碰到这种场景使用v-show的处理办法就是重新再用v-show写另外的逻辑判断；

v-for为什么要有key

list列表中，如果绑定索引，删除中间一条数据后，页面渲染以后，后面的索引都改变了，key值也就变了，这就失去了key值存下的意义

使用key来给每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟DOM

v-for，v-if优先级。

**v-for和v-if不能连用；**v-for的计算优先级比v-if要高，所以会把所有的元素都渲染出来，再进行v-if的判断，渲染了不必渲染的元素，浪费了性能。

闭包

New一个关键字

比较直观的感觉，

当我们new一个构造函数，得到的实例继承了构造器的构造属性(this.name这些)以及原型上的属性。

• 创建一个空对象，将它的引用赋给 this，继承函数的原型。
• 通过 this 将属性和方法添加至这个对象
• 最后返回 this 指向的新对象，也就是实例（如果没有手动返回其他的对象

MVVM

MVVM与MVC最大的区别就是：实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再手动操作Dom元素来改变View的显示。 而是改变属性后该属性对应的View层显示会自动改变（对应Vue数据驱动的思想）

整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也察觉不到View，这种低耦合模式提高代码的可重用性。

原型

node express配置路由

//  app.js 首页
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
const router = require('./router/index')  //  引入路由

//  开启数据库
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'test',
    multipleStatements: true, //  允许执行多条语句
})

connection.connect(() =>{
    console.log('链接成功')
});


app.use(bodyParser.urlencoded({
    extends: true
}));

//设置跨域访问
app.all('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//  使用路由 /index 是路由指向名称
app.use(`/index`,router)


//配置服务端口 
var server = app.listen(3000, () => {
    const hostname = 'localhost';
    const port = 3000;
    console.log(`Server running at http://${hostname}:${port}/`);
})

/router/index.js

const express = require(`express`)
const router = express.Router()


router.use((req, res, next) => {
  console.log(`路由执行成功啦~~~`, Date.now());
  next()
})


router.get(`/`, (req, res, next) => {
  res.json({
    status: 200,
    data: `请求成功`
  })
})


router.get(`/data`, (req, res, next) => {
  res.json({
    status: 200,
    data: [1, 2, 3, 4, 5, 6, 7]
  })
})

module.exports = router

消息订阅与发布（pubsub）

1. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的

2. 回调留在A组件自身。

   methods(){
     demo(data){......}
   }
   ......
   mounted() {
     this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
   }
   

   发布消息

3. 提供数据：pubsub.publish('xxx',数据)

4. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

Vue底层原理

VUE3新特性

反问