1. Inicializa el proyecto
// ① npm i -g @vue/cli
// ② vue create my-project
// ③ npm install @vue/composition-api -S
// ④ main,js
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
2. Método de configuración
La configuración es un nuevo método para manipular las propiedades de los componentes en vue3.x. Es una API unificada que expone todas las propiedades y métodos dentro del componente.
2.1 Momento de ejecución
El tiempo de ejecución de la configuración es: después antes de crear antes de crear
setup(props, ctx) {
console.log('setup')
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
2.2 Aceptar datos de accesorios
<!-- 组件传值 -->
<com-setup p1="传值给 com-setup"/>
// 通过 setup 函数的第一个形参，接收 props 数据：
setup(props) {
console.log(props)
},
// 在 props 中定义当前组件允许外界传递过来的参数名称：
props: {
p1: String
}
/*
{}
p1: "传值给 com-setup"
get p1: ƒ reactiveGetter()
set p1: ƒ reactiveSetter(newVal)
__proto__: Object
*/
2.3 contexto
El segundo parámetro de la función de configuración es un objeto de contexto, este objeto de contexto contiene algunas propiedades útiles, se debe acceder a estas propiedades a través de esto en vue 2.x, en vue 3.x, cómo acceder a ellas de la siguiente manera:
setup(props, ctx) {
console.log(ctx)
console.log(this) // undefined
},
/*
attrs: Object
emit: ƒ ()
listeners: Object
parent: VueComponent
refs: Object
root: Vue
...
*/
Nota: esto no es accesible en la función setup ()
3. reactivo
La función reactiva recibe una función ordinaria y devuelve un objeto de datos sensible.
La función reactiva es equivalente a la función Vue.observable () en vue 2.x. La función reactive () se proporciona en vue 3.x para crear un objeto de datos receptivo. El ejemplo de código básico es el siguiente:
<template>
<div>
<!-- 在 template 中访问响应式数据 -->
<p>当前的 count 值为：{
{count}}</p>
<button @click="count += 1">+1</button>
</div>
</template>
<script>
import {reactive} from '@vue/composition-api'
export default {
setup(props, ctx) {
// 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
const state = reactive({ count: 0 })
state.count += 1
console.log(state)
// setup 函数中将响应式数据对象 return 出去，供 template 使用
return state
}
}
</script>
4. ref.
La función ref () se usa para crear un objeto de datos receptivo basado en el valor dado. El valor de retorno de la llamada a la función ref () es un objeto, que contiene solo un atributo .value:
<template>
<div>
<h3>02.ref.vue 文件</h3>
<p>refCount：{
{refCount}}</p>
<button @click="refCount += 1">+1</button>
</div>
</template>
<script>
import { ref } from '@vue/composition-api'
export default {
setup() {
// / 创建响应式数据对象 count，初始值为 0
const refCount = ref(0)
// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以，只有在setup内部才需要 .value 属性
console.log(refCount.value) // 输出 0
// 让 refCount 的值 +1
refCount.value++
// 再次打印 refCount 的值
console.log(refCount.value) // 输出 1
return {
refCount
}
}
}
</script>
4.1 Acceda a los datos reactivos creados por ref en el objeto reactivo
Cuando el objeto de datos reactivos creado por ref () se monta en reactive (), expandirá automáticamente el objeto de datos reactivos al valor original, al que se puede acceder directamente sin pasar .value, por ejemplo:
setup() {
const refCount = ref(0)
const state = reactive({refCount})
console.log(state.refCount) // 输出 0
state.refCount++ // 此处不需要通过 .value 就能直接访问原始值
console.log(refCount) // 输出 1
return {
refCount
}
}
Nota: La nueva referencia sobrescribirá la antigua referencia , el código de muestra es el siguiente:
setup() {
// 创建 ref 并挂载到 reactive 中
const c1 = ref(0);
const state = reactive({ c1 });
// 再次创建 ref，命名为 c2
const c2 = ref(9);
// 将 旧 ref c1 替换为 新 ref c2
state.c1 = c2;
state.c1++;
console.log(state.c1); // 输出 10
console.log(c2.value); // 输出 10
console.log(c1.value); // 输出 0
}
5. isRef
isRef () se usa para determinar si un valor es un objeto creado por ref (); escenario de aplicación: cuando un valor que puede crearse para ref () necesita expandirse, por ejemplo:
import { ref, reactive, isRef } from "@vue/composition-api";
export default {
setup() {
const unwrapped = isRef(foo) ? foo.value : foo
}
};
6. toRefs
La función toRefs () puede convertir el objeto reactivo creado por reactive () en un objeto ordinario, pero cada nodo de atributo en este objeto es un tipo ref () de datos reactivos.
<template>
<div>
<h3>03.toRefs.vue文件</h3>
<p>{
{ count }} - {
{ name }}</p>
<button @click="count += 1">+1</button>
<button @click="add">+1</button>
</div>
</template>
<script>
import { reactive, toRefs } from "@vue/composition-api";
export default {
setup() {
// 响应式数据
const state = reactive({ count: 0, name: "zs" });
// 方法
const add = () => {
state.count += 1;
};
return {
// 非响应式数据
// ...state,
// 响应式数据
...toRefs(state),
add
};
}
};
</script>
7. propiedades calculadas
7.1 Propiedades calculadas de solo lectura
<template>
<div>
<h3>04.computed.vue文件</h3>
<p>refCount: {
{refCount}}</p>
<p>计算属性的值computedCount : {
{computedCount}}</p>
<button @click="refCount++">refCount + 1</button>
<!-- 点击报错 -->
<button @click="computedCount++">计算属性的值computedCount + 1</button>
</div>
</template>
<script>
import { computed, ref } from '@vue/composition-api'
export default {
setup() {
const refCount = ref(1)
// 只读
let computedCount = computed(() => refCount.value + 1)
console.log(computedCount)
return {
refCount,
computedCount
}
}
};
</script>
7.2 Propiedades computacionales legibles y escribibles
<template>
<div>
<h3>04.computed.vue文件</h3>
<p>refCount: {
{refCount}}</p>
<p>计算属性的值computedCount : {
{computedCount}}</p>
<button @click="refCount++">refCount + 1</button>
</div>
</template>
<script>
import { computed, ref } from '@vue/composition-api'
export default {
setup() {
const refCount = ref(1)
// 可读可写
let computedCount = computed({
// 取值函数
get: () => refCount.value + 1,
// 赋值函数
set: val => {
refCount.value = refCount.value -5
}
})
console.log(computedCount.value)
// 为计算属性赋值的操作，会触发 set 函数
computedCount.value = 10
console.log(computedCount.value)
// 触发 set 函数后，count 的值会被更新
console.log(refCount.value)
return {
refCount,
computedCount
}
}
};
</script>
8. ver
La función watch () se usa para monitorear los cambios de ciertos elementos de datos, lo que activa ciertas operaciones específicas, que deben importarse a pedido antes de su uso:
import { watch } from '@vue/composition-api'
8.1 Uso básico
<template>
<div>
<h3>05.watch.vue文件</h3>
<p>refCount: {
{refCount}}</p>
</div>
</template>
<script>
import { watch, ref } from '@vue/composition-api'
export default {
setup() {
const refCount = ref(100)
// 定义 watch，只要 count 值变化，就会触发 watch 回调
// 组件在第一次创建的时候执行一次 watch
watch(() => console.log(refCount.value), { lazy: false})
setInterval(() => {
refCount.value += 2
}, 5000)
return {
refCount
}
}
};
</script>
8.2 Supervisión de la fuente de datos
Monitorear las fuentes de datos reactivas:
<template>
<div>
<h3>05.watch.vue文件</h3>
<p>count: {
{count}}</p> // 不是响应式数据
</div>
</template>
<script>
import { watch, ref, reactive } from '@vue/composition-api'
export default {
setup() {
const state = reactive({count: 100})
watch(
// 监听count
() => state.count,
// 如果变换 执行以下函数
(newVal, oldVala) => {
console.log(newVal, oldVala)
},
{ lazy: true }
)
setInterval(() => {
state.count += 2
}, 5000)
return state
}
};
</script>
Monitorear fuentes de datos de tipo de referencia:
export default {
setup() {
// 定义数据源
let count = ref(0);
// 指定要监视的数据源
watch(count, (count, prevCount) => {
console.log(count, prevCount)
})
setInterval(() => {
count.value += 2
}, 2000)
console.log(count.value)
return {
count
}
}
};
8.3 Monitorear múltiples fuentes de datos
Monitorear las fuentes de datos reactivas:
export default {
setup() {
const state = reactive({count: 100, name: 'houfei'})
watch(
// 监听count name
[() => state.count, () => state.name],
// 如果变换 执行以下函数
([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, oldCount)
console.log(newName, oldName)
},
{ lazy: true} // 在 watch 被创建的时候，不执行回调函数中的代码
)
setTimeout(() => {
state.count += 2
state.name = 'qweqweewq'
}, 3000)
return state
}
};
Monitorear fuentes de datos de tipo de referencia:
export default {
setup() {
// 定义数据源
const count = ref(10)
const name = ref('zs')
// 指定要监视的数据源
watch(
[count, name],
([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, oldCount)
console.log(newName, oldName)
},
{ lazy: true}
)
setInterval(() => {
count.value += 2
}, 2000)
console.log(count.value)
return {
count
}
}
};
8.4 Supervisión clara
El reloj creado en la función de configuración () se detendrá automáticamente cuando se destruya el componente actual. Si desea detener una determinada vigilancia explícitamente, puede llamar al valor de retorno de la función watch (). La sintaxis es la siguiente:
<script>
// 创建监视，并得到 停止函数
const stop = watch(() => {
/* ... */
})
// 调用停止函数，清除对应的监视
stop()
<template>
<div>
<!-- <h3>05.watch.vue文件</h3> -->
<p>count: {
{ count }}</p>
<button @click="stopWatch">停止监听</button>
</div>
</template>
<script>
import { watch, ref, reactive } from "@vue/composition-api";
export default {
setup() {
// 定义数据源
const count = ref(10)
const name = ref('zs')
// 指定要监视的数据源
const stop = watch(
[count, name],
([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, oldCount)
console.log(newName, oldName)
},
{ lazy: true}
)
setInterval(() => {
count.value += 2
name.value = 'houyue'
}, 2000)
// 停止监视
const stopWatch = () => {
console.log("停止监视，但是数据还在变化")
stop()
}
console.log(count.value)
return {
stop,
count,
stopWatch
}
}
};
</script>
8.5 Borrar tareas asincrónicas no válidas en el reloj
A veces, cuando cambia el valor monitoreado por el reloj, o después de que el reloj mismo se detiene, esperamos poder borrar esas tareas asincrónicas no válidas. En este momento, se proporciona una función de registro de limpieza en la función de devolución de llamada del reloj para realizar la limpieza trabajo. Esta función de limpieza se llamará en las siguientes situaciones:
el reloj se ejecuta repetidamente
el reloj se ve obligado a detenerse
El ejemplo de código en la plantilla es el siguiente:
<template>
<div>
<!-- <h3>05.watch.vue文件</h3> -->
<input type="text" v-model="keywords" />
<p>keywords:--- {
{ keywords }}</p>
</div>
</template>
El ejemplo de código en Script es el siguiente:
<script>
import { watch, ref, reactive } from "@vue/composition-api";
export default {
setup() {
// 定义响应式数据 keywords
const keywords = ref("");
// 异步任务：打印用户输入的关键词
const asyncPrint = val => {
// 延时 1 秒后打印
return setTimeout(() => {
console.log(val);
}, 1000);
};
// 定义 watch 监听
watch(
keywords,
(keywords, prevKeywords, onCleanup) => {
// 执行异步任务，并得到关闭异步任务的 timerId
const timerId = asyncPrint(keywords);
// 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
onCleanup(() => clearTimeout(timerId));
},
// watch 刚被创建的时候不执行
{ lazy: true }
);
// 把 template 中需要的数据 return 出去
return {
keywords
};
}
};
</script>
9. Proporcione e inyecte el valor de paso del componente
provide () e inject () pueden realizar la transferencia de datos entre componentes anidados. Estas dos funciones solo se pueden utilizar en la función setup (). El componente principal usa la función provide () para transmitir datos; el componente secundario usa inject () para obtener los datos transmitidos desde la capa superior.
9.1 Compartir datos generales
componente raíz de app.vue:
<template>
<div id="app">
<h1>父组件</h1>
<button @click="color = 'blue'">蓝色</button>
<button @click="color = 'red'">红色</button>
<button @click="color = 'yellow'">黄色</button>
<son></son>
<son></son>
</div>
</template>
<script>
import { ref, provide } from '@vue/composition-api'
import Son from './components/06.son.vue'
export default {
name: 'app',
components: {
'son': Son
},
setup() {
const color = ref('green')
provide('themecolor', color)
return {
color
}
}
}
</script>
06.son.vue son componentes:
<template>
<div>
<h3 :style="{color: color}">son 组件</h3>
<grandson></grandson>
</div>
</template>
<script>
import { inject } from '@vue/composition-api'
import Grandson from './07.grandson.vue'
export default {
components: {
'grandson': Grandson
},
setup() {
const color = inject('themecolor')
return {
color
}
}
}
</script>
07.grandson.vue son componente:
<template>
<div>
<h5 :style="{color: color}">grandson 组件</h5>
</div>
</template>
<script>
import { inject } from '@vue/composition-api'
export default {
setup() {
const color = inject('themecolor')
return {
color
}
}
}
</script>
9.2 Compartir datos sensibles a las referencias
componente raíz de app.vue:
<template>
<div id="app">
<h1>父组件</h1>
<son></son>
</div>
</template>
<script>
import { provide } from '@vue/composition-api'
import Son from './components/06.son.vue'
export default {
name: 'app',
components: {
'son': Son
},
setup() {
provide('themecolor', 'red')
}
}
</script>
06.son.vue son componentes:
<template>
<div>
<h3 :style="{color: color}">son 组件</h3>
<grandson></grandson>
</div>
</template>
<script>
import { inject } from '@vue/composition-api'
import Grandson from './07.grandson.vue'
export default {
components: {
'grandson': Grandson
},
setup() {
const color = inject('themecolor')
return {
color
}
}
}
</script>
07.grandson.vue son componente:
template>
<div>
<h5 :style="{color: color}">grandson 组件</h5>
</div>
</template>
<script>
import { inject } from '@vue/composition-api'
export default {
setup() {
const color = inject('themecolor')
return {
color
}
}
}
</script>
10. Plantilla de referencia de nodo ref
10.1 Referencia a dom
<template>
<div>
<h3 ref="h3Ref">TemplateRefOne</h3>
</div>
</template>
<script>
import { ref, onMounted } from '@vue/composition-api'
export default {
setup() {
// 创建一个 DOM 引用
const h3Ref = ref(null)
// 在 DOM 首次加载完毕之后，才能获取到元素的引用
onMounted(() => {
// 为 dom 元素设置字体颜色
// h3Ref.value 是原生DOM对象
h3Ref.value.style.color = 'red'
})
// 把创建的引用 return 出去
return {
h3Ref
}
}
}
</script>
10.2 Referencia de componentes
Componente principal de la aplicación:
<template>
<div id="app">
<h1>父组件</h1>
<button @click="showComRef">展示子组件的值</button>
<son ref="comRef"></son>
</div>
</template>
<script>
import Son from './components/06.son.vue'
export default {
name: 'app',
components: {
'son': Son
},
setup() {
const comRef = ref(null)
const showComRef = () => {
console.log(comRef)
console.log('str1的值是' + comRef.value.str1)
comRef.value.setStr1()
}
return {
comRef,
showComRef
}
}
}
</script>
06.son.vue subcomponentes:
<template>
<div>
<h3 :style="{color: color}">son 组件</h3>
<p>{
{str1}}</p>
</div>
</template>
<script>
import { ref } from '@vue/composition-api'
export default {
setup() {
const str1 = ref('这是一个子组件！！')
const setStr1 = () => {
str1.value = '被赋值了'
}
return {
str1,
setStr1
}
}
}
</script>
11 siguienteTick
<template>
<div>
<h3>09.nextTick 组件</h3>
<p>学习 $nextTick</p>
<button v-if="isShowInput === false" @click="showInput">展示文本框</button>
<input type="text" v-else ref="ipt">
</div>
</template>
<script>
export default {
data() {
return {
isShowInput: false
}
},
methods: {
showInput() {
this.isShowInput = !this.isShowInput
// console.log(this.$refs)
this.$nextTick(() => {
this.$refs.ipt.focus()
})
}
}
}
</script>