1. Initialisez le projet
// ① 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éthode de configuration
Le programme d'installation est une nouvelle méthode de manipulation des propriétés des composants dans vue3.x. Il s'agit d'une API unifiée qui expose toutes les propriétés et méthodes à l'intérieur du composant.
2.1 Moment de l'exécution
Le moment d'exécution de la configuration est: après beforeCreate avant de créer
setup(props, ctx) {
console.log('setup')
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
2.2 Accepter les données des accessoires
<!-- 组件传值 -->
<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 Contexte
Le deuxième paramètre de la fonction de configuration est un objet de contexte, cet objet de contexte contient des propriétés utiles, ces propriétés doivent être accédées via ceci dans la vue 2.x, dans la vue 3.x, comment y accéder comme suit:
setup(props, ctx) {
console.log(ctx)
console.log(this) // undefined
},
/*
attrs: Object
emit: ƒ ()
listeners: Object
parent: VueComponent
refs: Object
root: Vue
...
*/
Remarque: ceci n'est pas accessible dans la fonction setup ()
3. réactif
La fonction réactive reçoit une fonction ordinaire et renvoie un objet de données réactif.
La fonction réactive est équivalente à la fonction Vue.observable () dans la vue 2.x. La fonction reactive () est fournie dans la vue 3.x pour créer un objet de données réactif. L'exemple de code de base est le suivant:
<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. réf
La fonction ref () est utilisée pour créer un objet de données réactif basé sur la valeur donnée. La valeur de retour de l'appel de fonction ref () est un objet, qui ne contient qu'un attribut .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 Accéder aux données réactives créées par ref dans l'objet réactif
Lorsque l'objet de données réactif créé par ref () est monté sur reactive (), il étendra automatiquement l'objet de données réactif à la valeur d'origine, à laquelle on peut accéder directement sans passer .value, par exemple:
setup() {
const refCount = ref(0)
const state = reactive({refCount})
console.log(state.refCount) // 输出 0
state.refCount++ // 此处不需要通过 .value 就能直接访问原始值
console.log(refCount) // 输出 1
return {
refCount
}
}
Remarque: la nouvelle référence écrasera l'ancienne référence , l'exemple de code est le suivant:
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 () est utilisé pour déterminer si une valeur est un objet créé par ref (); scénario d'application: lorsqu'une valeur qui peut être créée pour ref () doit être développée, par exemple:
import { ref, reactive, isRef } from "@vue/composition-api";
export default {
setup() {
const unwrapped = isRef(foo) ? foo.value : foo
}
};
6. toRefs
La fonction toRefs () peut convertir l'objet réactif créé par reactive () en un objet ordinaire, mais chaque nœud d'attribut sur cet objet est un type ref () de données réactives.
<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. propriétés calculées
7.1 Propriétés calculées en lecture seule
<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 Propriétés de calcul lisibles et inscriptibles
<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. montre
La fonction watch () permet de suivre les modifications de certaines données, déclenchant ainsi certaines opérations spécifiques, qui doivent être importées à la demande avant utilisation:
import { watch } from '@vue/composition-api'
8.1 Utilisation de base
<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 Surveillance de la source de données
Surveiller les sources de données réactives:
<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>
Surveiller les sources de données de type ref:
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 Surveiller plusieurs sources de données
Surveiller les sources de données réactives:
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
}
};
Surveiller les sources de données de type ref:
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 Surveillance claire
La montre créée dans la fonction setup () s'arrêtera automatiquement lorsque le composant actuel est détruit. Si vous souhaitez arrêter explicitement une certaine surveillance, vous pouvez appeler la valeur de retour de la fonction watch (). La syntaxe est la suivante:
<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 Effacer les tâches asynchrones non valides dans la montre
Parfois, lorsque la valeur surveillée par la montre change, ou après que la montre elle-même est arrêtée, nous nous attendons à pouvoir effacer ces tâches asynchrones non valides. À ce stade, une fonction de registre de nettoyage est fournie dans la fonction de rappel de surveillance pour effectuer le nettoyage. travail. Cette fonction de nettoyage sera appelée dans les situations suivantes:
la montre est exécutée à plusieurs reprises
la montre est obligée de s'arrêter
L'exemple de code dans le modèle est le suivant:
<template>
<div>
<!-- <h3>05.watch.vue文件</h3> -->
<input type="text" v-model="keywords" />
<p>keywords:--- {
{ keywords }}</p>
</div>
</template>
L'exemple de code dans Script est le suivant:
<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. Fournir et injecter la valeur de passage du composant
provide () et inject () peuvent réaliser un transfert de données entre des composants imbriqués. Ces deux fonctions ne peuvent être utilisées que dans la fonction setup (). Le composant parent utilise la fonction provide () pour transmettre les données; le composant enfant utilise inject () pour obtenir les données transmises depuis la couche supérieure.
9.1 Partage des données générales
Composant racine 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 fils composants:
<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 composant:
<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 Partage de données réactives de référence
Composant racine 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 fils composants:
<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 composant:
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. Modèle de référence de nœud réf
10.1 Référence à 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 Référence des composants
Composant parent de l'application:
<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 sous-composants:
<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 suivantTick
<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>