VUE3.0 学习笔记(vite)
创建项目
组合API setup()
在vue3.0中,使用组合API,也就是将以往的data、metods、watch等函数可以直接写在setup()里面,
有好处就是,一个功能的数据、方法、计算等等都可以放在一块,便于维护
注意:在setup()定义的变量和方法,如需在外部使用,则必须return导出
1、ref、reactive
在setup()中,想要定义一个可以在外部templet中直接使用的可响应的变量,必须使用ref、或者reactive进行产出,区别在于reactive是深度响应式的(数组对象等等都可以)
<template>
<p>{{msg}}</p>
<button @click="myFn">点击增加</button>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import {ref,reactive} from 'vue'
export default {
name: 'App',
setup(props) {
let msg = ref(23)
let bigMisg = reactive({
onObj:{
name:'深度响应'
}
})
function myFn(){
msg.value += 36
}
return {msg , myFn, bigMisg}
}
}
</script>
由于setup是靠导出和外部进行连接的,因此我们可以将业务逻辑写在外部,在里面直接引用即可,留出数据导出接口
<template>
<p>{{msg}}</p>
<button @click="myFn">点击增加</button>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import {ref,reactive} from 'vue'
export default {
name: 'App',
setup(props) {
let onetext = onetext()
return {...onetext }
}
}
function onetext (){
let msg = ref(23)
let bigMisg = reactive({
onObj:{
name:'深度响应'
}
})
function myFn(){
msg.value += 36
}
return {msg , myFn, bigMisg}
}
</script>