Vue 常见高频面试题(1-33) -- pink老师

Vue 常见高频面试题(1-33)

1、Vue 的最大的优势是什么？（必会）

Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟 DOM、运行速度快，
并且作者是中国人尤雨溪，对应的 AP1 文档对国内开发者优化，作为前端开发人员的首选入门框架，
Vue 有很多优势：
Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解。
Vue.js 最突出的优势在于可以对数据进行双向绑定。
使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能显示出非常好看的效果。
相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。
Vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 dom，这样大大加快了访问速度和提升用户体验 。
而且他的第三方 UI 组件库使用起来节省很多开发时间，从而提升开发效率 。

2、Vue 和 jQuery 两者之间的区别是什么？

1、jQuery介绍： 曾经也是现在依然最流行的web 前端 js 库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的 js 库所代替，随着浏览器厂商对HTML5 规范统一遵循以及ECMA6在浏览器端的实现，jQuery 的使用率将会越来越低

2、Vue 介绍： Vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js专注于 MVVM 模型的 ViewMode 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvvm 框架如 Angular，React 都是大同小异，本质上都是基于 MVVM 的理念。然而 Vue 以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起

3、Vue 和 jQuery 对比 jQuery 是使用选择器（）选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。比如需要获取 labe 标签的内容、选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。比如需要获取 label 标签的内容：‘label’.val()；它还是依赖 DOM 元素的值。Vue 则是通过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定。这就是传说中的 MVVM。

3、mvvm 和 mvc 区别是什么？哪些场景适合？（必会）

