2744 | Background color should be in blue
2745 |
2746 |
2747 | ```
2748 |
2749 | 他可以使用 :class 绑定 对象/数组的语法。
2750 |
2751 | ## 116. 我能使用 CSS 模块预处理器吗？
2752 |
2753 | 是的，你可以使用 CSS 模块预处理器。例如，sass 预处理器可以将 sass-loader 配置在 webpack 配置文件中。
2754 |
2755 | ```javascript
2756 | // webpack.config.js -> module.rules
2757 | {
2758 | test: /\.scss$/,
2759 | use: [
2760 | 'vue-style-loader',
2761 | {
2762 | loader: 'css-loader',
2763 | options: { modules: true }
2764 | },
2765 | 'sass-loader'
2766 | ]
2767 | }
2768 | ```
2769 |
2770 | ## 117. 能否为 CSS 模块使用自定义注入名称？
2771 |
2772 | 你可以通过给 module 属性一个值自定义注入的计算属性的名称。这将有助于避免覆盖注入的样式，如果你子啊一个 .vue 组件中有超过1个 `
2778 |
2779 |
2782 | ```
2783 |
2784 | ## 118. 什么是 vue loader 中的热重载？
2785 |
2786 | 热重载不是说当你编辑任何一个 .vue 文件就重新刷新页面。相反，当你编辑一个 .vue 文件，该组件所有实例将会在不刷新页面的情况下被交换。当你在调整组件模板或样式时，这会提升开发体验。
2787 |
2788 | ## 119. 热重载的默认行为是什么？
2789 |
2790 | 除了以下情况外热重载总是启用的
2791 |
2792 | 1. webpack 目标是 node (SSR)
2793 | 2. webpack 压缩代码
2794 | 3. process.env.NODE_ENV === 'production'
2795 |
2796 | ## 120. 如何显式禁用热重载？
2797 |
2798 | 你可以使用 `hotReload: false` 选项显式禁止掉热重载。配置如下，
2799 |
2800 | ```javascript
2801 | module: {
2802 | rules: [{
2803 | test: /\.vue$/,
2804 | loader: 'vue-loader',
2805 | options: {
2806 | hotReload: false // disables Hot Reload
2807 | }
2808 | }]
2809 | }
2810 | ```
2811 |
2812 | ## 121. 如何使用热重载？
2813 |
2814 | vue-loader 插件内部使用了热重载。如果你用 vue-cli 搭建项目，热重载是开箱即用的，但如果你是手动搭建项目，可以通过 `webpack-dev-server --hot` 命令默认启动热重载。
2815 |
2816 | ## 122. 什么是热重载中的状态保存规则？
2817 |
2818 | 以下是热重载中的状态保存规则，
2819 |
2820 | 1. 编辑组件的 `
` 时，组件实例将会重新渲染，保留当前所有的私有状态。
2821 | 2. 编辑组件的 `
3307 |
3308 | ```
3309 |
3310 | **笔记：** 你可以使用特定版本，通过如 https://unpkg.com/vuex@2.0.0 的链接地址。如果没有提到任何版本则会指向最新版。
3311 |
3312 | ## 148. 为 vuex 提供 promise？
3313 |
3314 | 是的，vuex 引入 Promise。如果你支持的浏览器没有部署 Promise（如 IE），你可以通过引入 polyfill 库 es6-promise。
3315 |
3316 | ```javascript
3317 | npm install es6-promise --save # NPM
3318 | yarn add es6-promise # Yarn
3319 | ```
3320 |
3321 | 安装之后在程序的任意地方引入
3322 |
3323 | ```javascript
3324 | import 'es6-promise/auto'
3325 | ```
3326 |
3327 | ## 149. 如何在 vue 组建中显示 state？
3328 |
3329 | 因为 vuex store 是响应式的，你可以简单的通过一个计算属性从 store 中检索 state 并返回。任何时候 store 的状态改变，它将导致计算属性重新求值，并出发相关的 DOM 更新。让我们写一个 hello world 组件在模板中展示 store 的状态。
3330 |
3331 | ```javascript
3332 | // 创建一个 hello world 组件
3333 | const Greeting = {
3334 | template: `{{ greet }}
`,
3335 | computed: {
3336 | greet () {
3337 | return store.state.msg
3338 | }
3339 | }
3340 | }
3341 | ```
3342 |
3343 | ## 150. 如何将 store 注入子组件？
3344 |
3345 | vuex 提供了一个机制用来从根组件的 store 选项将 store 注入到所有的子组件。通过 vue.use(vuex) 启用。
3346 | 例如，注入到 app 组件如下，
3347 |
3348 | ```javascript
3349 | const app = new Vue({
3350 | el: '#app',
3351 | // store 选项用来将 store 实例注册到所有子组件中
3352 | store,
3353 | components: { Greeting },
3354 | template: `
3355 |
3356 |
3357 |
3358 | `
3359 | })
3360 | ```
3361 |
3362 | 现在 store 将被注入到根组件的所有子组件中，将通过 **this.$store** 获取。
3363 |
3364 | ```javascript
3365 | const Greeting = {
3366 | template: `{{ greet }}
`,
3367 | computed: {
3368 | greet () {
3369 | return this.$store.state.msg
3370 | }
3371 | }
3372 | }
3373 | ```
--------------------------------------------------------------------------------
/images/DevTools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudheerj/vuejs-interview-questions-chinese/4e077529b60a2bf0d30efa52c3a33a79331179c3/images/DevTools.png
--------------------------------------------------------------------------------
/images/custom-directives.svg:
--------------------------------------------------------------------------------
1 |
360 |
--------------------------------------------------------------------------------
/images/flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudheerj/vuejs-interview-questions-chinese/4e077529b60a2bf0d30efa52c3a33a79331179c3/images/flow.png
--------------------------------------------------------------------------------
/images/vuelifecycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudheerj/vuejs-interview-questions-chinese/4e077529b60a2bf0d30efa52c3a33a79331179c3/images/vuelifecycle.png
--------------------------------------------------------------------------------
/images/vuex-app-structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudheerj/vuejs-interview-questions-chinese/4e077529b60a2bf0d30efa52c3a33a79331179c3/images/vuex-app-structure.png
--------------------------------------------------------------------------------