Vue3.0学习

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>