• 1）MVVM 基本定义
  MVVM 即 Model-View-ViewModel 的简写。即模型-视图-视图模型。
  模型（Model） 指的是后端传递的数据。
  视图（View） 指的是所看到的页面。
  视图模型(ViewModel） 是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。
  它有两个方向：
  一是将模型（Model）转化成视图（View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
  二是将视图(View）转化成模型（Model），即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
• 2）MVC 基本定义
  MVC 是 Model-View-Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和 MVM 中的 M 和 V 意思一样。
  C 即 Controller 指的是页面业务逻辑。使用 MVC 的目的就是将 M 和 V 的代码分离。MVC 是单向通信。
  也就是 View 跟 Model，必须通过 Controller 来承上启下。MVC 和 MVVM 的区别并不是 VM 完全取代了 C，
  只是在 MVC 的基础上增加了一层 VM，只不过是弱化了 C 的概念，ViewModel 存在目的在于抽离 Controller 中展示的 y 业务逻辑，
  而不是替代 Controller，其它视图操作业务等还是应该放在 Controller 中实现。
  也就是说 MVM 实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。
• 3）使用场景
  MVC 和 MVVM 其实区别并不大。都是一种设计思想。主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel,MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
  区别： Vue 数据驱动，通过数据来显示视图层而不是节点操作。
  场景： 数据操作比较多的场景，需要大量操作 DOM 元素时，采用 MVVM 的开发方式，会加便捷，让开发者更多的精力放在数据的变化上，解放繁琐的操作 DOM 元素。

4、Vue 数据双向绑定的原理是什么？（必会）

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()：来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

第一步： 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

第二步： compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是：

1、在自身实例化时往属性订阅器（dep）里面添加自己

​ 2、自身必须有一个 update() 方法

​ 3、待属性变动dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。

第四步： MVVM 作为数据绑定的入口，整合Observer、Compile 和 Watcher三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化->视图更新；视图交互变化(input)->数据 model 变更的双向绑定效果。

5、Object.defineProperty 和 Proxy 的区（必会）

1）Proxy 的优势如下：
Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的；
Proxy返回的是一个新对像我们可以只操作新的对象达到目的，而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

2）Object.defineProperty 的优势如下：
兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题，而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本（3.0）才能用 Proxy 重写。

6、Vue 生命周期总共分为几个阶段？（必会）

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→ 渲染、更新 → 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1）beforeCreate
在实例初始化之后，数据观测（data observer）和 event/watcher事件配置之前被调用。

2）created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3）beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。

4）mounted
el 被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

5）beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6）updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7）activated
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8）deactivated
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9）beforeDestroy
实例销毁之前调用。 在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10）destroyed
Vue 实例销毁后调用。 调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11）errorCaptured（2.5.0+新 t 增）
当捕获一个来自子孙组件的错误时被调用。 此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

7、第一次加载页面会触发哪几个钩子函数？（必会）

当页面第一次页面加载时会触发beforeCreate,created,beforeMount, mounted这几个钩子函数

8、请说下封装 Vue 组件的过程？（必会）

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

1）分析需求： 确定业务需求，把页面中可以服用的结构，样式以及功能，单独抽离成一个文件，实现复用

2）具体步骤： 使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件，子组件需要数据，可以在props中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。

9、Vue 组件如何进行传值的？（必会）

1）父组件向子组件传递数据
父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可

2）子组件向父组件传递数据
子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@ / v-on进行监听，然后进行方法处理

3）非父子组件之间传递数据

1、引入第三方 new Vue 定义为 eventBus

2、在组件中 created 中订阅方法 eventBus.$on（“自定义事件名”，methods 中的方法名）

3、在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订阅的方法 eventBus.$emit（"自定义事件名”）

4、在组件的 template 中绑定事件（比如 click）

10、组件中写 name 选项有什么作用？（必会）

1，项目使用keep-alive时，可搭配组件name进行缓存过滤

2，DOM 做递归组件时需要调用自身 name

3，Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的

11、Vue 组件 data 为什么必须是函数（必会）

1、每个组件都是 Vue 的实例

2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他

3、组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果。

12、讲一下组件的命名规范（必会）

给组件命名有两种方式，一种是使用链式命名my-component，一种是使用大驼峰命名MyComponent，在字符串模板中 <my-component></my-component> 和 <MyComponent></MyComponent> 都可以使用，在非字符串模板中最好使用 <MyComponent></MyComponent> ，因为要遵循 W3C 规范中的自定义组件名（字母全小写且必须包含一个连字符），避免和当前以及未来的 HTML 元素相冲突

13、怎么在组件中监听路由参数的变化？（必会）

有两种方法可以监听路由参数的变化，但是只能用在包含<router-view/>的组件内。
第一种

watch：
'$route'(to,from){
// 在此处监听
}

第二种

beforeRouteUpdate(to,from,next){
// 这里监听
}

14、怎么捕获 Vue 组件的错误信息？（必会）

errorCaptured是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收error、vm、info三个参数，return false 后可以阻止错误继续向上抛出。
errorHandler为全局钩子，使用Vue.config.errorHandler配置，接收参数与errorCaptured一致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底。

15、Vue 组件里的定时器要怎么销毁？（必会）

如果页面上有很多定时器，可以在 data 选项中创建一个对象 timer，给每个定时器取个名字一一映射在对象 timer 中，

在 beforeDestroy 构造函数中 for(let k in this.timer) clearInterval(k);

如果页面只有单个定时器，可以这么做。

const timer setinterval(()=>0,500); this.$once（hook:beforeDestroy'.()=>
clearInterval(timer); })

16、Vue.cli 中怎样使用自定义的组件？有遇到过那些问题吗？（必会）

第一步：在 components 目录新建你的组件文件（indexPage.Vue），script 一定要 export default

第二步：在需要用的页面（组件）中导入：import indexPage from’@/components/indexPage.Vue’

第三步：注入到 Vue 的子组件的 components 属性上面，components:{indexPage}

第四步：在 template 视图 view 中使用，例如有 indexPage 命名，使用的时候则 index-page

17、Vue 中 solt 的使用方式，以及 solt 作用域插槽的用法（必会）

使用方式： 当组件当做标签进行使用的时候，用slot 可以用来接受组件标签包裹的内容，当给 slot 标签添加 name 属性的时候，
可以调换响应的位置

插槽作用域： 作用域插槽其实就是带数据的插槽，父组件接收来自子组件的 slot 标签上通过v-bind绑定进而传递过来的数据，
父组件通过 scope 来进行接受子组件传递过来的数据

18、Vue 该如何实现组件缓存？（必会）

在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织起来，
那么自然会存在组件之前切换的问题，Vue 中有个动态组件的概念，
它能够帮助开发者更好的实现组件之间的切换，但是在面对需求频繁的变化，去要切换组件时，
动态组件在切换的过程中，组件的实例都是重新创建的，而我们需要保留组件的状态，
为了解决这个问题，需要使用到Vue 中内置组件 <keep-alive>
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染，简答的说：比如有一个列表和一个详情，那么用户就会经常执行
打开详情=>返回列表=>打开详情。这样的话列表和详情都是一个频率很高的页面，
那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，
这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

