vue(3) 构造器里的选项

1.propsData Option 全局扩展的数据传递

他用在全局扩展时进行传递数据。

总结:propsData在实际开发中我们使用的并不多,我们在后边会学到Vuex的应用,他的作用就是在单页应用中保持状态和数据的。

2.computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号。。。

3.Methods Option 方法选项

1.methods中参数的传递
2.methods中的$event参数

传递的$event参数都是关于你点击鼠标的一些事件和属性。

3.native 给组件绑定构造器里的原生事件。

在实际开发中经常需要把某个按钮封装成组件,然后反复使用,如何让组件调用构造器里的方法,而不是组件里的方法。就需要用到我们的.native修饰器了。

4.作用域外部调用构造器里的方法

这种不经常使用,如果你出现了这种情况,说明你的代码组织不够好。

4.Watch 选项 监控数据

数据变化的监控经常使用

5.Mixins 混入选项操作

Mixins一般有两种用途:

1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。

1.mixins的调用顺序

从执行的先后顺序来说,都是混入的先执行,然后构造器里的再执行,需要注意的是,这并不是方法的覆盖,而是被执行了两边。

PS:当混入方法和构造器的方法重名时,混入的方法无法展现,也就是不起作用。

2.全局API混入方式

我们也可以定义全局的混入,这样在需要这段代码的地方直接引入js,就可以拥有这个功能了。

PS:全局混入的执行顺序要前于混入和构造器里的方法。

6.Extends Option 扩展选项

1.

通过外部增加对象的形式,对构造器进行扩展。它和我们上节课讲的混入非常的类似。

2.delimiters 选项

elimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号。但有时我们会有需求更改这个插值的形式。

1
delimiters:['${','}']