vue3.0选用了composition API,vue2.0选用了Options API ，vue3.0还有一大特性是setup函数
setup
一、setup函数的特性以及作用
1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
2、setup函数是 Composition API（组合API）的入口
3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
二、setup函数的注意点
1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined
3、setup函数只能是同步的不能是异步的
使用中要配合ref、reactive
reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组
监听中使用watchEffect、watch及区别
1.不需要手动传入依赖
2.每次初始化时会执行一次回调函数来自动获取依赖
3.无法获取到原值，只能得到变化后的值
4.watchEffect只能监听基本数据，不能监听复杂数据，watch既能监听基本数据也能监听复杂数据
方法调用
import { ref , reactive } from 'vue'
setup() {
const count=ref(1)
const num=ref(0)
const arr=reactive([1,2,3])
const obj=reactive({count:0})
const onClick=()=>{
console.log('这是点击时间')
}
watchEffect(()=>{//可以监听单个数据
console.log(count.value);
})
watch(()=>[...arr],(arr,prevarr)=>{//监听数组需要解构
console.log(arr,prevarr);
})
// 监听多个 只能监听基本数据类型不能多个监听数组和对象
watch([count,num],([count1,num1],[prevcount,prevnum])=>{
console.log('改变之前',prevcount,prevnum);
console.log('改变之后',count1,num1);
})
watch(()=>obj.count,(count,prevcount)=>{//可以监听对象
console.log(count,prevcount);
})
setTimeout(()=>{
count.value++
obj.count++
arr.push(666)
},1000)
return {//如果想在页面调用就必须return
count,arr,objnum,onClick
}
}
vue3.0传值
props:表示组件传入当前组件的props值，响应式的，当传入新的prop时，它将被更新，可以通过watch监听到变化。
import { toRefs } from 'vue'
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
}
vue3.0路由跳转
<template>
<div class="home">
<div @click="toRouters('/PunchCard')">路由跳转</div>
</div>
</template>
<script>
import {useRouter} from 'vue-router'
setup(){
let router = useRouter()
const toRouters = (name) => {
router.push(name)
}
return {
toRouters
}
}
</script>
个人总结！！！