19、跟 keep-alive 有关的生命周期是那些？（必会）

1）前言：
在开发 Vue 项目的时候，大部分组件是没必要多次渲染的，
所以 Vue 提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染.

2）生命周期函数：
在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子：activated与deactivated。

1、activated钩子：会在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

2、Activated钩子调用时机：第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，
beforeCreate, created, beforeMount, mounted都不会触发

1、deactivated钩子：组件被停用（离开路由）时调用。

2、deactivated钩子调用时机：使用keep-alive就不会调用beforeDestroy（组件销毁前钩子）和destroyed（组件销毁），因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，

可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave=>
路由前置守卫beforeEach=>全局后置钩子afterEach=>deactivated离开缓存组件=>activated进入缓存组件（如果你进入的也是缓存路由）

20、Vue 常用的修饰符都有哪些？（必会）

.prevent：提交事件不再重载页面；

.stop：阻止单击事件冒泡；

.self：当事件发生在该元素本身而不是子元素的时候会触发；

.capture：事件侦听，事件发生的时候会调用

21、Vue 常用的指令都有哪些？并且说明其作用（必会）

1、v-model多用于表单元素实现双向数据绑定 (同 angular 中的 ng-model)

2、v-for 格式：v-for="字段名 in(of) 数组"json"循环数组或 json（同 angular 中的 ng-repea）需要注意从 Vue2 开始取消了$index
v-for="(item,index) in data :key="index"

3、v-show 显示内容（同 angular 中的 ng-show）

4、v-hide 隐藏内容（同 angular 中的 ng-hide）

5、v-if 显示与隐藏（dom 元素的别除添加同 angular 中的 ng-if 默认值为 false）

6、v-else-if 必须和v-if连用

7、v-else 必须和v-if连用不能单独使用否则报错模板编译错误

8、v-bind 动态绑定 作用：及时对页面的数据进行更改

9、 v-on:cick 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在 methods 里面

10、v-text 解析文本

11、v-html 解析 html 标签

12、v-bind:class 三种绑定方法

1、对象型 {red:isred} 2、三元型 isred ? red" : "blue" 3、数组型 [(red : "isred")(blue : "isblue")]

13、v-once 进入页面时只渲染一次不在进行渲染

14、v-cloak 防止闪烁

15、v-pre 把标签内部的元素原位输出

22、自定义指令 v-check,v-focus 的方法有哪些？它有哪些钩子函数？还有哪些钩子函参数？（必会）

全局定义指令： 在 Vue 对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。

组件内定义指令： directives

钩子函数： bind（绑定事件触发）、inserted（节点插入的时候触发）、update（组件内相关更新）

钩子函数参数： el、binding

23、指令 v-el 的作用是什么？（必会）

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标，可以是CSS 选择器，也可以是一个HTMLElement实例

24、v-show 和 v-if 指令的共同点和不同点？（必会）

1）相同点：
v-show 和 v-if 都能控制元素的显示和隐藏。

2）不同点：实现本质方法不同 v-show本质就是通过设置 css 中的 display 设置为 none，控制隐藏；

​ v-if 是动态的向 DOM 树内添加或者删除 DOM 元素

3）编译的区别

​ v-show 其实就是在控制 css

​ v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

4）编译的条件

​ v-show 都会编译，初始值为 false，只是将 display 设为 none，但它也编译了

​ v-if 初始值为 false，就不会编译了

5）性能比较

​ v-show 只编译一次，后面其实就是控制 css，而v-if不停的销毁和创建，故 v-show 性能更好一点。
注意点： 因为v-show实际是操作 display：""或者 none，当 css 本身有 display:none 时，v-show 无法让显示

总结（适用场景）：如果要频繁切换某节点时，使用 v-show（无论 true 或者 false 初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false 时，不会渲染，但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

25、为什么避免 v-if 和 v-for 用在一起（必会）

当 Vue 处理指令时，v-for比v-if具有更高的优先级，通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

26、watch、methods 和 computed 的区别？（必会）

1）基本说明

