前端面试积累Day six

拾一零
111 阅读5分钟

什么是scoped？

  1. Vue组件中，style标签有一个属性，scoped。当一个标签拥有scoped属性时，该组件下的css样式只适用于该组件。而不会影响全局组件，这其实也是相当于样式的模块化了。
  2. scoped是根据PostCSS来实现的。PostCSS是CSS的一种编译工具。
    编译前的代码：
    <template>
        <span class="textScoped">scoped测试</span>
    </template>
    <script></script>
    <style scoped>
        .textScoped{ color: red; } 
    </style>

编译后的代码：

    <template>
        <span data-v-3e5b2a80 class="textScoped">scoped测试</span>
    </template>
    <script>

    </script>
    <style scoped>
        .textScoped[data-v-3e5b2a80]{
            color: red;
        }
    </style>

编译后，PostCSS给css样式中都添加了一个独一无二的动态属性，给CSS动态选择器也添加了一个对应的属性选择器，这样就可以让样式只作用于该属性的dom(组件内部的dom)

MVC和MVVM的区别

详细见：blog.csdn.net/qq_51066068…
MVC是一种设计模式
M（Mode）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据。
V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的。
C（Controller）：控制层，是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

MVVM
M（Model）：模型层，就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
V（View）：视图层。就是展现出来的用户界面。
VM（ViewModel）：视图模型层。连接view和model的桥梁。因为，Model层中的数据往往是不能直接跟View中的控件一一对应上的，所以，需要在定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

    View与ViewModel之间通过双向绑定建立联系，这样当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。
    
    1. MVVM的优势在于它解决了MVC中大量的DOM操作使页面的渲染性能降低，加载速度变慢的问题。
    2. MVVM与MVC最大的区别就是：它实现了View与Model的自动同步：当Model的属性改变时。我们不用再自己手动操作DOM元素来改变View的显示，它会自动变化。
    3. 整体看来，MVVM比MVC精简很多，使得我们不用再频繁的使用选择器来进行DOM操作。

vue组件中的data为什莫是一个函数？

  1. VUE具有很好的可复用性，但是data不能够复用，所以将其定义为一个函数。用这个函数的返回值来表示data的属性。
  2. Data是一个函数时，每个组件实例都有自己的作用域，，每个实例相互独立，不会相互影响。
  3. 如果data是引用类型（对象）时，当多个组件共用一个数据源时，一处数据改变，所有的组件数据都会改变，所以要利用函数通过return返回对象的拷贝（返回一个新数据），让每个实例都有自己的作用域，相互不影响。

Vue进行双向绑定的原理

Vue双向绑定就是数据变化更新视图，视图变化更新数据。
Vue数据双向绑定是通过数据劫持和观察者模式来实现的。
数据劫持：object.defineproperty,它的作用是当给属性赋值的时候，程序可以感知到，就可以控制改变属性值。
观察者模式：当属性发生改变的时候，使用该数据的地方也发生改变。

Vue中的组件怎么传值

正向-父传子：父组件把要传递的数据绑定在属性上，发送，子组件通过props接收。
逆向-子传父：子组件通过this.$emit（自定义事件名，要发送的数据），父组件设置一个监听事件来接受，然后拿到数据。
兄弟组件：eventBus 中央事件总线。通过Vuex。

如果一个组件再多个项目中使用怎么办

方案一：npm发布引用

1. 在 http://www.npmjs.com 注册一个账号。  
2. 进入包名的控制台，然后 npm login。  
3. 输入命令npm publish就成功发布了该包。  
4. 其余的项目就可以使用 npm install 包名 --save 来引用该包。

方案二：npm link

1. 进入包名的控制台，然后输入npm link。这会创建一个软链接到系统node_modules文件目录下。
2. 其余的项目就可以使用 npm link 包名，来将这个公共项目通过软链接的方式引用到项目各自的node_modules目录当中。

方案三：npm本地file引用（推荐）

1. 直接在其余项目中使用 npm install ../包名 （绝对路径或者相对路径）

Bootstrap的原理

首先先了解一下响应式网页的内容：zhuanlan.zhihu.com/p/334653033
简单来说就是，使网页能够适应不同的尺寸、不同分辨率的设备。
Bootstrap就是通过定义容器的大小，将其平均分成12份（也有24份，32份的），再调整内外边距，最后结合媒体查询，就成了强大的响应式网格系统。

avatar
文章
阅读
粉丝