Prefacio
Intención original: Hace unos días, en otros proyectos Vue de la empresa, me enteré que se desarrolló con el modelo Decorator. Parecía que el código en general era bastante bueno, así que tomé una nota y la compartí con todos. no me gusta, no lo rocíe.
Adecuado para la multitud: desarrollo de front-end primario, desvío de grandes.
Este proyecto está utilizando jsy Decoratordecorador configurado, si usamos el proyecto ts, a continuación, el decorador con el método descrito en este documento es diferente, por favor, referencia a la tsdecorador. Cabe señalar que al usar este modo, las variables se contaminarán, por lo que las variables con el mismo nombre no pueden aparecer
Que es decorador
DecoratorDecorator es un tipo de classgramática relacionada con la clase , por lo que Decoratordecorator solo se puede usar en classclase, no en gramática o expresión ordinaria. Comprensión personal: el decorador puede proporcionarnos una capa de interceptación, primero ejecutar las cosas en el decorador y luego ejecutar nuestras operaciones. Para obtener más información, consulte "Decorador" del profesor Ruan Yifeng.
instalación
Componente
npm install --save vue-class-component
npm install --save vue-property-decorator
Configuración
babel.config.jsConfigure en el directorio raíz del proyecto de la siguiente manera
module.exports = {
presets: [
'@vue/app'
],
plugins: [
['@babel/plugin-proposal-decorators', {
legacy: true }],
['@babel/plugin-proposal-class-properties', {
loose: true }],
]
}
jsconfig.jsonConfigure en el directorio raíz del proyecto de la siguiente manera
{
"compilerOptions": {
"experimentalDecorators": true
}
}
Instrucciones
Aquí presentaré varios métodos comúnmente utilizados en Vue. Para obtener más detalles, consulte Vue-property-decorator
Ciclo de vida, métodos, datos
Estos métodos de escritura son los mismos que antes, solo escriba directamente, consulte la siguiente comparación de casos
Escritura original
<script>
export default {
data() {
return {
msg: "hello 蛙人"
}
},
created() {
},
methods: {
test() {
}
}
}
</script>
Escritura del decorador
<script>
import {
Vue } from 'vue-property-decorator'
class App extends Vue {
msg = "hello 蛙人"
created() {
}
test() {
}
}
export default App
</script>
Emitir
Escritura original
<script>
export default {
methods: {
send() {
this.$emit("custom", 123)
}
}
}
</script>
Escritura del decorador
<script>
import {
Vue, Emit } from 'vue-property-decorator'
class Hello extends Vue {
created() {
this.send()
}
@Emit("custom")
send() {
return 123
}
}
export default Hello
</script>
Proveer
Escritura original
<script>
export default {
provide() {
return {
msg: this.msg
}
}
}
</script>
Escritura del decorador
<script>
class App extends Vue {
@Provide() msg = this.msg
msg = "hello 蛙人"
}
export default App
</script>
Inyectar
Escritura original
export default {
inject: {
msg: {
default: () => "",
required: true
}
}
}
</script>
Escritura del decorador
import {
Vue, Component,Inject } from 'vue-property-decorator'
@Component
class Hello extends Vue {
@Inject({
required: true, default: () => "" }) msg
}
export default Hello
Apuntalar
Escritura original
<script>
export default {
props: {
msg: {
type: () => String,
required: true
}
}
}
</script>
Escritura del decorador
<script>
import {
Vue, Prop } from 'vue-property-decorator'
class Hello extends Vue {
@Prop({
required: true, type: String }) msg
}
export default Hello
</script>
PropSync
Escritura original
// 父组件
<HelloWorld :msg.sync="msg" v-show="msg"/>
// 子组件
<script>
export default {
props: {
msg: {
require: true
}
},
created() {
setTimeout(() => {
this.test()
}, 5000)
},
methods: {
test() {
this.$emit("update:msg", false)
}
}
}
</script>
Escritura del decorador
@PropSyncEl primer parámetro es, en el this.$emit("update:msg")interior msg, la declaración va seguida de variables
<script>
import {
Vue, Component, PropSync } from 'vue-property-decorator'
@Component
class Hello extends Vue {
@PropSync("msg", {
required: true }) variable
created() {
setTimeout(() => {
this.variable = false
}, 5000)
}
}
export default Hello
</script>
Reloj
Escritura original
export default {
data() {
return {
str: 123
}
},
created() {
setTimeout(() => {
this.str = 12
}, 5000)
},
watch: {
str: function(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
}
</script>
Escritura del decorador
import {
Vue, Component, Watch } from 'vue-property-decorator'
@Component
class Hello extends Vue {
str = 123
created() {
setTimeout(() => {
this.str = 12
}, 2000)
}
@Watch("str", {
deep: true})
test(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
export default Hello
Computado
Escritura original
<script>
export default {
computed: {
test: {
get() {
return this.msg
},
set(val) {
return this.msg = val
}
}
}
}
</script>
Escritura del decorador
<script>
import {
Vue, Component } from 'vue-property-decorator'
@Component
class App extends Vue {
get test() {
return this.msg
}
set test(val) {
return this.msg = val
}
}
export default App
Modelo
A veces queremos escribir un v-modelmétodo para el componente , de la siguiente manera
Escritura original
// 父组件
<HelloWorld :msg="msg" v-model="msg"/>
// 子组件
<input type="text" @input="test" :value="msg">
<script>
export default {
props: {
msg: {
require: true
}
},
model: {
prop: "msg",
event: "input"
},
methods: {
test(e) {
this.$emit("input", e.target.value)
}
}
}
</script>
Escritura del decorador
// 父组件
<HelloWorld :msg="msg" v-model="msg"/>
// 子组件
<input type="text" @input="test" :value="msg">
<script>
import {
Vue, Component, Model, Emit } from 'vue-property-decorator'
@Component
class Hello extends Vue {
@Model("input", {
default: () => ""}) msg
test(e) {
this.send(e)
}
@Emit("input")
send(e) {
return e.target.value
}
}
export default Hello
</script>
Árbitro
Escritura original
<HelloWorld :msg="msg" ref="val"/>
<script>
export default {
name: 'App',
components: {
HelloWorld
},
data() {
return {
msg: "hello 蛙人"
}
},
mounted() {
console.log(this.$refs.val)
},
}
</script>
Escritura del decorador
<HelloWorld :msg="msg" ref="val"/>
<script>
import {
Vue, Component, Ref } from 'vue-property-decorator'
@Component({
components: {
HelloWorld
}
})
class App extends Vue {
@Ref("val") val
msg = "hello 蛙人"
mounted() {
console.log(this.val)
}
}
export default App
</script>
Componente
Este método se importa de la biblioteca de componentes. Si usa el método del ciclo de vida, recuerde importar este decorador, de lo contrario no tendrá efecto. El decorador también puede escribir Vuemétodos nativos en un objeto .
<script>
import {
Vue, Component } from 'vue-property-decorator'
@Component({
components: {
},
watch: {
str: function(val) {
console.log(val)
}
}
})
export class App extends Vue {
}
</script>
Expandir
Por supuesto, puede expandir el Decoratordecorador de paquetes según sus necesidades , el decorador recibe tres parámetros
- objetivo
- Clave de destino
- Describe el objeto
Si no comprende la descripción de las propiedades de los objetos aquí, puede leer mi artículo "Comprensión en profundidad de los objetos de JavaScript".
<script>
function Decorator(data) {
return (vue, key, describe) => {
// vue 当前执行环境对象
// key 当前装饰器函数对象 test
// describe 描述对象里面value是函数
let fn = describe.value
describe.value = function () {
let status = window.confirm(data)
if (status) return fn()
}
}
}
import {
Vue, Component } from 'vue-property-decorator'
@Component
class App extends Vue {
@Decorator("请点击确定")
test() {
window.confirm("你是否完成了")
}
}
export default App
</script>
En el ejemplo anterior, puedes extender tu propio Decoratordecorador. El decorador es equivalente a una capa de interceptación. La operación en el decorador se ejecuta primero y la operación lógica de nuestra función en sí. Aquí solo presentaré un caso, según sus necesidades.
agradecer
Gracias por abrir este artículo durante su apretada agenda. Espero que le sea útil. Si tiene alguna pregunta, puede corregirme.
Soy un hombre rana, si crees que está bien, por favor dame un pulgar hacia arriba.
Los amigos interesados pueden unirse [grupo de intercambio de círculo de entretenimiento de front-end] Invitamos a todos a comunicarse y discutir
![[grupo de intercambio de círculo de entretenimiento de front-end]](http://chuantu.xyz/t6/741/1615689907x2073530471.png){kind=link}
Buenos artículos en el pasado
"Hable sobre qué son CommonJs y Es Module y su diferencia"
"Mapa que lo lleva a comprender fácilmente la estructura de datos"
"¿Conoce todos los consejos de JavaScript que se utilizan en estos trabajos?" 》
"Deconstrucción: ¡Haga que el acceso a los datos sea más conveniente! 》