​ 1.computed：
​ 计算属性将被混入到 Vue 实例中。所有getter 和 setter的this 上下文自动地绑定为 Vue 实例。

​ 2.methods：
​ methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

​ 3.watch：
​ 观察和响应 Vue 实例上的数据变动，一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象，Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。

2）三者的加载顺序

​ 1.computed 是在 HTML DOM 加载后马上执行的，如赋值：（属性将被混入到 ue 实例）

​ 2.methods 则必须要有一定的触发条件才能执行，如点击事件

​ 3.watch 呢？它用于观察 Vue 实例上的数据变动

3）默认加载的时候

​ 先 computed 再 watch，不执行 methods；

4）触发某一事件后先

​ computed 再 methods 再到 watch computed 属性 vs method 方法 computed 计算属性是基于它们的依赖进行缓存的。

5）总结

​ 计算属性computed只有在它的相关依赖发生改变时才会重新求值，当有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算，然后我们可能有其他的计算属性依赖于 A，这时候，我们就需要缓存，每次确实需要重新加载，不需要缓存时用 methods

27、怎么在 watch 监听开始之后立即被调用？（必会）

在选项参数中指定immediate:true将立即以表达式的当前值触发回调。

28、watch 怎么深度监听对象变化？（必会）

<input type="text" v-model="cityName" />
new Vue({
  el:'#root',
  data:{
    cityName:'shanghai'
  }
  watch:{
    cityName(newName,oldName){
      // ...
    }
  }
})

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
  cityName: 'nameChange'
}

29、computed 中的属性名和 data 中的属性名可以相同吗？（必会）

不能同名，因为不管是computed属性名还是data数据名还是props数据名都会被挂载在 Vm 实例上，因此这三个都不能同名。

30、什么是 Vue 的计算属性（必会）

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式，好处：使得数据处理结构清晰；

1、依赖于数据，数据更新，处理结果自动更新;

2、计算属性内部 this 指向 vm 实例;

3、在template调用时，直接写计算属性名即可；

4、常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据;

5、相较于 methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

31、Vue 中 key 值的作用是什么？（必会）

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM。

32、Vue-loader 是什么？使用它的用途有哪些？（必会）

Vue-loader会解析文件，提取出每个语言块，如果有必要会通过其他 loader 处理，最后将他们组装成一个commonjs模块；module.exports出一个 Vue.js 组件对象；

1）<temlate>语言块

（1）默认语言：html

（2）每个 Vue 文件最多包含一个<template>块

（3）内容将被提取为字符串，将编译用作 Vue 组件的 template 选项；

2）<script>

（1）默认语言：JS（在监测到babel-loader或者babel-loader配置时，自动支持 ES2015）

（2）每个.Vue 文件最多包含一个<script>块

（3）该脚本在类CommonJS环境中执行（就像通过 webpack 打包的正常 JS 模块）。所以你可以require()其他依赖。在 ES2015 支持下，也可以使用 import 跟 export 语法

（4）脚本必须导出 Vue.js 组件对象，也可以导出由Vue.extend()创建的扩展对象；但是普通对象是更好的选择；

3）<style>

默认语言：css

1、一个.Vue 文件可以包含多个<style>标签

2、这个标签可以有 scoped 或者 module 属性来帮助你讲样式封装到当前组件；具有不同封装模式的多个<style>标签可以在同一个组件中混合使用

3、默认情况下，可以使用style-loader提取内容，并且通过<style>标签动态假如文档的<head>中，也可以配置 webpack 将所有的 styles 提取到单个 CSS 文件中；

4）自定义块

可以在.Vue 文件中添加额外的自定义块来实现项目的特殊需求：例如<docs>块；Vue-loader 将会使用标签名来查找对应的webpack loaders来应用到对应的模块上；webpack 需要在 Vue-loader 的选项 loaders 中指定； Vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模板语言，通过设置语言块的lang 属性：<style lang=less> </style>

33、Vue 中怎么自定义过滤器（必会）

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示可以用全局方法Vue.filter()注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值。

Vue.filter('reverse',function(value){
    return value.split('').reverse().join('')
})
<span v-text='message|reverse'></span>

过滤器也同样接受全局注册和局部注册。 Vue 3.0 取消了过滤器，推荐使用计算和监听属性