前端面试 — vue系列_代码007(未授权)

本文介绍: 注意：当数据发生变化时，vue会通过依赖追踪机制自动识别出那些组件需要重新渲染，然后再执行渲染函数，生成新的虚拟DOM，并将与旧的虚拟DOM进行比较，找出需要更新的节点，最后将其更新后的节点渲染为真实的DOM。首次渲染速度相对较慢，为实现单页面web应用功能及显示，需要在加载页面的时候将JS、CSS同一加载，部分页面可在需要时加载，所以必须对JS及CSS代码进行合并压缩处理。插槽就是子组件中提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等。

核心特性:

动态重写当前页面与用户交互，避免了页面之前切换而影响用户体验。他将所有的活动局限在一个web页面中，仅在该web页面初始化时加载相应的HTML，JS，CSS资源。一旦页面加载完成，spa不会因为用户操作而进行页面的重新加载或跳转，而是利用JS动态变化HTML从而实现交互。

数据绑定 -》数据渲染 -》视图

速度慢的原因：

解决办法：

// 子组件
<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>
// 父组件
<Child>
  <div>默认插槽</div>  
</Child>

// 子组件
<template>
   <slot>插槽后备的内容</slot>
   <slot name="content">插槽后备的内容</slot>
</template>
// 父组件
<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

// 子组件
<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>
// 父组件
<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">来⾃⼦组件数据：{{slotProps.testProps}}</template>
</child>

 devServer: {
        host: '127.0.0.1',
        port: 8084,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }