vue3 Composition组合API的简单使用
程序员文章站
2022-05-17 10:06:13
...
vue3可以选择使用vue2中使用的optons配置API，也可以选择使用新的Composition API,下面写一个简单的demo体验一下组合api的使用，
setup
setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。setup中的this指向和vue2中的this指向不同，不要在setup函数中使用this
reactive
reactive函数接受一个普通对象，返回一个响应式数据对象
ref
ref函数接收一个基本类型数据，返回一个响应式数据，在setup函数中使用ref函数创建的数据的值需要用 xxxx.value,但是在setup函数外部使用是直接用xxx即可
生命周期
-
beforeCreate-> 使用 setup() -
created-> 使用 setup() - beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
watch
监听数据变化，可以手动结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue3 Composition API</title>
</head>
<body>
<div id="app">
{{count}}
<p>姓名：{{content.name}}</p>
<p>年龄：{{content.age}}</p>
<input type="text" v-model="content.name">
<button @click="change">修改</button>
</div>
<!-- <script src="lib/vue3.js"></script> -->
<script src="https://unpkg.com/[email protected]"></script>
<script>
const {reactive,ref,createApp,onMounted,watch} = Vue;
createApp({
// 第一个参数props,第二个参数提供了一个上下文对象，从原来 2.x 中 this 选择性地暴露了一些 property。
setup(props,context ){
// reactive函数接受一个普通对象，返回一个响应式数据对象
const content = reactive({
name:'张三'
})
// ref函数接收一个基本类型数据，返回一个响应式数据
let count = ref(0)
const stop = watch(()=>content.name,(val)=>{
console.log('监听content.name的变化',val)
})
setTimeout(()=>{
stop()
},2000)
// setup 也可以返回一个函数，函数中也能使用当前 setup 函数作用域中的响应式数据：
function change(){
content.name = '李四'
content.age = content.age?content.age+1:1
}
onMounted(()=>{
console.log('onMounted',count.value)
})
return{
content,
count,
change
}
}
}).mount('#app')
</script>
</body>
</html>
推荐阅读
-
使用Python下的XSLT API进行web开发的简单教程
-
使用Vue Composition API写出清晰、可扩展的表单实现
-
为你解读Vue3中的大热门——Composition API
-
使用HTTP api简单的远程执行PowerShell脚本
-
详解Vue3 Composition API中的提取和重用逻辑
-
vue3常用的API使用简介
-
安卓串口库android_serialport_api的简单移植方法，以及一些使用细节（有.so动态库的前提下）
-
Sql map的sql map api.py简单使用
-
Vue3 Composition API的使用简介
-
.net core api +swagger(一个简单的入门demo 使用codefirst+mysql)