Vue中常用的Options API

阅读目录

1. methods、computed、watch选项的区别
2. 混入mixin
3. 插件
4. 插槽slot
5. 过滤器filter

 

---

回到顶部

methods、computed、watch选项的区别

　　将同样的函数定义为一个方法或计算属性，结果上是完全相同的。但相比于methods，computed带有缓存，若依赖的响应式数据的值没有发生改变则不会重新计算；

　　computed与watch都有监听的功能，本质上都是Watcher实例，但监听的逻辑不同。computed是当依赖的响应式数据发生改变了就重新求值；watch是指定的目标值发生改变了就去执行相应的回调函数；

　　computed在初始化时就会执行一次，而watch初始并不会执行，只有当监听的数据发生变化了才执行，该默认行为可以通过传入immediate属性来修改；

　　computed中不应该进行异步请求或修改DOM，而watch更适合在数据变动时执行异步或开销较大的操作的场景。

 

回到顶部

混入mixin

　　通常，将多个组件共用的功能以JavaScript对象的形式封装到mixin选项中，来分发Vue组件中可复用的功能，减少代码的重复编写。当组件使用mixins时，会将mixins对象里的所有Vue选项，比如data、methods等全部混入到该组件本身的选项中去。对于同名的选项，合并策略如下：

• 对于data、methods、computed等选项，发生冲突时由组件本身的选项覆盖；
• 对于生命周期钩子，同名钩子函数合并为一个数组，先执行mixin选项中的钩子再执行组件本身的钩子；

 

回到顶部

插件

　　通常，使用插件来为Vue添加全局功能。要求使用全局方法Vue.use()在new Vue()之前完成插件的注册，而插件需要暴露一个install方法，在里面添加需要的全局功能。

 

回到顶部

插槽slot

　　在子组件的template中设置<slot>标签，相当于提前在组件模板中占好坑位。当父组件中使用该组件标签时，可以在组件标签中填入其他内容，而这些内容会自动填到子组件的<slot>标签中。插槽的主要功能是更好地复用组件，让组件可以做一些定制化处理，比如，常用的登录跟注册界面内容极其相似，只有少部分的更改，我们就可以定制一个通用组件，而登录跟注册两个组件可以分别向通用组件的插槽中填入自己需要的内容，这样可以大大减少重复代码。

　　插槽分为三类：

• 默认插槽：

　　在父组件中使用子组件标签时，标签内所有内容都会填入子组件的<slot>标签中；

• 具名插槽：

　　当使用多个插槽时，子组件使用name属性来标识插槽名字，在父组件使用子组件时，在v-slot指令中提供插槽名字，可以将内容指定填入某个名字的插槽中；

• 作用域插槽：

　　由于父组件和子组件都是在各自的作用域内渲染的，因此要想父组件使用子组件标签的地方能够子组件的数据，可以使用作用域插槽。在子组件<slot>中绑定需要传递的数据，父组件可以通过v-slot指令拿到这个插槽prop。

 

回到顶部

过滤器filter

　　Vue中的过滤器可以用在两个地方：双花括号插值和v-bind表达式中，由管道符'|'标识。用于不改变原始数据的情况下，对数据进行过滤。在项目中，我用在时间格式化上，类似于数组原型方法filter()。